Show and Hide Containers and Hide the Previous Container Elementor



<script>
document.addEventListener('DOMContentLoaded', function () {
  jQuery(function ($) {
    $('.showme').click(function (event) {
      event.preventDefault();
      $('.e-con').next().slideUp(); // Close all previous elements
      $(findFurthestAncestor($(this)[0], 'e-con')).next().slideToggle();
      $('.showme').removeClass('opened'); // Remove the 'opened' class from all previous buttons
      $(this).addClass('opened');
      $('.showme:first').hide(); // Hide the first button
    });
    $('.closebutton').click(function () {
      $(findFurthestAncestor($(this)[0], 'e-con')).prev().find('.showme').click();
    });
    $('.reset-button').click(function () {
      $('.e-con').next().slideUp();
      $('.showme').removeClass('opened');
      $('.showme:first').show();
    });
  });
});

function findFurthestAncestor(elem, className) {
  let parentElement = elem.parentElement;
  let furthestAncestor;
  while (parentElement != null) {
    if (parentElement.classList.contains(className)) {
      furthestAncestor = parentElement;
    }
    parentElement = parentElement.parentElement;
  }
  return furthestAncestor;
}
</script>
<style>
.showme a, .showme svg, .showme i, .showme img, .closebutton a, .closebutton i, .closebutton img, .reset-button a, .reset-button i, .reset-button img {
  cursor: pointer;
  -webkit-transition: transform 0.34s ease;
  transition: transform 0.34s ease;
}

.opened i, .opened img, .opened svg {
  transform: rotate(90deg);
}
</style>