Disable button 1 Section when click on button 2

user_8942021 0
Viewed 145

Have multiple buttons and sections associated with those buttons in the Elementor page builder.

What I am trying to achieve is when page loads, we can only see buttons and section will toggle when someone clicks on the button.

I have managed to achieve that, but when clicking on second button, button 1 section should hide and button 2 section should display.

Here is the w3 schools link for my project

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

   e.preventDefault();     
    });
});
jQuery(document).ready(function( $ ){
    
  var hbtn = $(".videosBtn");
  var hcon = $(".videosSection");
  
   hcon.hide();
   hbtn.click(function(e) {
   var index = hbtn.index(this) 
   $(hcon).eq(index).slideToggle("slow");

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

html jquery javascript
3 Answers

You can use onclick for buttons for example

<button class="btn1" onclick="f1()">BUTTON1</button>

and add the function to toggle in f1()

user_112364700

Here is a quick example, the idea is to hide the other sections first, and show the section that you want to be displayed;

$(document).ready(function($) {

  $('.btn1').click(function() {
    $('.section').hide();
    $('.section1').show();
  })

  $('.btn2').click(function() {
    $('.section').hide();
    $('.section2').show();
  })

  $('.btn3').click(function() {
    $('.section').hide();
    $('.section3').show();
  })

})
.section {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}

.section2 {
  background-color: lightgreen;
}

.section3 {
  background-color: orange;
}
<button class="btn1">BUTTON1</button>
<button class="btn2">BUTTON2</button>
<button class="btn3">BUTTON3</button>

<div class="section section1">
  This is Section1.
</div>
<div class="section section2">
  This is Section2.
</div>
<div class="section section3">
  This is Section3.
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

user_98792870

Add a new class for each button (.btn) and section (.section) and use these as in the code below. You can have as many buttons and sections as you want and the code below will work without any modification:

var hbtn = $(".btn");
var hcon = $(".section");  
hcon.hide();
hbtn.click(function(e) {
    var index = hbtn.index(this); 
    hcon.hide() //OR hcon.filter(':visible').slideToggle("slow")
    .eq(index).slideToggle("slow");
});

DEMO

$(document).ready(function( $ ){  
    var hbtn = $(".btn");
    var hcon = $(".section");  
    hcon.hide();
    hbtn.click(function(e) {
        var index = hbtn.index(this);
        hcon.hide() //OR hcon.filter(':visible').slideToggle("slow")
        .eq(index).slideToggle("slow");
    });
});
.section1 {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}

.section2 {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn1 btn">BUTTON1</button>
<button class="btn2 btn">BUTTON2</button>

<div class="section1 section">
This is Section1.
</div>
<div class="section2 section">
This is Section2.
</div>

user_35589310
Related