CODEWITHSUNDEEP
javascriptjqueryhtml
girish
girish

Reputation: 301

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>

Upvotes: 0

Views: 2512

Answers (8)

Manoj Sharma
Manoj Sharma

Reputation: 1

 .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>

Upvotes: 0

Rishabh
Rishabh

Reputation: 1213

Save the state on each click.

$(document).ready(function() {

  var state = 1;
  $('#toggle').click(function() {

    if(state==1){
       $('#1').hide();
       state=2;
    } 
    else if(state==2){
       $('#2').hide();
       state=3;
    }
    else if(state==3){
       $('#3').hide();
       state=4;
    }
    else if(state==4){
       $('#4').hide();
       state=1; //back to state
    }
  });

Upvotes: 1

Ankur Verma
Ankur Verma

Reputation: 5933

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.

Upvotes: 1

Husen
Husen

Reputation: 1587

Try this one

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

Upvotes: 1

Rajshee Turakhia
Rajshee Turakhia

Reputation: 274

  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

Upvotes: 0

Manoz
Manoz

Reputation: 6587

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/

Upvotes: 0

Sudharsan S
Sudharsan S

Reputation: 15393

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>

Upvotes: 0

Dhaval Soni
Dhaval Soni

Reputation: 305

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

Upvotes: 1

Related Questions