.NET Discussion

.NET Issues, Problems, Code Samples, and Fixes

Simple jQuery Expand/Contract Functionality


I can’t express enough how much learning jQuery has expanded my ability to simply and dynamically add amazing effects very easily to my User Interfaces. Maybe I should start a jQuery blog? 🙂

One feature I come across a lot is the ability to expand and contract a section of the page, say a <div>. Before when I wanted to do this, I had to resort to either adding markup to my code and importing huge function-specific script files (ie, all they did was perform the expand/contract) or rely on ASP.NET’s AjaxToolkit’s Collapsible Panel Extender. While these solutions… worked… I was never really comfortable using them, and they were hardly reusable or scalable. Enter jQuery.

Let’s say I have a bit of HTML that is like so:

<p class="toggle">Expand/Collapse</p>
<div>
    <p>Some text goes here!</p>
</div>
<p class="toggle">Expand/Collapse</p>
<div>
    <p>Some more text goes here!</p>
</div>

If you wanted the ability to show/hide that following div, the jQuery is ridiculously simple:

$(document).ready(function() {
    $(".toggle").click(function () {
        $(this).next("div").slideToggle("fast");
    });
});

Yes, literally that’s it. So long as you keep with the HTML convention above, that’s all the jQuery you would need. You don’t have to add any extra markup or link one ID to another or anything. It’s all done via jQuery, and pretty much in one line ($(this).next("div").slideToggle("fast");).

Of course, sometimes you may want to do more. For instance, what if you wanted to change the text of the toggle button? Assume now that “Expand/Collapse” now reads “View Additional Info”. Here’s your jQuery:

$(document).ready(function() {
    $(".toggle").toggle(function () {
        $(this).text("Hide Additional Info")
        $(this).next("div").slideDown("fast");
        }, function() {
        $(this).text("View Additional Info")
        $(this).next("div").slideUp("fast");        
    });
});

Extremely simple, elegant, and even intuitive! If you ever doubted jQuery’s power before, you may want to reconsider. I sure did.

Advertisements

July 31, 2009 - Posted by | jquery, Tips & Tricks | ,

3 Comments »

  1. The code is broken,

    $(document).ready(){ function() {

    should be

    $(document).ready({ function() {

    and so on

    Comment by Cokeramirez | October 8, 2009 | Reply

  2. @Cokeramirez –

    Good catch! Your correction is almost right. It should be as it is now:

    $(document).ready(function(){ … });

    Sometimes even the dumbest of typos slips through the cracks :\

    Comment by Some.Net(Guy) | October 8, 2009 | Reply

  3. […] you may well know from my previous few posts, I’ve been dipping my toes into the jQuery and Javascript world for quite some […]

    Pingback by Javascript: How To Implement Callback Functionality « .NET Discussion | December 21, 2009 | Reply


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

%d bloggers like this: