Currently, I have created a JSFiddle where I am experimenting with showing and hiding text elements using jQuery. The idea is that when a user clicks on any of the "staff" elements, the corresponding text within each class should be displayed. Subsequently, if the user clicks the "staff" element again, the text should hide/fade out.
You can view my progress so far here: http://jsfiddle.net/tJugd/3571/
Below is a snippet of the HTML code:
<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>
Additionally, below is an excerpt from the CSS styling:
.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%;
}
Last but not least, here is a glimpse into the JavaScript logic:
$('.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');
});