Member Avatar for vizz 
<div id="wrapper">

    <div id="header">
      <p>This is the Header</p>
    </div>

    <div id="navigation"> 
      <p>This is the Navigation</p>		 
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </div>
   
    <div id="content">
      <p>This is the main content</p>
    </div>
    
   <div id="footer">
     <p>This is the Footer</p>
   </div> 
  
</div>

This is my HTML code. I have menus in navigation div. Content div is hidden with

#content { 
             display: none;
            }

How to slide up content div from bottom to upside using javascript or jquery when clicked on menus inside navigation div ?

  • 4 Contributors
  • 4 Replies
  • 4K Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

You are close. As pritaeas hinted and jstfsklh211 clarified, the jQuery effect that reveals a hidden panel is slideDown, while slideUp hides it. If you only need a basic show/hide on menu click, delegate the click once on the navigation and prevent queuing animations: $('#navigation').on('click', 'a', function(e){ e.preventDefault(); $('#content').stop(true, true).slideToggle(250); }); This uses event delegation via .on() and .stop(true, true) to avoid stacked animations when links are clicked rapidly. (learn.jquery.com, api.jquery.com)

If you literally want the panel to rise from the bottom, use a transform-based reveal. Drop the display:none rule on #content and toggle a class that transitions transform: translateY(...) so the content animates upward inside its area.

/* Start hidden just below its own box; clip if needed */
#content {
  transform: translateY(100%);
  transition: transform 300ms ease;
  /* optional: put the parent in overflow:hidden if the slide should be clipped */
}
#content.is-open {
  transform: translateY(0);
}
// Handle all nav clicks in one place
$('#navigation').on('click', 'a', function (e) {
  e.preventDefault();
  $('#content').toggleClass('is-open');
});

Transforms and transitions are GPU-friendly and avoid layout thrash compared to animating height; they also give you precise control over direction. (developer.mozilla.org)

Troubleshooting tips:

  • If nothing moves, ensure #content is in the DOM and not set to display:none (use the transform-based hidden state instead).
  • If the panel visually overflows, set a wrapper around #content to overflow:hidden.
  • Keep the single delegated handler on #navigation so newly added links work automatically. (learn.jquery.com)

Recommended Answers

All 4 Replies

Member Avatar for vizz

I have tried that but not working.
My div "#content" is hidden which I want to display with sliding upside from bottom

http://api.jquery.com/slideUp/

Member Avatar for Member #120589

This thread has been inactive for 2 years. Unless there is a fresh related question, may we leave it in peace and not resurrect it? Thanks.

//EDIT - not directed at you jstfsklh211 - I had to delete a few nonsense posts for a couple of numpties ;-)

Edited by Member #120589
commented: it came up on the list didn't even look at the date +4
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.