CODEWITHSUNDEEP
jqueryjquery-ui-accordion
BriceTRockindale
BriceTRockindale

Reputation: 319

jQuery accordion header arrows

I have an accordion that is not behaving the way I want it to. I want to have a list of sections that has a nice red arrow pointing to the right. Then when I open it, I want the arrow to point down. Problem is this is that the down arrow is not showing up. Here is the fiddle: fiddle. Thoughts?

<div class="accordion">   
    <h3 class="arrow-right">First Step<hr/></h3>
    <div class="accordion-body">Content 1</div>

    <h3 class="arrow-right">Second Step<hr/></h3>
    <div class="accordion-body">Content 2</div>

    <h3 class="arrow-right">Third Step<hr/></h3>
    <div class="accordion-body">Content 3</div>
</div>

    jQuery(function ($) {

        $(".accordion").accordion({
            clearstyle: true,
            collapsible: true,
            active: 0
        }); 
        $(".accordion h3").click(function () {  
           //here want all non selected section to have a right arrow
    $(this).siblings("h3").removeClass("arrow-down");
    $(this).siblings("h3").addClass("arrow-right");   

    //here I want the selected section to have a down arrow
    $(this).children("h3").removeClass("arrow-right");
    $(this).children("h3").addClass("arrow-down");             });
    });

Upvotes: 0

Views: 1141

Answers (1)

Stevethemacguy
Stevethemacguy

Reputation: 756

Your last two lines are attempting to find children of the 'h3' being clicked, but it has no children. The 'h3' is already selected, so these two lines should just use "$(this)":

//here I want the selected section to have a down arrow
$(this).removeClass("arrow-right");
$(this).addClass("arrow-down");

Unfortunately, fixing this still won't give the effect you're looking for. Here's the quickest solution I thought of without changing your HTML structure. Note that it caches a reference to $(this) to improve performance (by removing redundant selectors). Let me know if you have any questions.

jQuery(function ($) {

    $(".accordion").accordion({
        clearstyle: true,
        collapsible: true,
        active: 0
    }); 

    $("h3").click(function() {  
        var selected = $(this);
        $(".accordion").find("h3").not(selected).removeClass("arrow-down").addClass("arrow-right");
        selected.toggleClass("arrow-right");
        selected.toggleClass("arrow-down");

    });    
});

Upvotes: 1

Related Questions