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

August 29, 2022 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 -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
        <!-- Our DOM Structure for the javascript using jQuery -->
        <div id="theDiv">This is a div!</div>
        <button id="myButton">Click Me!</button>
    </body>
</html>

Javascript:

<script type="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 dox