Daniels Jirgensons Daniels Jirgensons - 26 days ago 9
CSS Question

Multiple Show/Hide with changing text

I have a multiple show/hide divs with changing texts from Expand to Reduce. If there is more than one dropdown, text doesn't changing. There is my JSFiddle, you can test it, by delete one section. Any solutions for that? :)

This is my JQuery

$(".section .section-title").click(function(){
$(this).closest(".section").find('.dropdown-content').slideToggle(100);
$(this).find('.expand').toggleClass('expanded');

if ($.trim($(".expand").text()) === 'Expand') {
$(".expand").text('Reduce');
} else {
$(".expand").text('Expand');
}

});

Answer

Use this:

$(".section .section-title").click(function(){
    $(this).closest(".section").find('.dropdown-content').slideToggle(100);
    $(this).find('.expand').toggleClass('expanded');

    if ($.trim($(this).find(".expand").text()) === 'Expand') {
        $(this).find(".expand").text('Reduce');
    } else {
        $(this).find(".expand").text('Expand');        
    }
});

Here is jsfiddle