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;
}

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

Click the text to see the fade transition in action.

Share