jQuery Accordion Menu Expansion and Optimization

Vote count:

0

I am new to programming with jQuery and am having trouble with a custom jQuery accordion. My attempts at expanding the accordion for the current link have been unsuccessful and I am at a loss as to how to get it working.

Main question: How can I get Section [2] to work (expanding and highlighting the currently active links)?

I believe this problem has to do with how I am going about selecting the elements. The three lines of code I have in that section is currently my best shot. It highlights and expands all of the links and highlights all of the accordion headers (h2). This is of course not what I'm going for at all. My numerous online searches have been fruitless as the accordions seem to either be structured differently or I am severely misunderstanding some key concepts since none of the answers seem to fit in this case.

Secondary question: How can I optimize Section 3? The code itself is simple but I repeated it several times and ended up with the confusing mess in section [3] below.

Here is my current jQuery code, adapted from this tutorial:

jQuery(document).ready(function () {

// [1] initialize
var parentDivs = jQuery('#nestedAccordion div'),
    childDivs = jQuery('#nestedAccordion h3').siblings('div'),
    lowDivs = jQuery('#nestedAccordion h4').siblings('div'),
    img1 = '...',
    img2 = '...';

// [2] expand current link
jQuery('#nestedAccordion a').addClass("a-active");
jQuery('#nestedAccordion a').parents('div').slideDown();
jQuery('#nestedAccordion a').parents('div').find('h2').addClass("open");

// [3] accordion movement (repetitious...)
jQuery('#nestedAccordion h2').click(function () {
    parentDivs.slideUp();
    jQuery('#nestedAccordion h2').removeClass("open");
        jQuery('#nestedAccordion h3').removeClass("open");
        jQuery('#nestedAccordion h4').removeClass("open");
    jQuery('#nestedAccordion h2').find('img').attr('src', img2);
    jQuery('#nestedAccordion h3').find('img').attr('src', img2);
    if (jQuery(this).next().is(':hidden')) {
        jQuery(this).next().slideDown();
        jQuery(this).find('img').attr('src', img1);
        jQuery(this).addClass("open");
    } else {
        jQuery(this).next().slideUp();
        jQuery(this).find('img').attr('src', img2);
        jQuery(this).removeClass("open");
    }
});
jQuery('#nestedAccordion h3').click(function () {
    childDivs.slideUp();
    jQuery('#nestedAccordion h3').removeClass("open");
        jQuery('#nestedAccordion h4').removeClass("open");
    jQuery('#nestedAccordion h3').find('img').attr('src', img2);
    if (jQuery(this).next().is(':hidden')) {
        jQuery(this).next().slideDown();
        jQuery(this).find('img').attr('src', img1);
        jQuery(this).addClass("open");
    } else {
        jQuery(this).next().slideUp();
        jQuery(this).find('img').attr('src', img2);
        jQuery(this).removeClass("open");
    }
});
jQuery('#nestedAccordion h4').click(function () {
    lowDivs.slideUp();
    jQuery('#nestedAccordion h4').removeClass("open");
    jQuery('#nestedAccordion h4').find('img').attr('src', img2);
    if (jQuery(this).next().is(':hidden')) {
        jQuery(this).next().slideDown();
        jQuery(this).find('img').attr('src', img1);
        jQuery(this).addClass("open");
    } else {
        jQuery(this).next().slideUp();
        jQuery(this).find('img').attr('src', img2);
        jQuery(this).removeClass("open");
    }
});

});

And here is the Accordion HTML structure. Each level has a div so that the jQuery slideUp and slideDown functions will work - the div expands and collapses.

<div id="nestedAccordion">
<h2>Top-level Heading</h2>
    <div>
    <h3>Mid-level Heading</h3>
        <div>
        <h4>Bottom-level Heading</h4>
            <div>
            <ol>
                <li>Link</li>
                </ol>
            </div>
        </div>
     </div>
 </div>

asked 1 min ago

Turgon

1