How do I make it only show 1 section at a time (when I show 1, the others hide)?

Don’t know if it’s relevant but I’m using Elementor on wordpress.

I’ve found this jquery that I’m using to show and hide sections when I click on images or icons

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 adding .showBlock1,2,3,4… and .hiddenBlock1,2,3,4… so I can add specific triggers for specific sections.

Source: Ask Javascript Questions