0

I want the following and hope you can help, I have created a container in Elementor and within this container I have added element and direction row. I want to the container to toggle with a button in the container, the toggle functionality is working. But it opens the other container as well, how can I avoid that other containers are opening, only the clicked ones needs to open?

This is my code:

<div class="elementor-image-box-wrapper">
    <figure class="elementor-image-box-img">
      <img decoding="async" src="https://domain.xx/wp-content/plugins/elementor/assets/images/placeholder.png" title="" alt="" loading="lazy">
    </figure>
    <div class="elementor-image-box-content">
      <h3 class="elementor-image-box-title">Title</h3>
      <p class="elementor-image-box-description">
        Lorem ipsum.
        <span class="oo-dienst-panel-block">
         
          <span class="read-more-content"> Add here you panel content...</span>
          <span class="read-more-button" onclick="toggleReadMore(this)">Read more</span>
        </span>
      </p>
    </div>
  </div>
</div>

Here is the CSS:

elementor-widget-image-box .elementor-image-box-content {
      width: 100%;
    }

    .elementor-widget-image-box .read-more-content {
      display: none;
    }

    .elementor-widget-image-box .read-more-button {
      cursor: pointer;
      color: #0073e6;
      text-decoration: underline;
    }

...and my js.

 function toggleReadMore(button) {
    var content = button.parentElement.querySelector('.read-more-content');
    content.style.display = content.style.display === 'none' ? 'inline' : 'none';
  }

1 Answer 1

0

You need to provide a more specific selector query. There are several methods to achieve this, but I suggest that using the sibling property is the most straightforward way if your HTML structure remains constant.

var content = button.previousElementSibling; // Immediately prior to the button

However, choosing the closest method could be a reliable approach.

var content = button.closest('.read-more-content');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.