Collapse or Expand slide using Java Script

<!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
Collapse or Expand slide using Java Script Collapse or Expand slide using Java Script Reviewed by Jacob Lefore on April 06, 2015 Rating: 5

No comments