ADDITIONAL KNOWLEDGE

Jquery panel slide down

1–2 minutes

read

Jquery panel slide down

Jquery makes this work easy by using just one word that is slideToggle.

HTML:

<body>


Click to slide the panel down or up

 
Hello world!


</body>

CSS:

body{
 margin: 0;
}
#panel,#flip {
 padding: 5px;
 text-align: center;
 background-color: #bfaaaa;
 border: solid 1px #c3c3c3;
 cursor: pointer;
 color:white;
}

#panel {
 padding: 50px;
 display: none;
 background-color: #796868;
}

JS:

$(document).ready(function() {
 $("#flip").click(function() {
 $("#panel").slideToggle("slow");
 });
});

MAKE A NOTE: If you are using jquery then you have to include this script tag

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

FOR BETTER UNDERSTANDING, VISIT:

https://jsfiddle.net/djmayank/jq46gsu1/1/

FOR LIVE DEMO:

 

 

 

 

 

 

 

 

, ,
, ,

Leave a comment