So I have this code in my form, and I want to toggle each divs one by one by clicking the same button repeatedly. But when I click the button, everything shows up, is there a way to toggle it one by one by clicking the same button?

<div id="msg2" class="hidemsg">
    <label for="mentcont" class="control-label">Message 2:</label>
    <input type="text" class="form-control" name="ment2" placeholder="New message." />
</div>
<div id="msg2" class="hidemsg">
    <label for="mentcont" class="control-label">Message 3:</label>
    <input type="text" class="form-control" name="ment3" placeholder="New message." />
</div>
<div id="msg2" class="hidemsg">
    <label for="mentcont" class="control-label">Message 4:</label>
    <input type="text" class="form-control" name="ment4" placeholder="New message." />
</div>
<div id="msg2" class="hidemsg">
    <label for="mentcont" class="control-label">Message 5:</label>
    <input type="text" class="form-control" name="ment5" placeholder="New message." />
</div>

Here's the button that toggles it;

<a href="#" type="button" class="btn btn-default" onclick="toggler(\'msg2\');">New Message</a>

The javascript code for toggling it;

function toggler(divId) {
    $('#' + divId).toggle();
}

I'm just a beginner with js and I want to toggle the inputs one by one by clicking the same button. So its like when i click the new message: Message 2 will appear then when I click it again, Message 3 will appear so on and so forth.!

So I have this code in my form, and I want to toggle each divs one by one by clicking the same button repeatedly. But when I click the button, everything shows up, is there a way to toggle it one by one by clicking the same button?

<div id="msg2" class="hidemsg">
    <label for="mentcont" class="control-label">Message 2:</label>
    <input type="text" class="form-control" name="ment2" placeholder="New message." />
</div>
<div id="msg2" class="hidemsg">
    <label for="mentcont" class="control-label">Message 3:</label>
    <input type="text" class="form-control" name="ment3" placeholder="New message." />
</div>
<div id="msg2" class="hidemsg">
    <label for="mentcont" class="control-label">Message 4:</label>
    <input type="text" class="form-control" name="ment4" placeholder="New message." />
</div>
<div id="msg2" class="hidemsg">
    <label for="mentcont" class="control-label">Message 5:</label>
    <input type="text" class="form-control" name="ment5" placeholder="New message." />
</div>

Here's the button that toggles it;

<a href="#" type="button" class="btn btn-default" onclick="toggler(\'msg2\');">New Message</a>

The javascript code for toggling it;

function toggler(divId) {
    $('#' + divId).toggle();
}

I'm just a beginner with js and I want to toggle the inputs one by one by clicking the same button. So its like when i click the new message: Message 2 will appear then when I click it again, Message 3 will appear so on and so forth.!

• javascript
• jquery
• html
• css

• in case you use hidemsg to hide divs, then use $("#msg2.hidemsg")[0].removeClass("hidemsg"). Also you can use not() and :visible selectors and take [0] item from collection – teran Commented Mar 31, 2016 at 14:31
• @teran can you explain it to me more? sorry i'm not that fond with js. tnx – Sync Commented Mar 31, 2016 at 14:33
• see jsfiddle/n340ugdq – teran Commented Mar 31, 2016 at 14:48
• $(".hidemsg:not(:visible):first").toggle(); – teran Commented Mar 31, 2016 at 14:52

6 Answers 6

I'm not sure but try below mentioned code

Use below mentioned HTML code:

<a href="#" type="button" class="btn btn-default" onclick="toggler();">New Message</a>

Use below mentioned javascript code:

var x=1;
function toggler() {
   var hidemsgLength=$('.hidemsg').length; 
   if(x<hidemsgLength){
      $('.hidemsg').eq(x).show();
      x++;
   }
}

Now ing to the css Part:

.hidemsg{display:none;}
.hidemsg:first-child{display:block;}

Firstly it might be better to use unique IDs on div.

For multiple elements, prefer class.

Teran's solution is :

