How to create a collapsible Fieldset using JQuery & css

We can create a collapsible fieldset very easily using Jquery & css. Lets see how to achieve same :
To achieve same a Jquery function is attached to click event of Legend, and whenever legend is clicked,
a specific css class is toggled on Div present inside fieldset where all fieldset content resides.
Css class: Active whenever is attached to div then legend text is changed to Collapse me else changed to Expand me.

All the code in action can be seen on this fiddler: https://jsfiddle.net/nehaRustagi/L1xzcxnj/5/

–HTML
<body>
  <fieldset>
    <legend class=”collapsibleLegend”>
    – Collapse Me
    </legend>
   This is a collapsible panel tutorial which is using JQuery and CSS
   In this tutorial a Jquery function is attached to click event of Legend,
   and whenever legend is clicked, a specific css class is toggled on this div.
   Css class: Active whenever is attached to div then legend text is changed to Collapse me else changed to Expand me.
</fieldset>
</body>
–JQUERY
$(document).ready(function() {
    $(‘legend.collapsibleLegend’).click(function () {
        $(‘#collapsibleDiv’).toggleClass(‘active’);
        if ($(‘.collapsibleFieldset’).hasClass(‘active’)) {
            $(‘legend.collapsibleLegend’).html(‘- Collapse Me’);
        } else {
            $(‘legend.collapsibleLegend’).html(‘+ Expand Me’);
        }
    });
    });
–CSS 
fieldset {
    font-family: sans-serif;
    border: 2px solid #ccc;
    border-radius: 2px;
}
.collapsibleLegend{
    color: #000;
    padding: 5px 10px;
    font-size: 13px;
    margin-left: 20px;
    padding: 5px;
    box-shadow: none;
    border: 0;
    font-weight:bold;
    cursor:pointer;
}
.collapsibleFieldset {
    height: 0;
    overflow: hidden;
}
.collapsibleFieldset.active {
        height: auto;
    }
Advertisements

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