Jquery remove class hidden onclick

Question

Hello I have following HTML Structure:

<div class="form-step2 hidden"></div>
<div class="form-step2 hidden"></div>
<div class="form-step2 hidden"></div>
<div class="form-step2 hidden"></div>
<button type="button" id="addblock" class="btn btn-primary btn-block">+</button>

If i click on the button i want to remove one hidden and than the next hidden. My JS:

$( "#addblock" ).click(function() {
$( ".form-step2" ).next(".form-step2").removeClass("hidden");
});

But this removes all hidden

Arun P Johny · Accepted Answer · 2015-07-20 11:40:27Z

3

Remove the hidden class from the first form-step2 element with class hidden

$("#addblock").click(function() {
  $(".form-step2.hidden:first").removeClass("hidden");
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-step2 hidden">1</div>
<div class="form-step2 hidden">2</div>
<div class="form-step2 hidden">3</div>
<div class="form-step2 hidden">4</div>
<button type="button" id="addblock" class="btn btn-primary btn-block">+</button>

answered Jul 20, 2015 at 11:40

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tushar · Accepted Answer · 2015-07-20 11:42:07Z

3

$("#addblock").click(function() {
  $('.hidden:first').removeClass("hidden");
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="form-step2 hidden">A</div>
<div class="form-step2 hidden">B</div>
<div class="form-step2 hidden">C</div>
<div class="form-step2 hidden">D</div>
<button type="button" id="addblock" class="btn btn-primary btn-block">+</button>

answered Jul 20, 2015 at 11:42

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Comments

Bhushan Kawadkar · Accepted Answer · 2015-07-20 11:43:07Z

0

Try this :

$( "#addblock" ).click(function() {
    var $step = $( ".form-step2" ).not('.hidden');
    if($step.length<1)
    {
       $( ".form-step2:first" ).removeClass("hidden");
     }
     else
    {
      $step.next(".hidden").removeClass("hidden");
    }

});

answered Jul 20, 2015 at 11:43

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Comments

newtextJS · Accepted Answer · 2015-07-20 12:07:50Z

-1

u can try this:

http://codepen.io/pallavi1811/pen/KpBjNL

$( "#addblock" ).click(function() {
  $( ".form-step2" ).siblings(".form-step2").eq(1).removeClass("hidden");
});

answered Jul 20, 2015 at 12:07

newtextJS

451 silver badge6 bronze badges

Collectives™ on Stack Overflow

Jquery remove class hidden onclick

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related