jquery how to only have 1 active toggle at a time?

Question

I'm making a website that requires me to have 18 icons of which, each icon has its own assign div that is hidden, and once pressed the hidden Div slides down and shows below the icon. These icons have to be in a different Div from the content I want to hide/show.

I'm using Elementor on wordpress since I'm really ignorant when it comes to webdesign and programing,

I've found this jquery that I'm using to show and hide Div when I click on icons. I've assign the icons as.showBlock1.ShowBlock2.ShowBlock3 etc and the Divs as.hiddenBlock1.hiddenBlock2.hiddenBlock3 etc... and it works how I want except that I only want 1 active at a time, so that if I press icon1, it shows Div1 and then if I press icon2, it hides Div1 and shows Div2 and so on.

jQuery(document).ready(function( $ ){
    
  var hbtn = $(".showBlock");
  var hcon = $(".hiddenBlock");
  
   hcon.hide();
   hbtn.click(function(e) {
   var index = hbtn.index(this) 
   $(hcon).eq(index).slideToggle("slow");

   e.preventDefault();     
    });
});

jQuery(document).ready(function( $ ){
    
  var hbtn = $(".showBlock2");
  var hcon = $(".hiddenBlock2");
  
   hcon.hide();
   hbtn.click(function(e) {
   var index = hbtn.index(this) 
   $(hcon).eq(index).slideToggle("slow");

   e.preventDefault();     
    });
});

Since I'm really ignorant to coding I've been just repeating the script and changing the numbers on the class.showBlock and.hiddenBlock.

Answer 1

Maybe the following is helpful to you?

 $(function(){ var hbtn = $(".showBlock"); var hcon = $(".hiddenBlock"); hcon.hide(); hbtn.click(function(e) { var curr=hcon.eq(hbtn.index(this)); hcon.not(curr).hide(); curr.slideToggle("slow"); e.preventDefault(); }); });

 .cont1 {height:50px}.hiddenBlock {display: inline-block; width:60px; height: 40px; background-color:#ccc}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="cont1"> <div class="hiddenBlock">1</div> <div class="hiddenBlock">2</div> <div class="hiddenBlock">3</div> <div class="hiddenBlock">4</div> <div class="hiddenBlock">5</div> <div class="hiddenBlock">6</div> </div> <div> <button class="showBlock">show 1</button> <button class="showBlock">show 2</button> <button class="showBlock">show 3</button> <button class="showBlock">show 4</button> <button class="showBlock">show 5</button> <button class="showBlock">show 6</button> </div>

A button click will at first hide all visile .hcon elements and will then .slideToggle the one corresponding to the button position.

Edit

After having had a look at your web page I can simplify your structure as shown below:

 jQuery(function($){ const btns=$("div.showBlock"); const scts=$("section.hiddenBlock"); $("section").on("click","div.showBlock",function(){ let curr=scts.eq(btns.index(this)); scts.not(curr).hide(); curr.toggle(); }); })

 .showBlock {display: inline-block; background-color:#ccc; width:50px; margin:2px;padding:6px}.hiddenBlock {background-color:#eea; width:192px; padding:6px; margin-top:8px}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>... <section class="... elementor-element-51eaf85..." data-id="51eaf85" data-element_type="section"> <div class="elementor-container elementor-column-gap-no"> <div class="elementor-column... elementor-element-1a773d0 showBlock"...> one </div> <div class="elementor-column... elementor-element-6b9441a showBlock"...> two </div> <div class="elementor-column... elementor-element-ce4f2d4 showBlock"...> three </div> </div> </section> <section class="... elementor-element-fc98ed1 hiddenBlock..." data-id="fc98ed1" style="">first section</section> <section class="... elementor-element-cf64eb5 hiddenBlock..." data-id="cf64eb5" style="display: none;">second section</section> <section class="... elementor-element-f16da07 hiddenBlock..." data-id="f16da07" style="display: none;">third section</section>...

The HTML structure there is an excerpt from the page. I removed a few class attributes to improve the readability and added a little makeshift CSS to make it "presentable".

On top of that I unified your classes "showBlock1", "showBlock2", "showBlock3" to "showBlock" and "hiddenBlock", "hiddenBlock2", "hiddenBlock3" to "hiddenBlock".

Have a look at it and play around with it...