Dec 4, 2011

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

17 comments :

  1. Hii thks to share ; )

    I have one question : How to add an "close button" on the div ?

    Thks have a nice day.

    ReplyDelete
  2. I have not tried it but replace all tags with tags and replace all tags with tag from the current example.

    ReplyDelete
  3. This is really helpful! Thank you!

    ReplyDelete
  4. this is really cool and will be helpful.

    My question is, can this be set to only have one open at a time?

    thanks

    ReplyDelete
  5. I didn't get you? What exactly you want?

    ReplyDelete
  6. I want to only view one div at a time. When you click on another li item, the previous one closes. Only displaying one open li item at a time.

    ReplyDelete
  7. super, nice boss. thank to u

    ReplyDelete
  8. I've found that I use ('true','true') it doesn't work, but using (true,true) does. Just a little tip for anyone who may be struggling as I am.

    ReplyDelete
  9. muchas gracias funciona excelente!

    ReplyDelete
  10. right, because if use single quotes it takes as a string not as a bollean

    ReplyDelete
  11. Very useful example. Thanks for tutorial.

    ReplyDelete
  12. Thanks For Sharing

    ReplyDelete
  13. Andrew Burns1/8/13 1:36 PM

    This is strange. I downloaded to my computer and it works fine on firefox by not IE. but it works on IE on your page?

    ReplyDelete
  14. Great tutorial!


    How would you modify the code so that the window only expands when the plus sign is clicked versus the entire area?


    Thanks!

    ReplyDelete
  15. inside the div how can we insert a control

    ReplyDelete
  16. im using a lable control inside the ul,li, div tag. i get the text value only at the runtime . in my page the text appear outside the div control. i need it with in the div value

    ReplyDelete