带有 Next 和 Prev 按钮的手风琴

Question

我需要使用下一个和上一个按钮构建手风琴，并且当前步骤的上一个将被启用，而下一个步骤将被禁用，直到我不会通过按钮导航。

下面是我的代码

<div class="accordion">
  <div class="accord-header">Header 1</div>
  <div class="accord-content">This is the content for the first header.
    <button class="prevbtn">pREV</button>
    <button class="nextbtn">nEXT</button>
  </div>
  <div class="accord-header">Header 2</div>
  <div class="accord-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <button class="prevbtn">pREV</button>
    <button class="nextbtn">nEXT</button>
  </div>
    <div class="accord-header">Header 3</div>
  <div class="accord-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <button class="prevbtn">pREV</button>
    <button class="nextbtn">nEXT</button>
  </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery(".accordion .accord-header").click(function() {
      if(jQuery(this).next("div").is(":visible")){
        jQuery(this).next("div").slideUp("slow");
      } else {
        jQuery(".accordion .accord-content").slideUp("slow");
        jQuery(this).next("div").slideToggle("slow");
      }
    });
     jQuery(".accordion .nextbtn").click(function(){
        jQuery(".accordion .accord-content").slideUp("slow");
        jQuery(this).parent().siblings().next().show();

     });
  });
