Simple JQuery Toggle Tutorial | CSS JQuery Slide Toggle

Today I am going to share a very common and easy jquery tutorial with you. A JQuery Slide Toggle function.

.slideToggle() function is used to hide or show matched elements in a sliding effect.

So the basic syntax is

[js]$("div").slideToggle("slow");[/js]

So this was the basic syntax on how to slide toggle a div, now lets start with some real working examples.

So first the basic html code:

[html]
<div id="toggle">
<ul>
<li>Youtube Video Scraping</li>
<div>
Always I wondered to display youtube videos below my posts or for some other purpose. But always had to use some plugins or some complicated scripts. So finally coded for you people a small function which will fetch or scrape...<a href="http://webstutorial.com/youtube-video-scraping-fetch-youtube-video-through-rss/programming/php">Continue reading</a>
</div>
<li>WordPress Multiple Category Search</li>
<div>
Since when I started wordpress, I had a question in my mind, why wordpress doesn’t give multiple search option? I googled a lot, but couldn’t find a plugin or code which exactly works. So finally decided to go more into...<a href="http://webstutorial.com/wordpress-multiple-category-search/content-management-system-cms/wordpress-cms">Continue reading</a>
</div>

<li>Youtube Video Scraping</li>
<div>
Always I wondered to display youtube videos below my posts or for some other purpose. But always had to use some plugins or some complicated scripts. So finally coded for you people a small function which will fetch or scrape...<a href="http://webstutorial.com/youtube-video-scraping-fetch-youtube-video-through-rss/programming/php">Continue reading</a>
</div>

<li>Ten WordPress Useful Functions And Snippets</li>
<div>
Some useful WordPress PHP funtions. Just copy and paste these functions in your themes functions.php file Change the WP Login Logo & URL Link Load JQuery From Google CDN How to remove the WordPress Version Information Remove Default WordPress Meta...<a href="http://webstutorial.com/ten-wordpress-useful-functions/content-management-system-cms/wordpress-cms">Continue reading</a>
</div>

<li>A Good PHP Developer Can Answer This | PHP Test</li>
<div>
PHP developers go through 3 stages in their life Beginner Good Best A beginner PHP coder is some one who just started making some PHP projects in CMS like WordPress, Joomla, Magento and other PHP based CMS. A good PHP... <a href="http://webstutorial.com/good-php-developer-answer-php-test/programming/php">Continue reading</a>
</div>

</ul>
</div>
[/html]

And finally our js

[js]
<script type="text/javascript">
$(document).ready(function() {
$("li").click(function(){
$(this).toggleClass("active");
$(this).next("div").stop('true','true').slideToggle("slow");
});
});
</script>
[/js]

Explanation:

In our basic html layout, we have placed a div exactly next to our li. So we tell the jquery to slide exactly the next div of the current clicked li. If we directly write slideToggle then it will slide all the div's of the current page. In the above js code, we are also using a stop() function. This is essential to use, to avoid multiple clicks on a same li making it to slide for continuous multiple times of sliding.

Here's a working demo of the above code