How To Add jQuery Slide up and Slide down Effect to Blogger

Follow the easy steps below to add Slide up and Slide down Effect to your blog.

1.Log in to your dashboard--> layout- ->Page Elements

2.Click on Add a Gadget on the sidebar.

3.Select HTML/Javascript and add the javascript code given below and click save.

<script type="text/javascript">
$(document).ready(function(){
$('#butSlide').click(function () {
$('#divSlide').slideToggle("slow");
});
});
</script>

<button id="butSlide">Slide up/down</button>
<br />
<div style="width:350px;height:80px; border: solid 1px black;background-color:LightGrey;text-align:center;" id="divSlide">Insert your content here</div>

Note : Remember to replace 'Insert Your Content Here' with your real content.

You can change the value of height,width,background color,.....

0 comments:

Post a Comment

 

Support By Blogger