• on load, all divs are displayed
• on first click, first div is hidden
• on second click, second div is hidden
• ...

It means you can use$(".my_class:visible").first().toggle();

First of all, an ID can only be used once.

What you can do, if I understand your question correctly, is first hide all messages and display the first.

Then, when the user clicks the button, display the second, then the 3th, etc. I am not fond of an inline click handler, so i added an eventListener in JS.

// reference to button
var btn = document.querySelector('.js-button');

// which message to display
var index = 1;

// total number of messages
var numMessages = $('.hidemsg').length;

// hide 'm all
$('.hidemsg').hide();

// and toggle the first
toggler();

// when user clicks button, toggle the next one
btn.addEventListener('click', toggler);

function toggler() {
    $('.hidemsg').hide();   
    $('#msg' + index).show();

        // go to 1 again when the end is reached
    index = (index + 1 <= numMessages) ? index + 1 : 1;
}

https://jsfiddle/j32yjsaw/1/

I used a lot of ments to help you see exactly what was going on in the function. But basically, I'm keeping track of which div should be displayed by using a data- attribute in the toggle anchor.

//Set up the click event listener
$('#toggler').on('click', function () {
  
  //Get the 'count' data property from the anchor tag
  var counter = $(this).data('count');
  
  //assign that to be the ID of the message you want to display
  var nextMessage = '#msg' + counter;
  
  $(nextMessage).show(); //Show that Message
  
  counter += 1; //increment counter (for next click)
  $(this).data('count', counter); //assign new counter var to #toggler
});

.hidemsg {
  display: none;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" data-count="2" id="toggler" type="button" class="btn btn-default">New Message</a>
<div id="msg2" class="hidemsg">
  <label for="mentcont" class="control-label">Message 2:</label>
  <input type="text" class="form-control" name="ment2" placeholder="New message." />
</div>
<div id="msg3" class="hidemsg">
  <label for="mentcont" class="control-label">Message 3:</label>
  <input type="text" class="form-control" name="ment3" placeholder="New message." />
</div>
<div id="msg4" class="hidemsg">
  <label for="mentcont" class="control-label">Message 4:</label>
  <input type="text" class="form-control" name="ment4" placeholder="New message." />
</div>
<div id="msg5" class="hidemsg">
  <label for="mentcont" class="control-label">Message 5:</label>
  <input type="text" class="form-control" name="ment5" placeholder="New message." />
</div>

The problem is that all your div's have the same id. If you change the id's so that they are unique, with and increasing trailing value (msg1, msg2, ...), the function can be changed to something like this:

    var counter = 1;
    function toggler(divId) {
         $('#' + divId + counter).toggle();
    counter++;
    }

I would like to keep it short and sweet, where you think about clicked element and the next element. Let me know if that works for you. Good luck!

$(function() {

  $('.js-button').click(function() {
    if ($('div.active').next().hasClass('hidemsg')) {
      $('div.active').next('div').addClass('active').end().removeClass('active');
    }else{
      alert('Sorry, there is no next message');
    }
  });


});

.hidemsg {
  display: none;
}

.hidemsg.active {
  display: block;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="msg1" class="hidemsg active">
  <label for="mentcont" class="control-label">Message 2:</label>
  <input type="text" class="form-control" name="ment2" placeholder="New message." />
</div>
<div id="msg2" class="hidemsg">
  <label for="mentcont" class="control-label">Message 3:</label>
  <input type="text" class="form-control" name="ment3" placeholder="New message." />
</div>
<div id="msg3" class="hidemsg">
  <label for="mentcont" class="control-label">Message 4:</label>
  <input type="text" class="form-control" name="ment4" placeholder="New message." />
</div>
<div id="msg4" class="hidemsg">
  <label for="mentcont" class="control-label">Message 5:</label>
  <input type="text" class="form-control" name="ment5" placeholder="New message." />
</div>

<a href="#" type="button" class="btn btn-default js-button">New Message</a>