CODEWITHSUNDEEP
jqueryjquery-animatetoggleopacity
user1794295
user1794295

Reputation: 1839

jQuery Toggle opacity of an element inside the previous sibling

I have an image and a div below which has a slide toggle effect when an 'About' button is clicked.

JSFIDDLE here

HTML

<section class="watch-block">
<div class="illustration-wrapper">
<img src="http://placehold.it/300x300" title="watch text"/>
</div>
<div class="watch-text hide-first">
<div class="inner-padding text-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quibusdam fugit cum dignissimos quas voluptatibus tenetur magni, voluptates dolores veniam sapiente sunt aut perspiciatis laudantium, dolor pariatur sit excepturi nemo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quibusdam fugit cum dignissimos quas voluptatibus tenetur magni, voluptates dolores veniam sapiente sunt aut perspiciatis laudantium, dolor pariatur sit excepturi nemo.</p>
</div>
</div>
<div class="toggle-wrapper"><span>About</span></div>
</section>

CSS

.watch-block {width:400px;}     
.illustration-wrapper {background-color: red;}
.illustration-wrapper img {display: block; margin: 0 auto; padding: 1em 0;}
.watch-text {color: #fff; text-align: center;}
.toggle-wrapper {width: 40px;height: 40px;margin: 0 auto;}
.watch-text, .toggle-wrapper {background-color:#FF530D; cursor: pointer;}
.watch-text p:first-child {margin-top: 0;}
.watch-text .inner-padding {padding: 2em;}

jQuery

$(".hide-first").hide();
$(".toggle-wrapper").click(function() {
$(this).prev(".hide-first").animate({ height: "toggle"}); 
});

How can I get the text .text-content to fade in when users click to show the div and then fade out the text when the user clicks to hide the div?

As you can see, I know how to target the previous sibling .hide-first on click but how can I apply an animation to an element nested inside that previous sibling?

Upvotes: 0

Views: 206

Answers (1)

Richie Fredicson
Richie Fredicson

Reputation: 2453

jquery

    $(".hide-first").hide();
    $(".toggle-wrapper").click(function() {
    $(this).prev(".hide-first").find('.text-content').animate( {opacity:"toggle" });
    $(this).prev(".hide-first").animate({ height: "toggle"});  
     });

css

.text-content{display:none}

here is the updated fiddle

Upvotes: 2

Related Questions