ExpressionEngine categories - Need help adding dynamic class using if statements

Question

This is a simple problem but i've been pulling my hair out the past two hours trying to figure a way to get it to work.

Basically I have a jquery navigation set-up. I have 4 tabs, each tab is a parent category with child categories. When a tab is clicked, a drop down with the children appears. I have it all set-up but can't figure a way to add a class of "active" to the child categories based on whatever category is selected.

Unless i've blanked and this is sitting right in front of my eyes, I can't find an obvious way of doing this. I think the problem is, I haven't hard coded the navigation links as the client want's to manage these themselves, so i've dynamically displayed the categories, adding an 'if' statement to this is adding the if statement to all of the categories so the class is being added to all of the child tabs.

Here is my code:

<div id="tabbed-cats">
    {exp:channel:entries channel="product"}
    <ul class="tabs">
        <li class="nav-one"><a href="#bathroom" {categories}{if category_id == "1"}class="current"{/if}{/categories}>Bathroom</a></li>
        <li class="nav-two"><a href="#homecare" {categories}{if category_id == "2"}class="current"{/if}{/categories}>Homecare</a></li>
        <li class="nav-three"><a href="#transfer-equipment" {categories}{if category_id == "3"}class="current"{/if}{/categories}>Transfer Equipment</a></li>
        <li class="nav-four last"><a href="#mobility" {categories}{if category_id == "4"}class="current"{/if}{/categories}>Mobility</a></li>
    </ul>
    {/exp:channel:entries}

    <div class="list-wrap">
        {exp:channel:entries channel="product"}
        <ul id="bathroom" {categories}{if category_id == "2" OR category_id == "3" OR category_id == "4"}class="hide"{/if}{/categories}>
            {exp:child_categories channel="product" parent="1" category_group="1" show_empty="yes"}
            {child_category_start}
            <li><a {categories}{if category_id == "5"}class="active"{/if}{/categories} href="{path='products/category/{child_category_url_title}'}">{child_category_name}</a></li>
            {child_category_end}
            {/exp:child_categories}
        </ul>
        {/exp:channel:entries}

        {exp:channel:entries channel="product"}
        <ul id="homecare" {categories}{if category_id == "1" OR category_id == "3" OR category_id == "4"}class="hide"{/if}{/categories}>
            {exp:child_categories channel="product" parent="2" category_group="1" show_empty="yes"}
            {child_category_start}
            <li><a {categories}{if category_id == "6"}class="active"{/if}{/categories} href="{path='products/category/{child_category_url_title}'}">{child_category_name}</a></li>
            {child_category_end}    
            {/exp:child_categories}
        </ul>
        {/exp:channel:entries}

        {exp:channel:entries channel="product"}
        <ul id="transfer-equipment" {categories}{if category_id == "1" OR category_id == "2" OR category_id == "4"}class="hide"{/if}{/categories}>
            {exp:child_categories channel="product" parent="3" category_group="1" show_empty="yes"}
            {child_category_start}
            <li><a {categories}{if category_id == "8"}class="active"{/if}{/categories} href="{path='products/category/{child_category_url_title}'}">{child_category_name}</a></li>
            {child_category_end}    
            {/exp:child_categories}
        </ul>
        {/exp:channel:entries}

        {exp:channel:entries channel="product"}
        <ul id="mobility" {categories}{if category_id == "1" OR category_id == "2" OR category_id == "3"}class="hide"{/if}{/categories}>
            {exp:child_categories channel="product" parent="4" category_group="1" show_empty="yes"}
            {child_category_start}
            <li><a {categories}{if category_id == "7"}class="active"{/if}{/categories} href="{path='products/category/{child_category_url_title}'}">{child_category_name}</a></li>
            {child_category_end}    
            {/exp:child_categories}
        </ul>
        {/exp:channel:entries}
    </div><!-- END LIST WRAP -->
    <br style="clear:both;" />

Just to clarify - you want an "active" class to be added to the list item in the dropdown which links to the current category (i.e., the category represented by the current URL)? — Derek Hogue, Apr 17 '12 at 14:14
@DerekHogue Hi Derek, yes thats right, I need to add an active class to it. — kala233, Apr 19 '12 at 17:07

score 1 · Answer 1 · answered Apr 20 '12 at 16:15

1

In EE 2.4 you can now use {if active}class="foobar"{/if} try that and see.

answered Apr 20 '12 at 16:15

CreateSean

1,286
1
21
42

score 0 · Answer 2 · answered Apr 20 '12 at 03:42

0

You want to be computing against the category URL title in your URL. I'm not totally familiar with the Child Categories plugin you're using, but it appears as though this should work within your {exp:child_categories} loop:

{if child_category_url_tile == segment_3} class="active"{/if}

I don't totally understand what you're doing in your code, as you're calling the same channel entries loop 5 times, then filtering what you display based on conditional category statements each time. If this is actually your full code, you should seriously consider rethinking and refactoring. Your overhead here is insane!

answered Apr 20 '12 at 03:42

Derek Hogue

4,589
1
15
27

Unfortunately this was the only way to do it integrating it with my jquery script... thanks for this i'll give it a try. – kala233 Apr 20 '12 at 10:45
I've amended my code also between posting this, this is just for testing purposes anyway, i always go through the code afterwards and clean it up. – kala233 Apr 20 '12 at 10:51

ExpressionEngine categories - Need help adding dynamic class using if statements

2 Answers2