3

I'm struggling with this question again: Classes on list items with GWCode CategoriesClasses on list items with GWCode Categories

I'm trying to generate an unordered list with custom classes on the list items (for expand/collapse hooks). The problem I'm having is when it goes from depth3 to depth1.

depth1 item
-- depth2 item
---- depth3 item
-- depth2 item (works fine!)
---- depth3 item
depth1 item (depth3_end can't just trigger one level of closing UL; how to back up without knowing next level?)

Has anyone worked this out? I'd just use nested output and avoid applying this logic to linear, but there are no "has-children" or "here" classes if it matches the current URL.

Thanks!

Mark

UPDATE This is where I started. I've been playing with depthX_start and depthX_end and am still seeing this spot where depth3_ends and it doesn't back up to depth1. So my next depth1 category is at level 2 in the UL.

        <ul>
        {exp:gwcode_categories group_id="3" style="linear"}
            <li class="{if has_children}has-children{/if} {if cat_url_title=='{freebie_2}'}here{/if}"><a href="/{segment_1}/{cat_url_title}">{cat_name}</a>{if has_children}
                <ul>{/if}
                {if depth2_end OR depth3_end OR depth4_end}
            </li></ul>{/if}
            {if !has_children}</li>{/if}
        {/exp:gwcode_categories}
        </ul>

You'll see the classes I need to add there. We're using JavaSript to enable expand/collpase on a given item, and to trigger the left nav to open where .here is.

  • Mark, can you post the current code? Also, do you want the entire list to expand/collapse from each depth1 parent or expand the parent of the current page? – Siebird Nov 6 '13 at 15:15
  • If that code isn't quite right, I'm not so worried about the per-item opening/closing tag logic as I am closing off a gap of 2+ levels. I.e., depth3 -> depth1. That's what's tripping me up. The ultimate goal is just to get those two classes on the list items. – Mark J. Reeves Nov 6 '13 at 15:26
4

So it seems the logic works when the nesting drops back 1 parent, but breaks when the parents drop back two levels or more. After testing this on my end, it looks the depthX_end variables are all fired at the same time in the loop–so you will need a condition to test when the list drops back two parents or more.

<ul>
{exp:gwcode_categories group_id="3" style="linear"}
   <li class="{if has_children}has-children{/if} {if cat_url_title=='{freebie_2}'}here{/if}"><a href="/{segment_1}/{cat_url_title}">{cat_name} - {if depth1_end}1{/if}{if depth2_end}2{/if}{if depth3_end}3{/if} {if depth4_end}4{/if}</a>
   {if has_children}<ul>{/if}
   {if depth2_end OR depth3_end OR depth4_end}</li></ul>{/if}
   {if depth1_end AND depth2_end AND depth3_end}</li></ul>{/if}
   {if depth1_end AND depth2_end AND depth3_end AND depth4_end}</li></ul>{/if}
   {if !has_children}</li>{/if}
{/exp:gwcode_categories}
</ul>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.