How to expand/collapse (toggle) div layer using jQuery

Step 1 Include jQuery Library in head section of your html file.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Step 2 Write HTML

<div class="main">
<p class="User">User-1</p>
<div class="description">PHP dev</div>
<p class="User">User-2</p>
<div class="description">Jquery dev</div>
</div>

Step 3 Write CSS
.main {
margin: 0;
padding: 0;
width: 500px;
}

.User {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#c30;
}
.description {
padding: 5px 10px;
background-color:#fafafa;
}
p { padding: 5px 0; }
Step 4 JQuery function
<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery(".description").hide();
   jQuery(".User").click(function()
  {
    jQuery(this).next(".description").slideToggle(500);
  });
});
</script>

Thats it!!!!!!!!!!!!! Expandable-Collapsible panel is ready thank you
// 
Advertisements

One thought on “How to expand/collapse (toggle) div layer using jQuery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s