Daniels Jirgensons Daniels Jirgensons - 1 year ago 55
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 Source

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