Open a div from top and bottom

align div to bottom of parent without absolute
css position bottom of div
css bottom of div
position div at bottom of page
div to bottom of div
align button to bottom of div
css stick to bottom of div
align div to bottom of page

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>

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>

How to position a div at the bottom of its container using CSS , How do I float a div to the bottom of the page? Basic property of CSS: position: The position property specifies the type of positioning method used for an elements. For example static, relative, absolute and fixed. bottom: The bottom property affects the vertical position of a positioned element.

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>

CSS bottom Property, How do I move a div to bottom in CSS? It isn't usual to state top or bottom and left or right positions with position: relative; however, these positions can be used to move a div relative to where it would normally be in the normal flow of the page content but the movement will leave a space where the div would have been positioned, so use these positions with care.

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>

Fixed position but relative to container, The position property along with attributes like, left, right, top and bottom, can be used to display appropriate positioning. Example 1: filter_none. edit close. 2. Child div positioned top right of parent and parent bottom left. Let’s add another child box in this example. We’ll call these elements grandparent (large box), parent and child (small box). As the parent is positioned relative to the grandparent with bottom:0px; then it is given a position:absolute.

How to align content of a div to the bottom using CSS, How to set up fixed width for ? Most visited in HTML. Top 10 Projects For Beginners To  3) Set the elements to top and bottom positions. #container .content .top { top: 0; } #container .content .bottom { bottom: 0; } 4) Set the height of all parent containers to 100%. html, body, #container, .content, .left, .right, .center { height: 100%; } 5) Set a min-height on the container so the top and bottom children won't overlap.

CSS Layout - The position Property, Set the bottom edge of the <div> element to 10px above the bottom edge of its nearest parent element with some positioning: div.absolute { position: absolute; Hi, How to vertically align a div at bottom which is in another div ? I have a outer div box of 500px width and 250px height. In that i have another inner div which has some text.

5. CSS layout: tricks and layout techniques, Elements are then positioned using the top, bottom, left, and right properties. However div.static { position: static; border: 3px solid #73AD21; }. Try it Yourself »  place a Div inside another Div , Div position relative to parent , center a div within another div ,Position div at top of parent ,position div at bottom of parent , Div position top right corner , Div position bottom center

Comments
  • And what did you tried? Please insert your code to your question
  • I share my code with you, but actually, I don't know how to open a div and slide down and up at the same time and make it full page
  • I think after click event target div should be at top: 0 and with height set to eg. 100vh and correct z-index.
  • thanks but I want to push above element to top and below element to bottom, with top:0 only clicked element will be at the top.
  • Thanks, but it's just an accordion, please look at the transition and full-screen menu on a gif
  • It's hard to tell exactly what you want from the gif you have uploaded because it is quite small, it plays quickly and it loops.
  • @Chino - After looking closely at the gif, using screenshots!, the clicked entry fills the entire viewport and the li elements immediately above/below are no longer visible. Is that what you want?
  • @Chino Is there anything else you need help with?
  • thanks for your help, can you collapse it smoothly like you expand it ?
  • after click menu should be full-screen and content push element to top and bottom.
  • please look at the transition on the gif, that's what I want to create
  • Check again. I have edited the answer. You can achieve the same using above code
  • Sorry but it's not what I want, assume that user click on middle nav item, menu item on top of the element should be on top of the page and menu item on below should push to bottom
  • yea, kind of. BUT accordion push element only to top, not bottom
  • I have updated my answer. Hope this will give some hint to achieve expected.