CollapsibleFieldset Tutorial

This tutorial aims to illustrate the usage of the CollapsibleFieldset HtmlHelper that is found in the DigitallyCreated.Utilities.Mvc assembly. The CollapsibleFieldset extension method can be found in the EyeCandyHtmlHelpers class. The tutorial assumes you know C#, JavaScript, ASP.NET MVC, and jQuery.

The CollapsibleFieldset is a fieldset that automatically collapses and expands when the user clicks the fieldset legend. It's great to use when you've got some controls or form elements that are not always needed immediately by the user and you'd like them hidden.

CollapsibleFieldset.gif
(See a live demonstration on this page)

Using a collapsible fieldset is very easy and familiar as it functions in a similar fashion to MVC's BeginForm HtmlHelper. Here's a small demonstration:

<% using (Html.CollapsibleFieldset("Filter Settings", true)) { %>
    <table class="LayoutTable">
        <tr>
            <th>
                <label for="FirstFilterSetting">First Filter Setting:</label>
                </th>
                <td>
                    <%= Html.TextBox("FirstFilterSetting") %>
                </td>
            </tr>
    </table>
<% } %>

As you can see in the above example, you use CollapsibleFieldset inside a using block. The first parameter is the text to go in the fieldset's legend. The second is whether or not the fieldset should be collapsed by default.

Here's the XHTML and JavaScript that is emitted (cleaned up a little with some indenting):

<script type="text/javascript">
    jQuery(function()
    {
        var func = function(speed)
        {
            var legend = jQuery("#GUID7c1c80ababaf48e69c6a87a03559ecf5 legend");
            legend.parent().children().not("legend").toggle(speed);

            if (legend.hasClass("Collapse"))
            {
                legend.removeClass("Collapse");
                legend.addClass("Expand");
            }
            else
            {
                legend.removeClass("Expand");
                legend.addClass("Collapse");
            }
        }

        func(0);

        jQuery("#GUID7c1c80ababaf48e69c6a87a03559ecf5 legend").click(function() { func("fast"); });
    });
</script>
<fieldset class="Collapsible" id="GUID7c1c80ababaf48e69c6a87a03559ecf5">
    <legend class="Collapse"><a>Filter Settings</a></legend>
        
    <table class="LayoutTable">
        <tr>

            <th>
                <label for="FirstFilterSetting">First Filter Setting:</label>
            </th>
            <td>
                <input id="FirstFilterSetting" name="FirstFilterSetting" type="text" value="" />
            </td>
        </tr>
    </table>

</fieldset>

The GUID-based ID on the fieldset is randomly generated every time, so do not rely on it being the same. As you can see the fieldset is unstyled, so you can use CSS to style it in such a way that it is evident to the user that it is collapsible. The legend can have one of two classes, "Expand" or "Collapse". It will be "Expand" when the fieldset is collapsed, and "Collapse" when the fieldset is expanded.
You're welcome to borrow the styles and icons used on the demonstration page.

Last edited Mar 23, 2010 at 6:16 AM by dchambers, version 3

Comments

No comments yet.