Question

I have three divs with float:left

<div class="center">
 <div class="fade1"></div>
 <div class="fade2"></div>
 <div class="fade3"></div>
</div>

and I want to click on them and reveal content that should be below them
I can fade them out using jquery

$('.fade1').click(function(){
$('.fade1').fadeOut(700);   
});

so I need 3 content divs inside the center div
the problem is that i can’t place them exactly beneath the fade-divs because the divs are all floating
so my content will just appear next to the fade divs that are supposed to hide them

Answer 1

Here you go: jsFiddle

The script to achieve this is:

$(function() {
  $('.fade').click(function() {
    var $this = $(this);
    var $content = $('#' + $this.attr('id') + '_content');

    $this.fadeOut(700, function() {$this.before($content.show());});
  });
});

See the jsFiddle for the html and css changes.