Expand and Collapse div using jQuery

This lesson will show you how to expand and collapse the div, there is lot of ways to do this kind of task but we can do this with two lines of  jQuery code, here the logic is just we need to toggle the div while click on the button at the same time we need to change the button text also as per the expanding and collapsing div. let's see the simple logic behind this

HTML

here just we need to take one button to manage the DIV expanding and collapsing order and one DIV with content, when we click on toggle button the #box div change the order to expanding/collapsing.

<a class="toggle">Click to Collapse</a>

<div id="box">
HI lessoncup is programming blog focused on php,mysql,jquey,ajax,css3,html5.
</div>

Javascript

here write the click function to .toggle button, now we need to change the button text when the user click's for that write the condition inside the .text() method and toggle the div using .slideToggle() method.

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(function(){
 
 $('.toggle').click(function(){
  
  $(this).text($(this).text() == 'Click to Expand' ? 'Click to Collapse' : 'Click to Expand');
  
  $('#box').slideToggle(200);
 
 });
 
 
});

</script>

CSS

<style>

body{ font-family:Verdana, Geneva, sans-serif; font-size:11px;}

#lessoncup{ width:600px; height:auto; border:solid #CCC 1px; padding:5px; margin:0 auto;}

h1{ width:530px; margin:0 auto; padding:10px;}

#box{width:500px; height:auto; padding:10px; border:solid #CCC 1px;line-height:24px; margin:0 auto;margin-top:10px;}

.toggle{ cursor:pointer; font-weight:bold; color:#06C;}

</style>

Live Demo