How to add/remove class of child element on click of var ID?

debugcn Published at Dev

Scott Blair

I have an accordion I'm using for a FAQ page. When a particular question is clicked, the section arrow needs to change from right to down. All others need to default back to right. What am I missing to get this to work?

            <dd id="1" class="accordion-navigation">
                <i class="fa fa-chevron-right"></i> <a class="faq-toggle" href="#faq1">How can I plan my Wedding at Mayan Resorts?</a>
                <div id="faq1" class="content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
            </dd>

            <dd id="2" class="accordion-navigation">
                <i class="fa fa-chevron-right"></i> <a class="faq-toggle" href="#faq2">Do you offer a service to plan the event start to finish?</a>
                <div id="faq2" class="content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
            </dd>



$('.accordion-navigation').click(function() {
        var id = $(this).attr('id');

                if ($(id).hasClass('active')) {
                        $(id).find('i').removeClass('fa-chevron-right');
                        $(id).find('i').addClass('fa-chevron-down');
                }
                else if (!($('.accordion-navigation').hasClass('active'))) {
                        $('.accordion-navigation').find('i').addClass('fa-chevron-right');
                        $('.accordion-navigation').find('i').removeClass('fa-chevron-down');
                }
});

Jaka Dirnbek

Do not know exactly why it doesn't work but I made up my own solution - CSS and JS combo

http://jsfiddle.net/95rzLepo/

$(document).on('click', '.faq-toggle' ,function (e) {
    if($(this).prev().hasClass('fa-chevron-down')) {
        $(this).prev().removeClass('fa-chevron-down');
        $(this).prev().addClass('fa-chevron-right');
    } else {
        $(this).parents('body').find('.fa.fa-chevron-down').each(function (e) {
            $(this).removeClass('fa-chevron-down');
            $(this).addClass('fa-chevron-right');
        });

        $(this).prev().removeClass('fa-chevron-right');
        $(this).prev().addClass('fa-chevron-down');
    }
});

Collected from the Internet

Please contact [email protected] to delete if infringement.