Question

Created an Accordion side bar using jQuery 1.2.6. I cannot access newer version of jQuery. The CMS is locked. I think there is some kind of bug that’s not showing the first li element. I try to recreate the senario in jsfiddle but it’s having some issue as well. The site can be accessed at http://www.cjp.org/our-work.aspx. The issue I am having is with the left navigation. For example Caring & Social Justice caring and social justice has three link but it only show two links? Any help is appreciated.

Thanks

Following is the whole script but the “Sidebar Accordion Nav” is the one that controls the left nav. The script can be accessed at http://www.cjp.org/local_includes/top-nav.js.

$(document).ready(function() {

// Dropdown Navigation on hover
$("#linkListSub1 li").hover(function() {

    $(this).find("ul").slideDown(150).show();
}, function() {
    $(this).find("ul").slideUp(200);
});


//Adding "Search CJP" in input box
$('.search').attr('value', 'Search CJP');


// Homepage search bar clear on focus
$('.search').each(function() {

   var default_value = this.value;

   $(this).focus(function(){
           if(this.value == default_value) {
                   this.value = '';
           }
   });

   $(this).blur(function(){
           if(this.value == '') {
                   this.value = default_value;
           }
    });
});

// Homepage tabs for Events and News
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();

$("ul.tabs li").click(function() {

    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();

    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn();
    return false

});

$(".paging li").css({ opacity : 0.8 });

  // Sidebar Accordion Nav
 $(function() {
// Sidebar Accordion Nav
$("#linkListSub3 li li").hide();

$("#linkListSub3 li").hover(function() {

    if ($("li", this).is(":hidden")) {

        $("#linkListSub3 li li").next().slideUp();
        $("li", this).next().slideDown();
    }

},function(){

});


//Hide And show Toggle Bar animation
//Hide (Collapse) the toggle containers on load
$(".toggleContainer").hide();

//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$("a.trigger").click(function() {
   var $this = $(this),
    $container = $('#ctl00_ContentPlaceHolder1_supportingElements'); // Takes care of the issue where the outer container doesn't expand with the box.
if($this.hasClass('active')) {
    $container.height($container.data('height'));
}
else {
    $container.data('height', $container.height()).css('height', 'auto');
}
$(this).toggleClass("active").next().slideToggle("slow");
$(this).text($(this).text() == 'Collapse' ? 'Expand' : 'Collapse'); // Toggles the text from expand to Collapse


return false; //Prevent the browser jump to the link anchor/Prevent the browser jump to the link anchor
});

});


});

Answer 1

It is not a bug in jQuery, it is a bug in the JS. Here is a much simpler solution:

$(function() {    
    $("#linkListSub3 > ul > li").hover(function() {
        $("#linkListSub3 ul ul").slideUp();
        $(this).find("ul").slideDown();
    }, function() {

    });
});

Specifically, this should replace the section that starts with // sidebar accordion nav