Swap Div Content From The Same Text Link

I am having trouble resolving an issue using traditional JavaScript and was wondering if there is an easy solution using jQuery. I've searched the web and haven't been able to find

Solution 1:

Using jQuery, and based on your code that you've tried for simply showing/hiding the divs, how about (untested):

$(document).ready( function() {
  $("#div1").show();
  $("#div2").hide();
});

$("a#someIDhere").click( function() {
  $("#div1").toggle();
  $("#div2").toggle();
});

tagging the <a> tag with an ID that you can use above?

Solution 2:

If you want to do it without using JQuery:

<a href="#" onclick="hideShow('div1', 'div2');return false;">

<script language='javascript'>
function hideShow(divOneId, divTwoId)
{
 var divOne = document.getElementById(divOneId);
 var divTwo  = document.getElementById(divTwoId);


divOne.style.display =   (divOne.style.display == 'none') ? 'block' : 'none';
divTwo.style.display =   (divTwo.style.display == 'none') ? 'block' : 'none';


}

</script>

Solution 3:

$('#yourReverseAnchor').click(function(e) {
    var swap = $('div1').html();
    $('div1').html($('div2').html());
    $('div2').html(swap);
}

Solution 4:

It's quite simple using jQuery:

<script type="text/javascript">
$(document).ready(function ()
{
    var a = $('#a'),
        b = $('#b');

    function swap()
    {
        var a_html = a.html();
        a.html(b.html());
        b.html(a_html);
    }

    $('#swap').click(swap);
});
</script>

<div id="a">first</div>
<div id="b">second</div>
<a id="swap">swap</a>

Solution 5:

With jQuery this becomes simply:

<div id="div1">content 1</div>
<div id="div2" style="display:none;">content 2</div>
<a href="#" id="toggle">Reverse</a>

and

$(function() {
  $("#toggle").click(function() {
    var div1 = $("#div1");
    if (div1.is(":hidden")) {
      div1.show();
      $("#div2").hide();
    } else {
      div1.hide();
      $("#div2").show();
    }
    return false;
  });
});

There's no point manipulating the DOM in this case unless there's something you're not telling us. It's easier just to hide and show as required.