FadeIn FadeOut one div at a time

I have the following set up, whereby when you click on the "Show…" link it then hides the current div and shows the hidden div. However what I can't figure out is how to do this one at a time i.e. at the moment when you click "Show…" it then does this same action to all blocks on the page.

Any ideas or help would be gratefully received.

<!DOCTYPE html>
<html>
<head>
 <title>test</title>
 <style type="text/css">
 body {
 font: 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
 }
 
 .block {
 border: 1px solid #333;
 height: 200px;
 width: 200px;
 position: relative;
 margin: 10px;
 }
 
 .front,.back {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 }
 
 .front {
 background: #f5f5f5;
 }
 
.back {
background: #333;
color: #fff;
} 
 
 </style>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="block">
<div class="front">
<p>Front</p>
<div class="toggle">Show Back</div>
</div>
<div class="back" style="display: none;">
<p>Back</p>
<div class="toggle">Show Front</div>
</div>
</div>
<div class="block">
<div class="front">
<p>Front</p>
<div class="toggle">Show Back</div>
</div>
<div class="back" style="display: none;">
<p>Back</p>
<div class="toggle">Show Front</div>
</div>
</div>
<script type="text/javascript">
$(".toggle").click(function() {
var sfilter = $(".block .front, .block .back"), 
current = sfilter.filter(":visible").fadeOut(function() {
sfilter.not(current).fadeIn();
});
});
</script>
</body>
</html>

FadeIn FadeOut one div at a time

greencode

Fotiman

greencode

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week