Question

I’m using the jquery ‘contains’ selector to determine what to do when a div is clicked… I want to expand or collapse a section of faceted navigation.

However, It appears the ‘contains’ selector might only be looking at the contents of the div when the DOM was initially loaded and is not seeing the newer contents that were swapped out by an earlier jquery call.

I have a mostly-functional version working here… just need a little push to get the top section collapsing properly : http://jsfiddle.net/brianadkins/nAabP/

---

HTML:

<div class="facetname" id="facetname-fbr">
        Brand
    </div>
    <ul class="facetvalues" id="facetvalues-fbr">
        <li>facet1val1</li>
        <li>facet1val2</li>
        <li>facet1val3</li>
        <li>facet1val4</li>
        <li>facet1val5</li>
        <li>facet1val6</li>
        <li>facet1val7</li>
        <li>facet1val8</li>
        <li>facet1val9</li>
        <li>facet1va10</li>
        <li>facet1val11</li>
        <li>facet1val12</li>
        <li>facet1val13</li>
    </ul>
    <div class="slidermenu" id="slidermenu-fbr">
    </div>

---

Javascript:

var ListLengthHidingTrigger = 7;
var InitialListItems = 4;

if ($("#facetvalues-fbr li").length > ListLengthHidingTrigger) {
    $("#facetvalues-fbr li:gt("+(InitialListItems-1)+")").hide(); // hide all but first N sections
    $('#slidermenu-fbr').html('Show All Brands');
}
$('div#slidermenu-fbr:contains("All")').click(function() {
                $('#facetvalues-fbr li').show(); // hide all but first 2 sections
                $('#slidermenu-fbr').html('Show Fewer Brands');            
});
$('div#slidermenu-fbr:contains("Fewer")').click(function() {
                $("#facetvalues-fbr li:gt("+(InitialListItems-1)+")").hide(); // hide all but first N sections
                $('#slidermenu-fbr').html('Show More Brands');            
});
$('#facetname-fbr').click(function() {
    $('#facetvalues-fbr').slideToggle(0);
});

Answer 1

try using jQuery live()

http://jsfiddle.net/maniator/nAabP/8/

code:

var ListLengthHidingTrigger = 7;
var InitialListItems = 4;

if ($("#facetvalues-fbr li").length > ListLengthHidingTrigger) {
    $("#facetvalues-fbr li:gt("+(InitialListItems-1)+")").hide(); // hide all but first N sections
    $('#slidermenu-fbr').html('Show All Brands');
}
$('div#slidermenu-fbr:contains("All")').live('click',function() {
                $('#facetvalues-fbr li').show(); // hide all but first 2 sections
                $('#slidermenu-fbr').html('Show Fewer Brands');            
});
$('div#slidermenu-fbr:contains("Fewer")').live('click',function() {
                $("#facetvalues-fbr li:gt("+(InitialListItems-1)+")").hide(); // hide all but first N sections
                $('#slidermenu-fbr').html('Show All Brands');            
});
$('#facetname-fbr').click(function() {
    $('#facetvalues-fbr').slideToggle(0);
});