Making Collapsible Content with jQuery

Share

One thing that you might want to do if you have very long lists of content is make them collapse or not display until the user clicks on a trigger that makes the content appear. A good example of this is the ITCS Service Catalog. If the page displayed all the links at once, the page gets very long, so instead we displayed the categories, then reveal the links when the user clicks on the category name.

To do this, we use jQuery, an open source JavaScript library.  Since jQuery is loaded on every CommonSpot page, all of its library functions are readily available for you to use at any time.  This tutorial only some of the most simple tasks that  jQuery is capable of. You can read about everything it can do at the jQuery Documentation site.

Setting up the HTML Content

The first step to cover is to create the list without hiding it. This is important, because if you hide it by default, then users who have disabled JavaScript will not be able to see the links that you are creating. I made a page with the list of links that are in the tool bar on the ECU Homepage, and some text that will be the trigger for displaying and hiding the links. The HTML for the content is this:

<p>Click Here to Toggle Links</p>
<ul id="hideableContent">
 <li><a href="http://blackboard.ecu.edu">Blackboard</a></li>
 <li><a href="http://help.ecu.edu">Help Desk</a></li>
 <li><a href="http://pirateid.ecu.edu">PirateId</a></li>
 <li><a href="/csecu/links_index.cfm">A to Z Index</a></li>
 <li><a href="/banner">Banner</a></li>
 <li><a href="/cs-ecu/email_phone.cfm">Email/Phone</a></li>
 <li><a href="http://onestop.ecu.edu">OneStop</a></li>
 <li><a href="/cs-ecu/calendar.cfm">Calendar</a></li>
 <li><a href="/admin/accessibility/">Accessibility</a></li>
</ul>

The next step is to hide the links when the page loads. What we want to hide is the list element that starts with <ul id=”hideableContent”> and ends with </ul>. The id that I have given this list is important, as that will let us change this list but not others on the page that we don’t want to hide.

Selecting

So to hide this, we will use jQuery. To explain simply what jQuery does: it selects (or finds) an element or elements and then usually performs some tasks on what is selected. The code follows this pattern:

$("[what you want to select]").[what you want to do to what is selected];

We want to select the ul with the id hideableContent, so the specific code is this:

$("#hideableContent").toggle();

The string “#hideableContent” tells the selector what to look for and is made up of two parts: the pound sign, and hideableContent.

The #hideableContent select the element with an id of hideableContent. This is case sensitive, so make sure you match the id exactly.  Also, make sure that you use an id only once per page.  If you use the same id value more than once unpredictable things will happen.  The pound sign tells the selector that the next word is an id. The toggle() function hides what is visible and shows what is hidden. Since the content is visible when the page loads, this code will hide it.

You can also use a dot and the class name to select everything that has a specific class (e.g. $(‘.collapsible) would select everything that has a class of collapsible).

You can also select html tags by using just the tag with no dot or pound sign (e.g. $(‘ul’) would select every unordered list in the document).

You can select tags that are within other tags by putting them together with a space (e.g. $(‘ul li’) would select all the list items within all the unordered lists on a page).

And finally (actually this is a far from comprehensive list, but it is all I’m going to cover today) you can limit the selection to tags that have a class or id (e.g. $(‘ul.collapsible’) would select all unordered lists that have a class of collapsible. These are just a small part of the selectors. Can read about all the other options at the jQuery Documentation site.

The ready() Function

To get our code to work, the page needs to execute it. This is done by using the ready() function. It looks like this:

$(document).ready ( function () {
     [Code we want to execute goes here]
});

This is a function that is run automatically when the page is “ready”, i.e. when the DOM (Document Object Model) hierarchy has been fully constructed. So, to hide the list on page load, first you would put a JavaScript Include element on your page. Then you have two options. You could put the JavaScript code in the Script Input box, like this:

Or, you can save the code in a separate file, upload it via the tools page, and then include the location of the file, as here, where I have saved the code in file collapse-version1.js and uploaded it via my tools page. This seems the better option to me, because to update the page, all I have to do is make the changes to my JavaScript file and upload it, overwriting the previous version.

When the page reloads, you can see that the list is now hidden.

Activating the Toggle

The last step is to make the “Click Here to Toggle Links” active. I’m using a text hyperlink, but you can use anything you want, for example a button or an image. It just has to be selectable.

So first we will make that text a link, but instead of linking to a page, we set the link to be “#”. So that part of the HTML code will now look like this:

<p><a href="#">Click Here to Toggle Links</a></p>

Next, we want to add an id to the link, so that we can select it when it is clicked on. The Rich Text Editor in CommonSpot will not let you do this without switching to HTML view, so click on the button. It will show this:

Change the <a href=”#”> to <a href=”#” id=”toggleLink”>, then click the HTML button again and the Finish button.
The only thing left to do is write the jQuery code that will actually do the toggle. To do this, first you select the link, like this:

$("#toggleLink")

and add the click() function and the start of the code for the click function:

$('#toggleLink').click( function() {
     [toggling code will go here]
});

All this code does is tell jQuery to select the link and then do something when it is clicked on.
The code that will actually toggle the list is the same as we did when the document is ready:

$('#hideableContent').toggle();

So the whole JavaScript code will be:

$(document).ready( function() {
     $('#hideableContent').toggle();
     $('#toggleLink').click( function() {
          $('#hideableContent').toggle();
     });
});

And that is it. Your page should now work like this one.

As I said, this just a tiny example of what you can do. The jQuery documents cover it all. If you have any questions, feel free to ask and I will do my best to find an answer.

One thought on “Making Collapsible Content with jQuery

  1. Pingback: Tech Tips » New CommonSpot Tutorial: Making Collapsible Content with jQuery

Leave a Reply