单击按钮 2 时禁用按钮 1 部分

Question

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(); }); });

Answer 1

You can use onclick for buttons for example

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

and add the function to toggle in f1()

Answer 2

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>

Answer 3

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>