Show after Hide jQuery
https://carlitoxenlaweb.blogspot.com/
HTML
<div class="ejemplo-a">
<div class="block a">
<p>Bloque A</p>
</div>
<div class="block b">
<p>Bloque B</p>
</div>
<div class="block c">
<p>Bloque C</p>
</div>
<button class="a">Dejar A</button>
<button class="b">Dejar B</button>
<button class="c">Dejar C</button>
</div>
<hr/>
<div class="ejemplo-b">
<div class="block a">
<p>Bloque A</p>
</div>
<div class="block b">
<p>Bloque B</p>
</div>
<div class="block c">
<p>Bloque C</p>
</div>
<button class="a">Dejar A</button>
<button class="b">Dejar B</button>
<button class="c">Dejar C</button>
</div>
<hr/>
<div class="ejemplo-c">
<div class="block a">
<p>Bloque A</p>
</div>
<div class="block b">
<p>Bloque B</p>
</div>
<div class="block c">
<p>Bloque C</p>
</div>
<button class="a">Dejar A</button>
<button class="b">Dejar B</button>
<button class="c">Dejar C</button>
</div>
CSS
div.block {
border: 1px solid #ccc;
}
JavaScript
$(".ejemplo-a > button").click(function(){
var clase = $(this).attr("class");
$(".ejemplo-a > div.block").hide('slow');
$(".ejemplo-a > div.block."+clase).show('slow');
});
$(".ejemplo-b > button").click(function(){
var clase = $(this).attr("class");
$(".ejemplo-b > div.block").hide('slow', function(){
$(".ejemplo-b > div.block."+clase).show('slow');
});
});
$(".ejemplo-c > button").click(function(){
var clase = $(this).attr("class");
$(".ejemplo-c > div.block").hide('slow').end().promise().done(function(){
$(".ejemplo-c > div.block."+clase).show('slow');
});
});