CODEWITHSUNDEEP
jquery
GarethTF
GarethTF

Reputation: 15

JQuery switch between divs on click

I have the following setup:

$(".form-wrapper .section").first().addClass('open').show();
$(".form-wrapper .section.open .sub-section:first-child").addClass('open').show();
var subtotal = 1;
$('.next-sub').on('click', function(e) {
  e.preventDefault();

  var subcount = $('.form-wrapper .section.open').data('subcount');

  if (subtotal === subcount) {
    $('.form-wrapper .section.open').addClass('close').next('.section').addClass('open').show();
    $('.form-wrapper .section.close').removeClass('open close').hide();
    $('.form-wrapper .section.open .sub-section:first-child').addClass('open').show();
    subtotal = 1;
    subcount = $('.form-wrapper .section.open').data('subcount');
  } else {
    var subcount = $('.form-wrapper .section.open').data('subcount');
    $('.form-wrapper .section.open .sub-section.open').addClass('close').next('.sub-section').addClass('open').show();
    $('.form-wrapper .section.open .sub-section.close').removeClass('open close').hide();
  }
  subtotal = subtotal + 1;
});
.section,
.sub-section {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-wrapper">
  <div class="section" data-subcount="3">
    <div class="sub-section">1</div>
    <div class="sub-section">2</div>
    <div class="sub-section">3</div>
  </div>
  <div class="section" data-subcount="4">
    <div class="sub-section">1</div>
    <div class="sub-section">2</div>
    <div class="sub-section">3</div>
    <div class="sub-section">4</div>
  </div>
  <div class="section" data-subcount="2">
    <div class="sub-section">1</div>
    <div class="sub-section">2</div>
  </div>
</div>
<a class="next-sub" href="#">next</a>

My intended goal is you switch between the sub sections in each section, once you hit the last page in the current section it moves you til the next one, this works but the 2nd section will only go to the count for the first section, how do I solve this?

A JSFiddle is also available: https://jsfiddle.net/9p8cyLek/

Upvotes: 0

Views: 43

Answers (2)

Tomalak
Tomalak

Reputation: 338158

The effect can be achieved with a lot less code than you have:

var $sections = $(".form-wrapper .section"),
    firstSection = $sections[0];

$(firstSection).addClass('open');

$('.next-sub').on('click', function() {
  var nextSection = $sections.filter('.open').removeClass('open').next('.section')[0];

  $(nextSection || firstSection).addClass('open');
});
.section {
  display: none;
}
.section.open {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-wrapper">
  <div class="section" data-subcount="3">
    <div class="sub-section">1</div>
    <div class="sub-section">2</div>
    <div class="sub-section">3</div>
  </div>
  <div class="section" data-subcount="4">
    <div class="sub-section">1</div>
    <div class="sub-section">2</div>
    <div class="sub-section">3</div>
    <div class="sub-section">4</div>
  </div>
  <div class="section" data-subcount="2">
    <div class="sub-section">1</div>
    <div class="sub-section">2</div>
  </div>
</div>
<a class="next-sub" href="#">next</a>

It could even be a one-liner if need be (but I find this harder to read than the two-liner):

$('.next-sub').on('click', function() {
  $($sections.filter('.open').removeClass('open').next('.section')[0] || firstSection).addClass('open');
});

Upvotes: 0

msg
msg

Reputation: 8161

You can check if the element in the current section has any next sibling, to toggle the sub-section, or else, jump to the next section:

$(".form-wrapper .section").first().addClass('open').show();
$(".form-wrapper .section.open .sub-section:first-child").addClass('open').show();

$('.next-sub').on('click', function(e) {
  e.preventDefault();
  // Get current section and subsection
  $section = $(".form-wrapper .section.open");
  $subsection = $section.find(".sub-section.open");
  // It there is a next subsection, change to it
  $next = $subsection.next(".sub-section")
  if ($next.length) {
    $subsection.removeClass('open');
    $next.addClass('open');
  } else {
    // End of section, find next and set it and first subsection as active
    $subsection.removeClass('open')
    $section.removeClass('open');
    $nextSection = $section.next('.form-wrapper .section').addClass('open')
      .find('.sub-section:first-child').addClass('open')
  }
});
.section,
.sub-section {
  display: none;
}

.open {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-wrapper">
  <div class="section" data-subcount="3">
    <div class="sub-section">1</div>
    <div class="sub-section">2</div>
    <div class="sub-section">3</div>
  </div>
  <div class="section" data-subcount="4">
    <div class="sub-section">1</div>
    <div class="sub-section">2</div>
    <div class="sub-section">3</div>
    <div class="sub-section">4</div>
  </div>
  <div class="section" data-subcount="2">
    <div class="sub-section">1</div>
    <div class="sub-section">2</div>
  </div>
</div>
<a class="next-sub" href="#">next</a>

Upvotes: 1

Related Questions