jQuery accordion in a nested html triggering doesn't work

Question

Basically i'm trying to find the next 'sacc-trigger' but 'next()' doesn't work as it's nested in to a list; i've tried many variations like parent().next() but I can't get it to work.

Maybe if someone can point me a direction; would be nice.

I have the following HTML code:

<ul class="taxo2">
    <li class="">
        <div class="sacc-trigger active" style="width: 0px;">
            Photos
        </div>
        <div class="sacc-container" style="display: block; width: 0px;">
        </div>
    </li>
    <li class="">
        <div class="sacc-trigger" style="width: 0px;">
            Statements
        </div>
        <div class="sacc-container" style="display: none; width: 0px;">
        </div>
    </li>
    <li class="">
        <div class="sacc-trigger" style="width: 0px;">
            Powerpoint Presentations
        </div>
        <div class="sacc-container" style="display: none; width: 0px;">
        </div>
    </li>
    <li class="">
        <div class="sacc-trigger" style="width: 0px;">
            Videos/Interviews
        </div>
        <div class="sacc-container" style="display: none; width: 0px;">
        </div>
    </li>
</ul>

And trying to make it work with jQuery Accordion; have the following source that i'm trying to adapt :

(function() {

            var $container = $('.sacc-container'), $trigger = $('.sacc-trigger');

            $container.hide();
            $trigger.first().addClass('active').next().show();

            var fullWidth = $container.outerWidth(true);
            $trigger.css('width', fullWidth);
            $container.css('width', fullWidth);

            $trigger.on('click', function(e) {

                if ($(this).next().is(':hidden')) {
                    alert('here2');
                    $trigger.removeClass('active').next().slideUp(300);
                    $(this).toggleClass('active').next().slideDown(300);
                }
                e.preventDefault();
            });

            // Resize
            $(window).on('resize', function() {
                fullWidth = $container.outerWidth(true)
                $trigger.css('width', $trigger.parent().width());
                $container.css('width', $container.parent().width());
            });

        })();

Answer 1

You want to use jQuery's parent() to get the parent li, and then use .next to find the following li. From here you can use .find() to get the trigger:

if ($(this).parent("li").next().find(".sacc-trigger").is(':hidden')) {
    $trigger.removeClass('active').next().slideUp(300);
    $(this).toggleClass('active').next().slideDown(300);
}

The reason behind this is because .sacc-trigger has no direct siblings, so you need to first find the closest parent, and then go down one level using next() as explained above.