I am trying to have a category index of expandable/colapsable elements, and when the

Question

0

Asked: June 2, 20262026-06-02T04:02:40+00:00 2026-06-02T04:02:40+00:00

I am trying to have a category index of expandable/colapsable elements, and when the

0

I am trying to have a category index of expandable/colapsable elements, and when the user clicks a category it is rebuilt with an id of ‘catSel’.

The problem is when the user clicks an <li> and the ‘catSel’ id is added to it, it will still be affected by the .hide(); and I don’t want it to be. I should note that I have it working if the user clicks a <ul> element it will not be affected by the .hide();

What I really want is that if a <ul> or any of its <li> elements have the id of ‘catSel’ that that <ul> will not be affected by the .hide();

Here is the code and a sample link, you can see how the <ul> is not expanded but one of its <li> children has an id of ‘catSel’

EDIT:
Sorry for the bad explanation, I still can’t explain it very well but I want it so that if a <ul> or one of its child <li> elements has an id="catSel" that it will not be affected by $('ul.catList:not(.level-0) li:has(ul):not(#catSel)').children('ul').hide();.

UPDATE:

I added this code:

// If an elementwith its id="catSel" show all of its parents and also update the parents class

    $('#catSel').parents().show();
    $('#catSel').parents().removeClass('plusimageapply');
    $('#catSel').parents().addClass('minusimageapply');

and now it seems to be working how I wanted it to. Thank you everyone who tried to make sense of my question and help me out.

jsFiddle: http://jsfiddle.net/nNR9W/

HTML:

<li>
<a href="foo">Catalog Section 4</a>
<ul class="level-1 catList"><li class="plusimageapply">
    <a href="foo">Quick Disconnects</a>
    <ul class="level-2 catList" style="display: none; ">
        <li id="catSel" class="selectedimage">
            <a href="foo">Foster</a></li>
        <li class="selectedimage">
            <a href="foo">General Pump</a>
        </li>
        <li class="selectedimage">
            <a href="foo">Hansen</a>
        </li>
        <li class="selectedimage">
            <a href="foo">Parker</a>
        </li>
    </ul>
    </li>
    <li class="selectedimage">
        <a href="foo">Quick Disconnects O-Rings</a>
    </li>
</ul>

jQuery:

$(document).ready(function() {
// Set expandable UL elements class to 'plusimageapply'
$('ul.catList li:has(ul):not(#catSel)').addClass('plusimageapply');
// Set unexpandable LI elements class to 'selectedimage'
$('ul.catList li:not(:has(ul))').addClass('selectedimage');
// Set expanded UL elements class to 'minusimageapply'
$('ul.catList li#catSel:has(ul)').addClass('minusimageapply');

// Hide expandable UL elements that are not currently selected with ID 'catSel'
$('ul.catList:not(.level-0) li:has(ul):not(#catSel)').children('ul').hide();

// **** FIXED MY PROBLEM ****
// If an elementwith its id="catSel" show all of its parents and also update the parents class
$('#catSel').parents().show();
$('#catSel').parents().removeClass('plusimageapply');
$('#catSel').parents().addClass('minusimageapply');
// **************************

// Function for expand/collapse elements
$('ul.catList:not(.level-0) li:has(ul)').each(function(column) {
    $(this).click(function(event) {
        if (this == event.target) {
            if ($(this).is('.plusimageapply')) {
                $(this).children('ul').show();
                $(this).removeClass('plusimageapply');
                $(this).addClass('minusimageapply');
            }
            else {
                $(this).children('ul').hide();
                $(this).removeClass('minusimageapply');
                $(this).addClass('plusimageapply');
            }
        }
    });
});
});