How To Fade/blend Between 2 Divs In A Less 'clunky' Way

NB My Header:

div elements within a parent container positioned absolutely so they overlap. You can then fadeToggle() between the two as needed. Something like this:

$('#container').click(function() {
  $(this).find('div').fadeToggle();
})

#container > div {
  position: absolute;
}
#divSecond {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
  <div id="divFirst">some content with images</div>
  <div id="divSecond">different content with images</div>
</div>

Click the text to see the fade transition in action.

Share