Geek Answers Handbook

Show item when clicked and hide again when inactive

I created a JSFiddle and I'm trying to show and hide text. When you click on any of the "personal" elements, and after the end of the animation, I end the text that I have in each of the classes. When the user clicks on the "staff" element again, the text hides / disappears.

My work is here: http://jsfiddle.net/tJugd/3571/

HTML:

<div class="slide" style="height:568px;"> <div class="staff staff-matt" data-hammer="[object Object]"> <div id="text1"><h1>Lorem Ipsum<h1><p>lorem ipsum dolar<p></div> </div> <div class="staff staff-shail" data-hammer="[object Object]"> <div id="text2"><h1>Lorem Ipsum<h1><p>lorem ipsum dolar<p></div> </div> <div class="staff staff-leah" data-hammer="[object Object]"> <div id="text3"><h1>Lorem Ipsum<h1><p>lorem ipsum dolar<p></div> </div> </div>

CSS

 .slide{ height:568px; overflow: hidden; } .staff{ -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none; -webkit-transform-origin: 0px 0px 0px; opacity: 1; -webkit-transform: scale(1, 1); width:33%; height:568px; background:red; float: left; } .staff-matt{ background:red; box-shadow: rgba(0, 0, 0, 0.298039) 4px 4px 10px 0px; } .staff-shail{ background:white; box-shadow: rgba(0, 0, 0, 0.298039) 4px 4px 10px 0px; } .staff-leah{ background:red; box-shadow: rgba(0, 0, 0, 0.298039) 4px 4px 10px 0px; } #text1, #text3{ position:relative; background-color:white; width:50%; }

JS:

 $('.staff').click(function(){ if($(this).hasClass('clicked')){ $('.staff').animate({width:'33%'}); } else { $('.staff').not(this).animate({width:'0%'}); $(this).animate({width:'100%'}); } $(this).toggleClass('clicked'); });
+5
source share
2 answers
 $('.staff').click(function(){ if($(this).hasClass('clicked')){ $('.staff').finish().animate({width:'33%'}, 0, function() { $("[id^=text]").fadeOut() }); } else { $('.staff').not(this).finish().animate({width:'0%'}); $(this).finish().animate({width:'100%'}, 0, function() { $("[id^=text]").fadeIn() }); } $(this).toggleClass('clicked'); });

jsfiddle http://jsfiddle.net/tJugd/3575/

+5
source

Just extend your code with the .fadeIn() and .fadeOut() attribute, focusing on the div text containing the text:

 $('.staff').click(function(){ if($(this).hasClass('clicked')){ $('.staff').animate({width:'33%'}).find('div').fadeOut(); //Added this } else { $('.staff').not(this).animate({width:'0%'}); $(this).animate({width:'100%'}).find('div').fadeIn(); //Added this } $(this).toggleClass('clicked'); });

and hide the text when loading div.staff div {display: none} inside your css.

JS FIDDLE DEMO

+5
source

More articles:


All Articles