How do i display hidden slide?

Question

How do i display hidden slide?

74 Views Asked by ricky At 26 September 2017 at 02:24

I have a code in which I need assistance with. Basically, I have a panel with 4 slides. I hide the 2nd slide using the code $(".two").detach();. The goal I am trying to achieve is: when I check the check box in slide 1, the 2nd slide should display when selecting "Next" (basically not skipping 2nd slide). Otherwise 2nd slide skips. How can I make slide 2 appear when selecting checkbox in slide one?

I tried targeting the checkbox with second slide using append(), but the 2 slide panel still remains hidden. (If I get thumbs down, please explain why so I can improve on forums within the future.)Thank you for your time!

$(document).ready(function() {
  var $fieldsets =
    $('#panels .sets')
    .first()
    .addClass('active')

    .end()
    .not(':first')
    .hide()
    .end();
  $(':nth-child(3)').removeClass("active").css('display', 'none');
  var $panelControlButtons =
    $('#panelcontrol button')
    .filter('.btnPrev')
    .prop('disabled', true)
    .end();


  $('#panelcontrol')
    .on('click', 'button', function(e) {
      e.preventDefault();

      switch (true) {
        case $(this).hasClass('btnNext'):
          var $newFieldset =
            $fieldsets
            .filter('.active')
            .hide()
            .removeClass('active')
            .next()
            .addClass('active')
            .show();


          //enable Prev button
          $panelControlButtons
            .filter('.btnPrev')
            .prop('disabled', false);

          //disabled Next button
          if ($newFieldset.is(':last-child')) {
            $panelControlButtons
              .filter('.btnNext')
              .prop('disabled', true);
          }

          break; // btnNext
          var $input =
            $('input')
            .filter('.active')
            .end();
        case $(this).hasClass('btnPrev'):
          var $newFieldset =
            $fieldsets
            .filter('.active') //selects the current fieldset
            .hide() //hide it 
            .removeClass('active') //remove active flag
            .prev() //move to the previous fieldset
            .addClass('active') //flag as active
            .show(); //and show it

          // enable Next button
          $panelControlButtons
            .filter('.btnNext')
            .prop('disabled', false);

          // disable Prev button   
          if ($newFieldset.is(':first-child')) {
            $panelControlButtons
              .filter('.btnPrev')
              .prop('disabled', true);
          }
          break; // btn Prev

      }

    }); // panelcontrol button handler 

  /*skips panel two*/
  $(".two").detach();
});

<!doctype html>
<html lang="engl">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="simplegrid.css">
  <script src="jquery/main.js"></script>
  <meta charset="utf-8">
  <title>Stylus Simulator</title>
</head>

<body>
  <div id="container">
    <div id="panels">
      <div class="sets">
        <h1>PANEL 1</h1>
        <form action="">
          <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
          <input type="checkbox" name="vehicle" value="Car">I have a car
        </form>
        <div><input type="text" name="ss1" value="" /></div>
      </div>
      <div class="sets two">
        <h1>PANEL 2</h1>
        <div><input name="ss2" value="" /></div>
      </div>
      <div class="sets">
        <h1>PANEL 3</h1>
      </div>
      <div class="sets">
        <h1>PANEL 4</h1>
      </div>
    </div>
  </div>
  <div id="panelcontrol">
    <button class="btnPrev">Prev</button>
    <button class="btnNext">Next</button>
  </div>
  <script type="text/javascript" src="jquery-3.2.1.js"></script>
</body>

</html>

Original Q&A

There are 1 best solutions below

**Shiladitya** · Answer 1 · 2017-09-26T03:36:08.633000

Here you go with a solution

$(document).ready(function() {
 var skipPanel2 = true;
 function enableDisablePrevNex(){
  if($('.active').index() === 0){
    $('.btnPrev').prop('disabled', 'disabled');
    $('.btnNext').removeAttr('disabled');
    if($('input[name="vehicle"]').is(':checked')){
      skipPanel2 = false;
    } else {
      skipPanel2 = true;
    }
  } else if($('.active').index() === 3){
    $('.btnNext').prop('disabled', 'disabled');
    $('.btnPrev').removeAttr('disabled');
  } else {
    $('.btnPrev, .btnNext').removeAttr('disabled');
  }
 }
 
 //Initial Call
 enableDisablePrevNex();
 
 $('input[name="vehicle"]').change(function(){
  if($(this).is(':checked'))
    skipPanel2 = false;
 });
 
 $('.btnNext').click(function(){
  slideNext();
 });
 
 $('.btnPrev').click(function(){
  var activeSet = $('.active').index();
  $('.sets:nth-child(' + (activeSet + 1) + ')').removeClass('active');
  $('.sets:nth-child(' + activeSet + ')').addClass('active');
  enableDisablePrevNex();
 });
 
 function slideNext(){
  var activeSet = $('.active').index();
  if(activeSet === 0){
    if(skipPanel2){
      $('.sets:nth-child(' + (activeSet + 1) + ')').removeClass('active');
      $('.sets:nth-child(' + (activeSet + 3) + ')').addClass('active');
    } else {
      $('.sets:nth-child(' + (activeSet + 1) + ')').removeClass('active');
      $('.sets:nth-child(' + (activeSet + 2) + ')').addClass('active');
    }
  } else {
    $('.sets:nth-child(' + (activeSet + 1) + ')').removeClass('active');
    $('.sets:nth-child(' + (activeSet + 2) + ')').addClass('active');
  }
  enableDisablePrevNex();
 }
});

.sets {
  display: none;
}

.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div id="panels">
      <div class="sets active">
        <h1>PANEL 1</h1>
        <form action="">
          <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
          <input type="checkbox" name="vehicle" value="Car">I have a car
        </form>
        <div><input type="text" name="ss1" value="" /></div>
      </div>
      <div class="sets">
        <h1>PANEL 2</h1>
        <div><input name="ss2" value="" /></div>
      </div>
      <div class="sets">
        <h1>PANEL 3</h1>
      </div>
      <div class="sets">
        <h1>PANEL 4</h1>
      </div>
    </div>
  </div>
  <div id="panelcontrol">
    <button class="btnPrev">Prev</button>
    <button class="btnNext">Next</button>
  </div>

I was unable to execute your code, so I tried with my own code.

Hope this will help you.

How do i display hidden slide?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in PANELS

Trending Questions

Popular # Hahtags

Popular Questions