jQuery toggle opacity with same class

Question

I have 3 divs all with the same class. Within each div is a h3 and a hidden div with a class of 'content'.

If the h3 is clicked in any of these divs then the corresponding 'content' div is shown.

If any h3 is clicked and the 'content' div expands then the sibling 'example' divs should fade out to opacity 0.5

When all 'content' divs are closed then the 'example' divs should not be faded out.

I currently can't get the 'example' divs to not be faded when all the 'content' divs are closed.

CSS

.fade {opacity:0.5;}
.content {display:none;}

JS

$(function () {
    $(".example .titlename").click(function () {
    $(this).closest('.example').find('.content').slideToggle(500);
    $(this).closest('.example').toggleClass('active').siblings().not('.active').css({ opacity: 0.5 });
    $(this).closest('.example').not('.active').css({ opacity: 0.5 });
    $(this).closest('.example.active').css({ opacity: 1.0 });
    });

});

HTML

<div class="example">
    <h3 class="titlename">Test titles 1</h3>
    <div class="content">content1</div>
</div>

<div class="example">
    <h3 class="titlename">Test titles 2</h3>
    <div class="content">content2</div>
</div>

<div class="example">
    <h3 class="titlename">Test titles 3</h3>
    <div class="content">content3</div>    
</div>

JSFiddle is here with example code: http://jsfiddle.net/Lgf4s/

Any help gratefully accepted!

Answer 1

You need to check if all examples are closed in the complete function of the slideToggle

http://jsfiddle.net/Lgf4s/2/

$(this).closest('.example').find('.content').slideToggle(500, function() {
    // check if any example is active
    if(!$('.example').hasClass('active')) {
        $('.example').css('opacity', '1');
    }
});

I also cleaned it up a bit caching some jquery elements

Answer 2

here your solution... hope this helps..

$(function () {
    $(".example .titlename").click(function () {
        $(this).closest('.example').find('.content').slideToggle(500, function(){    
            if ($(".content:visible").size() == 0){
                $(".example, .titlename, .content").css({
                    opacity: 1
                    });
            }
        });
        $(this).closest('.example').toggleClass('active').siblings().not('.active').css({
            opacity: 0.5
        });
        $(this).closest('.example').not('.active').css({
            opacity: 0.5
        });
        $(this).closest('.example.active').css({
            opacity: 1.0
        });



    });

});

Answer 3

$(function () {
    $(".example .titlename").click(function () {
        $(this).closest('.example').find('.content').slideToggle(500);
        $(this).closest('.example').toggleClass('active').siblings().not('.active').css({
            opacity: 0.5
        });
        $(this).closest('.example').not('.active').css({
            opacity: 0.5
        });
        $(this).closest('.example.active').css({
            opacity: 1.0
        });

        if (!$('.example').hasClass('active')) 
            $('.example').css({ opacity: 1.0 });
    });

});

http://jsfiddle.net/Lgf4s/3/

Answer 4

You do a lot of uneccessary traversing in your code - I could have also cached some selectors for better performance but this is what I came up with - using the complete function in slideToggle() so that all checks come after animation is complete

$(function () {
    $(".example .titlename").click(function () {           
        $(this).siblings('.content').slideToggle(500, function(){ // you can use siblings to get the content                
            $(this).closest('.example').toggleClass('active'); // just toggle current clicked                
            $('.example.active').css({opacity: 1.0});// make all active opacity 1                
            $('.example').not('.active').css({opacity: 0.5});// make all not active opacity .5                
            if(!$('.example.active').length){// if all not example divs don't have active class - make all opacity 1
                $('.example').css({opacity: 1.0});
            }
        });       
    });
});

FIDDLE