Collapse or Expand slide using Java Script

April 06, 2015 0 Comments

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#box1
{
    background-color : Gray;
    height:200px;
    width : 200px;
    overflow : hidden ;
}


</style>
<script type ="text/javascript">
    function slideopen(ele) {
        var elem = document.getElementById(ele);
        elem.style.transition = "height 0.2s linear 0s";
        elem.style.height = "200px";
    }
    function slideclose(ele) {
        var elem = document.getElementById(ele);
        elem.style.transition = "height 0.2s linear 0s";
        elem.style.height = "0px";
    }

</script>

    <title>Change Background color</title>
</head>
<body>
<button onclick="slideopen('box1');"> slideopen</button>
<button onclick="slideclose('box1');"> slideclose</button>

<div id="box1">Paste your content here</div>
</body>
</html>

Code generate the following 

Collapse or Expand slide using Java Script

Collapse or Expand slide using Java Script

Jacob Lefore

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard. Google

0 comments: