I am facing a challenge involving three divs. One of them is the main div, while the other two are positioned below it and contain different content. I am trying to find a way to swap the content between div one and div two in such a way that the original content of div one moves to div two during the exchange. The same process needs to be applied to div 1 and 3 as well. The provided function successfully moves the HTML from div two to div one, but I am struggling to figure out how to properly "swap" their content.
Markup
<div id="main" class="content one">Foo</div>
<div id="second" class="content two">Bar</div>
<div id="third" class="content three">Bar two</div>
JQuery
$('.content.two').on('click', function(e){
e.preventDefault();
$('.content.one').html($('.content.two').html());
$('.content.two').html($('.content.one').html());
});
I would appreciate any assistance with this issue. Thank you!