</script>
<style type="text/css">
.accord-header {border:2px solid #fff;padding: 5px;background-color: #ccc;}
.accord-content { display: none; }
</style>

Answer 1

<div class="container">

    <ul class="checkouttabs">
        <li class="tab-link current" data-tab="tab-1">Tab One</li>
        <li class="tab-link" data-tab="tab-2">Tab Two</li>
        <li class="tab-link" data-tab="tab-3">Tab Three</li>
        <li class="tab-link" data-tab="tab-4">Tab Four</li>
    </ul>

    <div id="tab-1" class="tab-content current">
        <form action="" id="theForm">
            <input type="text" name="foo" id="foo" />
            <input class="submit" type="submit" name="submit">
        </form>
        <button class="tab_btn next">Next</button>
    </div>
    <div id="tab-2" class="tab-content">
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <div class="accordion">
            <div class="checkout_step_title" id="first_header">Header 1</div>
            <div class="checkout_step_content checkout_step_content-first">This is the content for the first header.
                <button class="nextbtn">Next</button>
            </div>
            <div class="checkout_step_title" id="second_header">Header 2</div>
            <div class="checkout_step_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                <button class="prevbtn">Prev</button>
                <button class="nextbtn">Next</button>
            </div>
            <div class="checkout_step_title" id="third_header">Header 3</div>
            <div class="checkout_step_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                <button class="prevbtn">Prev</button>
                <button class="nextbtn">Next</button>
            </div>
            <div class="checkout_step_title" id="forth_header">Header 4</div>
            <div class="checkout_step_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                <button class="prevbtn">Prev</button>
                <button class="nextbtn">Next</button>
            </div>
            <div class="checkout_step_title" id="fifth_header">Header 5</div>
            <div class="checkout_step_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                <button class="prevbtn">Prev</button>
                <button class="shipping_btn">Next</button>
            </div>
        </div>
                <!-- <button class="tab_btn prev">Prev</button> -->
    <button class="tab_btn next">Next</button>
    </div>
    <div id="tab-3" class="tab-content">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
     <button class="tab_btn prev">Prev</button>
    </div>

</div><!-- container -->


<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("button.tab_btn").live('click',function(){
        var getClass = jQuery(this).attr('class');
        console.log(getClass);
        if(getClass == "tab_btn next"){
            //validations
            var closest_par = jQuery(this).closest('div');
            var current_div = jQuery(closest_par).attr('id');
            var updated_div = jQuery(closest_par).next().attr('id');    
            jQuery(".tab-content").stop(true,true).hide();          
            jQuery("#" + updated_div).stop(true,true).show();
            jQuery(".checkouttabs li").removeClass("current")
            jQuery("li[data-tab='"+ current_div +"']").addClass("pass");
            jQuery("li[data-tab='"+ updated_div +"']").addClass("current");
        }
        if(getClass == "tab_btn prev"){
            //validations
            var closest_par = jQuery(this).closest('div');
            var current_div = jQuery(closest_par).attr('id');
            var updated_div = jQuery(closest_par).prev().attr('id');
            jQuery(".tab-content").stop(true,true).hide();
            jQuery("#" + updated_div).stop(true,true).show();
            jQuery(".checkouttabs li").removeClass("current")
            jQuery("li[data-tab='"+ updated_div +"']").removeClass("pass");
            jQuery("li[data-tab='"+ updated_div +"']").addClass("current");
        }
    });

    jQuery("button.stp_btn").live('click',function(){
        var getClass = jQuery(this).attr('class');
        console.log(getClass);
        if(getClass == "stp_btn next"){
            //validations
            var closest_par = jQuery(this).closest('div');
            var current_div = jQuery(closest_par).attr('id');
            var updated_div = jQuery(closest_par).next().attr('id');    
            jQuery(".stp-content").stop(true,true).hide();          
            jQuery("#" + updated_div).stop(true,true).show();
            jQuery(".checkouttabs li").removeClass("current")
            jQuery("li[data-tab='"+ current_div +"']").addClass("pass");
            jQuery("li[data-tab='"+ updated_div +"']").addClass("current");
        }
        if(getClass == "stp_btn prev"){
            //validations
            var closest_par = jQuery(this).closest('div');
            var current_div = jQuery(closest_par).attr('id');
            var updated_div = jQuery(closest_par).prev().attr('id');
            jQuery(".stp-content").stop(true,true).hide();
            jQuery("#" + updated_div).stop(true,true).show();
            jQuery(".checkouttabs li").removeClass("current")
            jQuery("li[data-tab='"+ updated_div +"']").removeClass("pass");
            jQuery("li[data-tab='"+ updated_div +"']").addClass("current");
        }
    });

    jQuery(".pass").live('click',function(){
        var get_data_val = jQuery(this).attr('data-tab');
        jQuery(".tab-content").stop(true,true).hide();  
        jQuery("#"+ get_data_val).stop(true,true).show();
        jQuery(this).removeClass("pass");
        jQuery(this).nextAll('.checkouttabs li').removeClass('pass current');
        jQuery(this).addClass("current");
    });

    jQuery('.checkout_step_content-first').show();
    jQuery('.checkout_step_title').attr('disabled',true);
    jQuery(".accordion .checkout_step_title").click(function () {
         jQuery(".accordion .checkout_step_title").removeClass('currentstep');         
         jQuery(this).addClass('currentstep');         
         jQuery(this).nextAll('.checkout_step_title').attr('disabled',true);

         if(jQuery(this).is('[disabled=disabled]')){
            return false;
         }         
         if(!jQuery(this).next("div").is(":visible")) {
              jQuery(".accordion .checkout_step_content").slideUp("slow");
              jQuery(this).next("div").slideToggle("slow");
          }
      });

     jQuery(".accordion .nextbtn").click(function () {
          nextBtn(this);
     });

     jQuery(".accordion .prevbtn").click(function () {
          previousBtn(this);
    });

    function previousBtn(data){
       var $prevContent = jQuery(data).parent().prev().prev();
       jQuery(".accordion .checkout_step_title").removeClass('currentstep');
       jQuery(".accordion .checkout_step_content").slideUp();
       jQuery(data).parent().prev().attr('disabled',true);
       $prevContent.slideDown(1000);
    }
    function nextBtn(data){
       var $nextContent = jQuery(data).parent().next().next();
       jQuery(".accordion .checkout_step_title").removeClass('currentstep');
       jQuery(".accordion .checkout_step_content").slideUp();
       jQuery(data).parent().prev().attr("disabled",false);
       $nextContent.slideDown(10);
    }
    jQuery('.shipping_btn').click(function(){
        jQuery('.tab_btn').trigger('click');
        jQuery("li[data-tab='tab-2']").addClass("pass");
    });
});
</script>