Function customisation issue (click to show below section)

Question

I'm having an issue with a function I found online for the website I'm making for a client. You can check it at the following link https://synth-form.com/?page_id=1394. The function comes to action when you click on the blade model (there is model 1 and 2) and basically shows the section underneath with the specific specs for each product.

The problem as you can see is when you click on one and then on the other one, the section adds below the one already opened.

I need the previously section opened to close automatically when you click on the other one.

Here the code I have used to achieve the result.

<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.showme').click(function(){
$(this).closest('.elementor-section').next().slideToggle();
$(this).toggleClass('opened');
});
});
});
</script>
<style>

.showme > div > div > a , .showme > div > div > div > i , .showme > div > div > img{
cursor: pointer;
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.opened > div > div > div > i , .opened > div > div > img{

}

</style>

And then I gave to the section the CSS ID show me. For the BLADE 2, I have copied and pasted the javascript function and named it showme2.

Is there anyone who can help me? I don't have any knowledge in Javascript.

Thanks in advance

Answer 1

Here is an example:

JavaScript:

$('.showme').click(function () {
  // gets unique element for section
  // #first_section.elementor-section
  let target = $('#' + $(this).data('target') + '.elementor-section');
  // check if opened
  if(target.is(':visible')) {
    target.slideUp();
  }
  else {
    // close all other elements if visible except current clicked.
    $.each($('.elementor-section'), function () {
      if($(this).get(0) !== target) {
        if($(this).is(':visible')) {
          $(this).slideUp();
        }
      }
    });
    // open current
    target.slideDown();
  }
});

HTML:

<!-- Buttons -->
<button class="showme" data-target="first_section"></button>
<button class="showme" data-target="second_section"></button>

<!-- Sections -->
<section id="first_section" class="elementor-section"></section>
<section id="second_section" class="elementor-section"></section>

Or check out the live demo: JSitor - Live Demo