Can I Add A Slide To Hidden Div When Button Is Pressed?

September 28, 2023 Post a Comment

Can i add like a slide to the hidden divs when they disappear ? I want the div to slide when it disappears Like this: Button press The hidden div slides in Button press again the

Solution 1:

I recommend you use jQuery

Here is a good tutorial for sliding things in jQuery.

Solution 2:

Here is a very simple example using jQuery:

Check the JSFiddle:

HTML:

<!DOCTYPE html><html><head><!-- Include the jQuery Library --><scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script></head><body><!-- Our DOM Structure for the javascript using jQuery --><divid="theDiv">This is a div!</div><buttonid="myButton">Click Me!</button></body></html>

Javascript:

<scripttype="text/javascript">// When the page is ready and loaded
$(function(){
    // On click of "myButton"
    $('#myButton').click(function(){
        // "slideToggle" the div// ie: If hidden show it, else hide it
        $('#theDiv').slideToggle();
    });
})
</script>

View the jQuery slideToggle docs here

If you've never used jQuery before, check out: http://learn.jquery.com/http://thenewboston.org/list.php?cat=32 (Video tutorials)

Solution 3:

You can do it with jQuery or another library. You can also write your own function but it would take a while.

Solution 4:

The jQuery functions slideUp(), slideDown() and slideToggle() should help you.

Solution 5:

well if wanting to do this with pure javascript it would take a bit of coding or you can use jquery and use the baked in animations.

http://api.jquery.com/animate/

JavaScript Sample