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

Start reading ↓

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,.....

Join the conversation

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.