Form with NEXT and PREVIOUS button

Question

I need form with NEXT and PREVIOUS button done in Jquery using the "SHOW" and "HIDE" option in Jquery. On div1 disable option PREVIOUS. When it comes to div5 disable option NEXT. I think this can be done with a few lines of jQuery code.

 #div2 { display: none; } #div3 { display: none; } #div4 { display: none; } #div5 { display: none; }

 <div class="container"> <form> <div id="div1"> <p>Content 1</p> <button>PREVIOUS</button> <button>NEXT</button> </div> <div id="div2"> <p>Content 2</p> <button>PREVIOUS</button> <button>NEXT</button> </div> <div id="div3"> <p>Content 3</p> <button>PREVIOUS</button> <button>NEXT</button> </div> <div id="div4"> <p>Content 5</p> <button>PREVIOUS</button> <button>NEXT</button> </div> <div id="div5"> <p>Content 5</p> <button>PREVIOUS</button> <button>NEXT</button> </div> </form> </div>

Answer 1

How about this solution. Hope it helps!

 jQuery(document).ready(function() { jQuery('.tabs .tab-links a').on('click', function(e) { var currentAttrValue = jQuery(this).attr('href'); // Show/Hide Tabs jQuery('.tabs ' + currentAttrValue).show().siblings().hide(); // Change/remove current tab to active jQuery(this).parent('li').addClass('active').siblings().removeClass('active'); e.preventDefault(); }); jQuery('.nextButton').on('click', function() { var $activeTab = $('.tab-links li.active'); var $wrapper = jQuery(this).closest('.tabs'); var indexActive = $wrapper.find('li.active').index(); $wrapper.find('li').eq(indexActive + 1).find('a').click(); }); jQuery('.prevButton').on('click', function() { var $activeTab = $('.tab-links li.active'); var $wrapper = jQuery(this).closest('.tabs'); var indexActive = $wrapper.find('li.active').index(); $wrapper.find('li').eq(indexActive - 1).find('a').click(); }); });

 .tabs { width:100%; display:inline-block; } .tabs h4 { color: #00447c; margin: 5px 0 15px 0; display: inline-block; } .tab-links:after { display:block; clear:both; content:''; } .tab-links { padding: 0; margin: 10px 0 0 0; position: relative; top: 2px; } .tab-links li { margin:0px 5px 0 0; float:left; padding-top: 2px; list-style:none; } .tab-links a { padding:9px 8px 6px; display:inline-block; background: #c7d8e8; border: 2px solid #c7d8e8; border-bottom: 3px solid #c7d8e8; font-size: 10.5px; font-weight:600; color:#00447c; transition:all linear 0.15s; } .tab-links a:hover { background: #a7cce5; text-decoration:none; border: 2px solid #a7cce5; border-bottom: 3px solid #a7cce5; color: #ee3124; } li.active a, li.active a:hover { background:#fff; height: 16px; border-bottom: none; color: #ee3124; } .tab-content, .uploaded-documents-container { padding:15px; border-radius:3px; border: 2px solid #c7d8e8; background:#fff; font-size: .95em; } .tab-content-scroll { max-height: 375px; min-height: 375px; max-width: 1100px; min-width: 450px; overflow: auto; clear:both; } .tab-content-scroll-home { min-height: 135px; } .button-bar-scroll { min-height: 235px; } .tab-content-scroll>p { margin-top: 0; padding-right: 12px; } .tab-content a { margin-top: 10px; color: #00447c; } .tab { display:none; } .tab.active { display:block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <body> <div class="tabs"> <ul class="tab-links"> <li class="active"><a href="#tab1">Tab #1</a></li> <li><a href="#tab2">Tab #2</a></li> <li><a href="#tab3">Tab #3</a></li> <li><a href="#tab4">Tab #4</a></li> </ul> <div class="tab-content"> <div id="tab1" class="tab active"> <h4>Content 1</h4> <ul class="tab-links"> <li> <a href="#next_tab2" class="nextButton">Next</a> </li> </ul> </div> <div id="tab2" class="tab"> <h4>Content 2</h4> <ul class="tab-links"> <li> <a href="#back_tab1" class="prevButton">Prev</a> <a href="#next_tab2" class="nextButton">Next</a> </li> </ul> </div> <div id="tab3" class="tab"> <h4>Content 3</h4> <ul class="tab-links"> <li> <a href="#back_tab1" class="prevButton">Prev</a> <a href="#next_tab2" class="nextButton">Next</a> </li> </ul> </div> <div id="tab4" class="tab"> <h4>Content 4</h4> <ul class="tab-links"> <li> <a href="#back_tab1" class="prevButton">Prev</a> </li> </ul> </div> </div> </div>

Form with NEXT and PREVIOUS button

Question

1 answers

solution1
2 2016-12-13 16:22:43

Form with NEXT and PREVIOUS button

Question

1 answers

solution1 2 2016-12-13 16:22:43

solution1
2 2016-12-13 16:22:43