jQuery child of parent class change?

Question

I'm using FontAwesome, and have an icon within my accordion. So, I have a plus icon, and a minus icon. When the class becomes an 'active-header', then I want it to change the icon of that h2 only. I'm just not really sure how to do it, here's my fiddle & code.

Check my Fiddle!

$('.accordion-header').toggleClass('inactive-header');

var contentwidth = $('.accordion-header').width();
$('.accordion-content').css({'width' : contentwidth });


$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
$('.accordion-content').first().slideDown().toggleClass('open-content');


$('.accordion-header').click(function () {
    if($(this).is('.inactive-header')) {
        $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
        $(this).toggleClass('active-header').toggleClass('inactive-header');
        $(this).next().slideToggle().toggleClass('open-content');
    }
    else {
        $(this).toggleClass('active-header').toggleClass('inactive-header');
        $(this).next().slideToggle().toggleClass('open-content');
        $(this)
    }
});

return false;

I do think that it would be done with .parent & .child, but I'm not really sure on how to go about it.

---Edit---

The I code for the minus icon is:

<i class="fa fa-minus"></i>

Answer 1

Try:

JS:

$('.accordion-header').toggleClass('inactive-header');  
var contentwidth = $('.accordion-header').width();
$('.accordion-content').css({'width' : contentwidth }); 
$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
$('.accordion-header').first().find('.fa').toggleClass('fa-plus fa-minus');
$('.accordion-content').first().slideDown().toggleClass('open-content');    
$('.accordion-header').click(function () {
if($(this).is('.inactive-header')) {
    $('.active-header').find('.fa').toggleClass('fa-plus fa-minus');
    $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
        $(this).toggleClass('active-header').toggleClass('inactive-header');
        $(this).find('.fa').toggleClass('fa-plus fa-minus');
        $(this).next().slideToggle().toggleClass('open-content');
    }
    else {
        $(this).toggleClass('active-header').toggleClass('inactive-header');
        $(this).find('.fa').toggleClass('fa-plus fa-minus');
        $(this).next().slideToggle().toggleClass('open-content');
        $(this)
    }
});

return false;

Fiddle here.

Answer 2

Try

$('.accordion-header').toggleClass('inactive-header');

var contentwidth = $('.accordion-header').width();
$('.accordion-content').css({
    'width': contentwidth
});


$('.accordion-header').click(function () {
    if ($(this).is('.inactive-header')) {
        $('.active-header').toggleClass('active-header inactive-header').toggleClass('fa-plus fa-minus').next().slideToggle().toggleClass('open-content');
        $(this).toggleClass('active-header').toggleClass('inactive-header');
        $(this).next().slideToggle().toggleClass('open-content');
        $(this).find('i').toggleClass('fa-plus fa-minus');
    } else {
        $(this).toggleClass('active-header inactive-header');
        $(this).next().slideToggle().toggleClass('open-content');
        $(this).find('i').toggleClass('fa-plus fa-minus');
    }
}).first().click();

Demo: Fiddle