$0.3

slideup and slidedown div on click button?

Ask a question+
2

slideup and slidedown div on click button

Please check the answer(s) posted and mark the one that best answers your question as the answer.

Community Cop
add comment

2 Answers

1

The best way to do this would be to use the JavaScript function “toggle”:

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <style>
            #slider1 {
                [height/top/margin-top]: [what ever default value you want];
            }
            #slider1.down {
                [height/top/margin-top]: [what ever value you need for when the element is down];
            }
        </style>
    </head>
    <body>
        <div id="slider1" class="sliding">
            <ul>
                <li>List item</li>
                <li>List item</li>
                <li>List item</li>
                <li>List item</li>
                <li>List item</li>
            </ul>
        </div>
        <button onclick="ToggleSliding()">Click Me</button>
        <script>
            function ToggleSliding() {
                /* This toggle function will give the element the class name of "down"
                    if the element doesn't have the class already. If the element does
                    have the class on it already, it will take it off. */
                document.getElementById("slider1").classList.toggle("down");
            }
        </script>
    </body>
</html>
Batman 90
add comment
0

Before the div, you could put another div, with a certain height, let’s say 100px. Then, you would make a button which will hide the div when you click on it. Using some simple JS and CSS, we can slide your div up and down.

<!DOCTYPE html>

<html>

<head>
    <title>Div Slider</title>

</head>
<style tyle='text/css'>
    * {
        text-align: center;
        /*Aligns the text in the center*/
        margin: 0px auto;
        /*Aligns all other elements in the center, this is just for a bit of neatness, remove this if you'd like*/
    }

    #sliderdiv {
        height: 100px;
        /*How much do you want the main div to slide each time? Input that value here, replace the number with your own number, BUT KEEP THE px*/
    }

    #maindiv {
        background-color: red;
        /*Visual reference that lets you know where the main div is*/
        height: 300px;
        /*Sets the height of the main div, otherwise it won't show*/
    }
</style>

<body>
    <div id='sliderdiv'></div>
    <!--Slider div-->
    <div id='maindiv'></div>
    <!--Main div-->
    <script>
        var slid = 0; //defines slid variable as an integer
        slide = function() { //Defines the slide function
            if (slid === 0) { //If the slid variable is 0, continues, if not, then skips to next if statement
                document.getElementById('sliderdiv').style.display = "none"; //Selects the sliderdiv, then changes the display to none, therefore the div disappears and the main div slides up
                slid = 1; //Changes the slid variable to 1 to let the program know if it should slide the main div up or down (when the button is clicked again)
            } else if (slid === 1) { //If the slid variable is 1, continues, if not, then skips to else statement
                document.getElementById('sliderdiv').style.display = "block"; //Selects the sliderdiv, then changes the display to it's default (block), therefore the div reappears in front of the main div, making the main div slide down
                slid = 0; //Changes the slid variable to 0 to let the program know if it should slide the main div up or down (when the button is clicked again)
            } else { //Will proceed to next line if slid is not equal to 0 or 1
                alert('Slid variable not an appropriate value'); //Will alert the user of an error in the JS code. This should never occur unless the user tampers with the JS or sets the slid variable to something in the console.
            } //Closes else{} statement
        }
    </script>
    <button onclick='slide()'>Slide</button>
    <!--Slide button-->
</body>

</html>

This is just a very simple program that shows the basics of what you like. The div starts in the slid down position. If you want the div to start in the slid up position, simply add display:none; directly under #sliderdiv{ and replace var slid = 0; with var slid = 1;.

I hope this helps!

ghastovastex 0
add comment

Your Answer