$0.22

slideup and slidedown div on click button?

Ask a question+
1

slideup and slidedown div on click button

add comment

2 Answers

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
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. (The Doctype HTML statement is out of the code for some reason in this answer, can’t get it to be in the code box for some reason)

<!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