Open a div from top and bottom

Question

Here is my fiddle: http://jsfiddle.net/2tBGE/209/

I just want to open a div with animation after a user clicked on a menu item. For example, when clicking on the second item, clicked item and previous item should push to the top of the page and below item should push to the bottom of the page.

 jQuery(document).ready(function($) { $('ul li a').on('click', function(){ $(this).parent().next().css({ 'display':'block' }) }) }); 

 ul{ list-style: none; background: #eee; padding: 0; margin: 0; position: fixed; bottom: 0; width: 100%; height: 200px; } .js_item{ display:none; } li a{ position: relative; display: block; padding: 10px 15px; text-decoration: none; } a:hover{ background: #9c0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="main"> <li><a href="#">main menu1</a></li> <div class="load_content_for_menu_1 js_item">1</div> <li><a href="#">main menu2</a></li> <div class="load_content_for_menu_2 js_item">2</div> <li><a href="#">main menu3</a></li> <div class="load_content_for_menu_3 js_item">3</div> <li><a href="#">main menu4</a></li> <div class="load_content_for_menu_4 js_item">4</div> <li><a href="#">main menu5</a></li> <div class="load_content_for_menu_5 js_item">5</div> </ul> 

Answer 1

Note: I've made a small edit to your html structure so that each .toggled_content <div> is the child of each <li> .

---

With the following jQuery methods you can achieve this.

slideToggle()

Display or hide the matched elements with a sliding motion.

toggleClass()

Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.

find()

Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

 var allContent = $("li"); allContent.find(".toggled_content").hide(); $(".toggler").on("click", function() { var $thisParent = $(this).parent(); if (!$thisParent.hasClass('open')) { $thisParent .parent() .find(".open") .toggleClass("open") .find(".toggled_content") .slideToggle(); } $thisParent .toggleClass("open") .find(".toggled_content") .slideToggle(); }); 

 ul { list-style: none; background: #eee; padding: 0; margin: 0; } li a { display: block; padding: 10px 15px; text-decoration: none; } a:hover { background: #9c0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="main"> <li> <a href="#" class="toggler">main menu1</a> <div class="toggled_content">1</div> </li> <li> <a href="#" class="toggler">main menu2</a> <div class="toggled_content">2</div> </li> <li> <a href="#" class="toggler">main menu3</a> <div class="toggled_content">3</div> </li> <li> <a href="#" class="toggler">main menu4</a> <div class="toggled_content">4</div> </li> <li> <a href="#" class="toggler">main menu5</a> <div class="toggled_content">5</div> </li> </ul> 

---

Edit:

Or just use the jquery-ui accordion widget .

 $("#accordion").accordion({ heightStyle: "fill", active: 3 }); $("#accordion").on("accordionactivate", function(event, ui) { const offset = ui.newHeader[0].offsetTop; $([document.documentElement, document.body]).animate({ scrollTop: offset }, 200); }); 

 body { margin: 0; } .ui-accordion { height: 200vh; /* simulate height with content */ background: #eee; } .ui-accordion-header { margin: 0; padding: 10px 15px; font-weight: normal; } .ui-accordion-header:hover { background: #9c0; } 

 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> <div id="accordion"> <h3>main menu 1</h3> <div>1</div> <h3>main menu 2</h3> <div>2</div> <h3>main menu 3</h3> <div>3</div> <h3>main menu 4</h3> <div>4</div> </div> 

Answer 2

This might be a little more complex than it appears, because you probably do not want any of the DIVs to be made full-screen. Rather, you want the headings of all the DIVs to remain visible, and the contents of any one content div to fill all remaining vertical space.

jQueryUI does this for you, using their accordion tabs widget. You can either include jQueryUI in your project and use their functionality, or you can examine their code and see how they did it, then modify their code to work in your own project.

To incorporate jQueryUI is simple: just add it the same way you would add jQuery, right after the call to jQuery (that is, you also need jQuery for jQueryUI to work, and the link to jQueryUI must follow the link for jQuery) See this link for a code example.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

Answer 3

Instead of adding .css() I have added .show() . It basically does the same by adding display:block

Try adding blow

 jQuery(document).ready(function($) { $('ul li a').on('click', function() { $('.js_item').hide('slow') $(this).parent().next().show('slow') }) }); 

 ul { list-style: none; background: #eee; padding: 0; margin: 0; position: fixed; bottom: 0; width: 100%; height: 200px; } .js_item { display: none; } li a { position: relative; display: block; padding: 10px 15px; text-decoration: none; } a:hover { background: #9c0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <ul class="main"> <li><a href="#">main menu1</a></li> <div class="load_content_for_menu_1 js_item">1</div> <li><a href="#">main menu2</a></li> <div class="load_content_for_menu_2 js_item">2</div> <li><a href="#">main menu3</a></li> <div class="load_content_for_menu_3 js_item">3</div> <li><a href="#">main menu4</a></li> <div class="load_content_for_menu_4 js_item">4</div> <li><a href="#">main menu5</a></li> <div class="load_content_for_menu_5 js_item">5</div> </ul> 

Hope this helps!