Jquery panel slide down

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 Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: