CODEWITHSUNDEEP
javascriptjqueryhtml
SxChoc
SxChoc

Reputation: 619

Toggle next section

I have a block of HTML:

<form>
    <section>
        <div class="row normalTopPadding personalInfomation">
            <!--Loads of HTML and Stuff-->
            <a id="myButton" class="reg-next-button btn btn-default">Next</a>
        </div>
    </section>

    <section>
        <div class="row normalTopPadding employerInfomation">
            <!--Loads of HTML and Stuff-->
            <a id="myButton" class="reg-next-button btn btn-default">Next</a>
        </div>
    </section>

    <section>
        <div class="row normalTopPadding accountInfomation">
            <!--Loads of HTML and Stuff-->
            <a id="myButton" class="reg-next-button btn btn-default">Next</a>
        </div>
    </section>
</form>

What I'm trying to achieve is for every time a button is clicked to hide the panel that the button has been clicked from and display the next panel down, so..

<script>
$('.personalInfomation .reg-next-button, .employerInformation .reg-next-button', .accountInformation .reg-next-button').click(function (e) {
    // Get the section that this button lives in
    var form = $(this).closest("section");

    //validation and other functions commented out for ease of reading

    // Hide this section...
    section.toggle();
    // And show the next section
    section.next().toggle();

});
</script>

Although this hides the section that the button has been clicked from it doesn't display the next one down.

Could someone point out my mistake?

Thanks, C

Upvotes: 0

Views: 998

Answers (2)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

you can check if next section is available or not and then hide current section.

NOTE: there is extra single quote in your jquery selector, which i have removed. Also, you have declared variable form but used section, so rename form to section

$('.personalInfomation .reg-next-button, .employerInformation .reg-next-button, .accountInformation .reg-next-button').click(function (e) {
    // Get the section that this button lives in
    var section = $(this).closest("section");

    //validation and other functions commented out for ease of reading

    // Hide this section...
    var $next = section.next();
    if($next.length>0) {  // check condition first and then hide current section and show next
       section.toggle();
      // And show the next section
      $next.toggle();
   }
});

Instead of putting each section in button click handler you can generalise it and improve your code so that when you add new section you don't need to change your script.

NOTE - do not use same id for multiple html elements as you have used it for button

$(function(){
$('section .row.normalTopPadding .reg-next-button').on('click', function (e) {
  var section = $(this).closest("section");
  var $next = section.next();
  if($next.length>0) {  // check condition first and then hide current section and show next
      section.addClass('hide');
      $next.removeClass('hide');
   }
});
});
.hide {
 display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <section>
        <div class="row normalTopPadding personalInfomation">
            <!--Loads of HTML and Stuff-->
            This is SECTION 1
            <a id="myButton" class="reg-next-button btn btn-default">Next</a>
        </div>
    </section>

    <section class="hide">
        <div class="row normalTopPadding employerInfomation">
            <!--Loads of HTML and Stuff-->
            This is SECTION 2
            <a id="myButton" class="reg-next-button btn btn-default">Next</a>
        </div>
    </section>

    <section class="hide">
        <div class="row normalTopPadding accountInfomation">
            <!--Loads of HTML and Stuff-->
            This is SECTION 3
            <a id="myButton" class="reg-next-button btn btn-default">Next</a>
        </div>
    </section>
</form>

Upvotes: 1

31piy
31piy

Reputation: 23859

You may try to hide all the sections first, and then on click of a, find the next .row to be shown.

See the demo below:

$('.row').not(':first').css('display', 'none');

$('.row > a').click(function() {
  $(this).parents('.row').toggle();
  $(this).parents('section').next('section').find('.row').toggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <section>
    <div class="row normalTopPadding personalInfomation">
      <!--Loads of HTML and Stuff-->
      <a id="myButton" class="reg-next-button btn btn-default">Next 1</a>
    </div>
  </section>

  <section>
    <div class="row normalTopPadding employerInfomation">
      <!--Loads of HTML and Stuff-->
      <a id="myButton" class="reg-next-button btn btn-default">Next 2</a>
    </div>
  </section>

  <section>
    <div class="row normalTopPadding accountInfomation">
      <!--Loads of HTML and Stuff-->
      <a id="myButton" class="reg-next-button btn btn-default">Next 3</a>
    </div>
  </section>
</form>

Upvotes: 0

Related Questions