jQuery selector, .hide() UL and LI elements <p>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'.</p> <p>The problem is when the user clicks an <code>&lt;li&gt;</code> 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 <code>&lt;ul&gt;</code> element it will not be affected by the .hide();</p> <p>What I really want is that if a <code>&lt;ul&gt;</code> or any of its <code>&lt;li&gt;</code> elements have the id of 'catSel' that that <code>&lt;ul&gt;</code> will not be affected by the .hide();</p> <p>Here is the code and a sample link, you can see how the <code>&lt;ul&gt;</code> is not expanded but one of its <code>&lt;li&gt;</code> children has an id of 'catSel'</p> <p>EDIT: Sorry for the bad explanation, I still can't explain it very well but I want it so that if a <code>&lt;ul&gt;</code> or one of its child <code>&lt;li&gt;</code> elements has an <code>id="catSel"</code> that it will not be affected by <code>$('ul.catList:not(.level-0) li:has(ul):not(#catSel)').children('ul').hide();</code>.</p> <p>UPDATE:</p> <p>I added this code:</p> <pre><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'); </code></pre> <p>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.</p> <p>jsFiddle: <a href="http://jsfiddle.net/nNR9W/" rel="nofollow">http://jsfiddle.net/nNR9W/</a></p> <p>HTML:</p> <pre><code>&lt;li&gt; &lt;a href="foo"&gt;Catalog Section 4&lt;/a&gt; &lt;ul class="level-1 catList"&gt;&lt;li class="plusimageapply"&gt; &lt;a href="foo"&gt;Quick Disconnects&lt;/a&gt; &lt;ul class="level-2 catList" style="display: none; "&gt; &lt;li id="catSel" class="selectedimage"&gt; &lt;a href="foo"&gt;Foster&lt;/a&gt;&lt;/li&gt; &lt;li class="selectedimage"&gt; &lt;a href="foo"&gt;General Pump&lt;/a&gt; &lt;/li&gt; &lt;li class="selectedimage"&gt; &lt;a href="foo"&gt;Hansen&lt;/a&gt; &lt;/li&gt; &lt;li class="selectedimage"&gt; &lt;a href="foo"&gt;Parker&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="selectedimage"&gt; &lt;a href="foo"&gt;Quick Disconnects O-Rings&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p></li> ​ jQuery:</p> <pre><code>$(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'); } } }); }); });​ </code></pre>