'Toggle multiple divs one at a time with 1 button using Jquery

I have four divs which i want to toggle one at a time with a single button. I want to toggle them one after the other and not randomly. I have tried something like below.

$(document).ready(function() {
  $('#toggle').click(function() {
    $('#1').hide();
  });
  $('#toggle').click(function() {
    $('#2').hide();
  });
  $('#toggle').click(function() {
    $('#3').hide();
  });
  $('#toggle').click(function() {
    $('#4').hide();
  });
});

.divs {
  border: 1px solid;
  height: 30px;
}

<div id='1' class='divs'></div>
<div id='2' class='divs'></div>
<div id='3' class='divs'></div>
<div id='4' class='divs'></div>

<button id='toggle'>
  toggle
</button>

Solution 1:^[1]

  $(document).ready(function() {
  $('#toggle').click(function() {
    $('.divs:visible:first').hide();
  });
});

Solution 2:^[2]

Try this one

var count = 1;
$(document).ready(function () {
    $('#toggle').click(function(){
        $('.divs').show();
        if(count == 4)
            count = 1;
        $('#' + count).hide();
        count++;
    });
});

Solution 3:^[3]

First of all, keeping numeric ids is not good, so considering you will change them after wards, I am writing both the answers with numeric ids and without numeric ids.

With Numeric Ids, it is easy to do.

Suppose you have button to toggle the other four divs then it would look like this:

var state = 1;
$("#toggleButton").click(function(){
   $("#"+state++).slideToggle();
   if(state===5){state=1;}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id='1' >1</div>
<div id='2' >2</div>
<div id='3' >3</div>
<div id='4' >4</div>

<button id="toggleButton">
 toggle
</button>

Now coming to the non numeric ids.

var state = 1;
$("#toggleButton").click(function(){
  $("#div"+state++).slideToggle();
  if(state===5){state=1;}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id='div1' >1</div>
<div id='div2' >2</div>
<div id='div3' >3</div>
<div id='div4' >4</div>

<button id="toggleButton">
 toggle
</button>

FYI:In my opinion you should not use numeric ids.

Further adding more in to the code.

If you don't know how many div would be there but you are having a clear cut rule that the div's follow the sequence whether or not they are having numeric/non numeric ids then you can change the code slightly to incorporate that as well like this.

var state = 1;//first button id to be toggled
var total = 4;//this will be the total number of divs to be handled by the button
$("#toggleButton").click(function(){
  $("#"+state++).slideToggle();
  if(state===(total+1)){state=1;}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<div id='1' >1</div>
<div id='2' >2</div>
<div id='3' >3</div>
<div id='4' >4</div>

<button id="toggleButton">
 toggle
</button>

Happy coding.

Solution 4:^[4]

Use class instead of Id for using many times

var i = 1;
$('#toggle').click(function(){
  $('.divs').show();
  $('#' +  i).hide();
  i++;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='1' class='divs'>dsgsdg</div>
<div id='2' class='divs'>64636</div>
<div id='3' class='divs'>46y</div>
<div id='4' class='divs'>4373477</div>

<button id='toggle'>
  toggle
</button>

Solution 5:^[5]

loop through each element and use toggle. This gives the effect that you desire.

$('button').click(function(){
  $('.divs').filter(function(index,item){
  $(item).toggle('slow')
 })
})

Have a look at this demo - https://jsfiddle.net/ukw5wcmt/

Solution 6:^[6]

  var i = 1;
    $('#toggle').click(function(){
      $('.divs').show();
      $('#' +  i).hide();
      if(i==4)
        {
        i=1;
        }else{
        i++;
       }
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id='1' class='divs'>dsgsdg</div>
    <div id='2' class='divs'>64636</div>
    <div id='3' class='divs'>46y</div>
    <div id='4' class='divs'>4373477</div>

    <button id='toggle'>
      toggle
    </button>

Try this

Solution 7:^[7]

 .hide{ display: none; } 

  $(document).ready(function(){
         $(".click-btn").click(function(){
          var fid = $(".hide:first").prop("id");
           $("#"+fid).removeClass("hide");  
        });
        
        $(".remove-tag").click(function(){
          $(this).parent().addClass("hide");
        });
    });

    <div id="cart-1" class="hide">
        <div class="remove-tag">x</div>
        <h5>1</h5>  
    </div>
    
    <div id="cart-2" class="hide">
        <div class="remove-tag">x</div>
        <h5>2</h5>  
    </div>
    
    <div id="cart-3" class="hide">
        <div class="remove-tag">x</div>
        <h5>3</h5>  
    </div>
    
    <div id="cart-4" class="hide">
        <div class="remove-tag">x</div>
        <h5>4</h5>  
    </div>
    
    <div id="cart-5" class="hide">
        <div class="remove-tag">x</div>
        <h5>5</h5>  
    </div>
        
    <button class="click-btn">click</button>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Husen
Solution 3
Solution 4
Solution 5	Manoz
Solution 6	Rajshee Turakhia
Solution 7	Manoj Sharma

'Toggle multiple divs one at a time with 1 button using Jquery

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]