Jquery Expand Collapse Div Example - Jquery

How to produce expand and collapse effect for a div in jquery?

Snippet Code


  
Rate this page :
  [ 0 votes]

Sample jquery code allows you to collapse and expand a div element. Here slideToggle() method is used to create collapse and hide effect.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(function(){ $(".expand").click(function () { $maincontent = $(this); $content = $maincontent.next(); $content.slideToggle(500, function () { $maincontent.text(function () { return $content.is(":visible") ? "Collapse" : "Expand"; }); }); }); }); </script> <style> .expand { background-color:#d3d3d3; padding: 2px; cursor: pointer; font-weight: bold; width:100px; } .content { display: none; padding : 5px; } </style> <div class="expand"><span>Expand</span></div> <div class="content"> <pre> Welcome to hscripts.com. This is sample snippet. This is demo content. </pre> </div>

Tags


Ask Questions

Ask Question