Filterable Lists

This page will show you how to create a list of items that are filterable by menu categories. This will enable you to display different content depending on the menu category clicked (i.e. the list items are filtered by category). Note: this is relatively challenging to do, and is not recommended for users with little HTML experience. If you would like assistance using this feature, please send us an email at gucmshelp@georgetown.edu.

An extensive example of this capability can be found here. This feature has two components, the menu of categories at the top of the page that can be used to filter the results (in the above example, "All Faculty," "Ph.D. Mentors," M.S. Mentors," and "Faculty with Primary Appointments"), and the list of items that changes as different categories are selected ("Gerard Ahern:...," Tinatin I. Berlidze:...," etc.). The below steps are broken down into creating these two components, afterwhich we provide a generic example of a filterable list for your usage.


Part I: Creating the Menu

1. Click on the "Source" button at the top of the text editor for the page (this is button #29 in this diagram). The editing box will be switched to the source editor and display the HTML of the page content.

2. Copy and paste the following code into the source editor:

<div class="grouping">
    <ul class="menu">
        <li class="[CAT]"><b>[INSERT CATEGORY HERE]</b></li>
        <li class="[CAT]"><b>[INSERT CATEGORY HERE]</b>
            <p>[Description of category.]</p>
        </li>
        <li class="[CAT]"><b>[INSERT CATEGORY HERE]</b>
            <p>[Description of category.]</p>
        </li>
        <li class="[CAT]"><b>[INSERT CATEGORY HERE]</b>
            <p>[Description of category.]</p>
        </li>
    </ul>
***PAGE CONTENT GOES HERE***
</div>

3. The above code should be edited to reflect your desired categories and to make sure your content is included in the filtered list:

  • Replace [INSERT CATEGORY HERE] with the names of the desired categories (e.g. "Full-time faculty" or "Affiliated faculty").
  • Replace [CAT] with a very short tag for that category. This will be used to reference these categories when adding your content. Note: the category tags should NOT contain any spaces or punctuation. Acceptable examples are: "phd" or "NewFaculty", NOT "Ph.D." or "New Faculty".
  • Replace [Description of category] with a description of that category. If no descriptions are desired, this entire line should be deleted, from <p> to </p>, as shown for the first category of the example above.

If you want more (or less) than 4 categories, you can copy the code from <li class="[CAT]"> to </li> for one category and paste it after the last </li> and right before </ul> as many times as desired. To delete a category, make sure you delete all the code from <li class="[CAT]"> to </li>Note: If doing this makes the code look disorganized, click on the Source button twice to exit and re-enter the source editor and Drupal will automatically format the code for you.

Options:

  • A good suggestion for the menu is to include a category that encompasses all of your content (e.g. "All Faculty"). This will allow users to view the original list of all content even after clicking on other categories.
  • Upon page load, the first category in the menu is the category whose items are displayed.

Part II: Adding and Categorizing Content

Now, you need to add and categorize the list's content to match the menu categories you've created. Scroll to the first list item below the menu. Note: you should still be in the source editor. Copy and paste the following code into the source editor where the previous menu code says ***PAGE CONTENT GOES HERE***. The code below will set up one item for you, so you should paste it into the editor as many times as is necessary to get the number of items desired. Note: When pasting the code multiple times, make sure it is OUTSIDE the </div> tag of the previous item but INSIDE the </div> tag for the filtered list overall. A good way to check this is to make sure there are 2 </div> tags at the very end of the document - one for the last content item and one for the overall filtered list.

<h5 class="[CAT] [CAT] [CAT] item expand"><strong>[TITLE]</strong></h5>

    <div>
        <p>[CONTENT FOR THIS ITEM HERE]</p>
    </div>

Upon adding these content items, they should be edited to suit your needs:

  1. Replace [CAT] with the tags of the categories under which this item should be shown, so clicking on that category displays this item. The tags used here need to match the tags created in step 3 of editing the menu code above, and you may choose as many or as little of the categories as you see fit (we have three in the example but you can have 1, 2, 4, or more if desired). DO NOT delete the "item" category, as this is what makes the item part of the filterable list.
  2. Click on the Source button to return to the text editor. Now, you should see [TITLE] and [CONTENT FOR THIS ITEM HERE] in the text editor when looking at this menu item. Change these to reflect your content. Note: be careful not to backspace out of these lines, doing so has the potential to get rid of the divisions (div blocks) or heading formatting.
  3. To check your content, re-enter the source editor to see if the format of your content has remained the same - the category and <div></div> tags are still there - to ensure the filtered list works up properly when the page is published.

Options:

  • You can add as many category tags as is desired. To add category tags, simply list them after the last category tag, with only a space in between.
  • Though not required, the content above is expandable (hence, the "expand" included in the heading class). You can read more about expandable content here. If you do not want the items to be expandable, you should remove the text "expand" from the first line of the above code sample and also remove the <div> and </div> tags for each item.

Part III: An Example

Here is an example of a filterable list, along with the code that was used to create the list, for your reference. 

Example Item 1

This is the text of an example item.

Example Item 2

This is the text of an example item.

Example Item 3

This is the text of an example item.

 

The code below produces the above filterable list:

<div class="grouping">
    <ul class="menu">
        <li class="all"><b>All</b></li>
        <li class="cat1"><b>Category 1</b></li>
        <li class="cat2"><b>Category 2</b></li>
    </ul>

    <h5 class="all cat2 item expand">Example Item 1</h5>

    <div>
        <p>This is the text of an example item.</p>
    </div>

    <h5 class="all cat1 item expand">Example Item 2</h5>

    <div>
        <p>This is the text of an example item.</p>
    </div>

    <h5 class="all cat1 cat2 item expand">Example Item 3</h5>

    <div>
        <p>This is the text of an example item.</p>
    </div>

</div>