Expandable text boxes for legends of fieldsets What is the best way to refactor the following script?

&lt;script type="text/javascript"&gt;

    $(document).ready(function() {
        $(".rolesList").hide(); 
    });

        $("#legendFunction").click(function() {
        $("#divChkUserRoles").toggle('slow');            
            var text = $("#lblExpandFunction").text() == '+' ? '-' : '+';
            $("#lblExpandFunction").text(text);
        })

        $("#legendMISheet").click(function() {
        $("#divChkUserRolesMISheet").toggle('slow');
            var text = $("#lblExpandMISheet").text() == '+' ? '-' : '+';
            $("#lblExpandMISheet").text(text);
        })

&lt;/script&gt;


The above script will be applied to the following HTML and ASP.NET code:

            &lt;fieldset&gt;
                &lt;legend&gt;&lt;span id="legendFunction" style="cursor: pointer" title="Click here to toggle show or collapse Function."&gt;
                    &lt;label id="lblExpandFunction" style="padding: 5px;"&gt;+&lt;/label&gt;
                    KengLink Function 
                &lt;/span&gt;&lt;/legend&gt;
                &lt;div id="divChkUserRoles"  class="rolesList"&gt;      
                    &lt;asp:CheckBoxList ID="UserRoles" runat="server" /&gt;                  
                &lt;/div&gt;
            &lt;/fieldset&gt;
            &lt;fieldset&gt;
                &lt;legend&gt;&lt;span id="legendMISheet" style="cursor: pointer" title="Click here to toggle show or collapse MI Sheet."&gt;
                    &lt;label id="lblExpandMISheet" style="padding: 5px;"&gt;+&lt;/label&gt;
                MI Sheet
                &lt;/span&gt;&lt;/legend&gt;
                &lt;div id="divChkUserRolesMISheet" class="rolesList"&gt;  
                    &lt;asp:CheckBoxList ID="UserRolesMISheet" runat="server" /&gt;
                &lt;/div&gt;
            &lt;/fieldset&gt;
Don't use ids at all. (You almost never should be using them. Ids get to be really problematic once you have composite views and/or multiple people on a project)

Place a few appropriate classes in your html. And use the jquery composite and relative references to do it all at once.

$('.expander').click(function() {
  $(this).closest('fieldset').find('.expandable').toggle('show');
  var l = $(this).find('label');
  l.text(l.text() === '+' ? '-' : '+');
});


where your clicker span gets a class of expander and your rolesList gets the class of expandable. You could just use rolesList directly, but I find  expandable to be somewhat more descriptive.