FadeOut div that is inside the div containing the button to hide it

So, i have a DIV called "item" and inside it I have a button to show more contents ("description"). Inside this new (now showing) "description" div I have a button to hide "description" again.

Take a look at this fiddle: https://jsfiddle.net/6ou9va87/1/

html

<div class="item">
<span>click me</span>

<div class="description"><span>hello</span>
<div class="close-item-description"><span>close</span></div>
</div>

</div>

jquery

 $(document).ready(function() {
            $(".item").click(function(){
                $(".description").fadeIn();
                $(".close-item-description").click(function(){
                    $(".description").fadeOut();
                });
            });
        });

css

.description{

  display: none;
}

The problem is that i can't hide the div after it shows up. It should be working!

Answers 1

  • your close button click raises show click again, to stop it u should use stopPropagation

    https://jsfiddle.net/6ou9va87/2/

        $(document).ready(function() {
            $(".item").click(function(){
                $(".description").fadeIn();
                $(".close-item-description").click(function(e){
                    e.stopPropagation();
                    $(".description").fadeOut();
                });
            });
    
        });
    

Related Articles