Swap div content from the same text link

Question

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 anything that does exactly what i want to do.

So.. this is what i want to achieve:
I have 2 div's with content, first one is displayed, second is hidden. Below and outside of these div's i have a single text link which when first clicked, will swap the content on the first div with the second div. When clicked a second time i want it to swap back to first div and so on.. It should toggle between the 2 div's on each onClick every time i click the text link.

To put a bit more context to it, my div's contain a form with 2 labels and text inputs. In the first div the labels say To: and From: In the second div, the order is simply flipped to say From: and then To:
Below the inputs i have a text link that will allow the user to switch the order around to From: and To:

To:
text input
From:
text input
- Text link -

When the text link is clicked i want the content replaced with this:

From:
text input
To:
text input

Here is an example of what i've tried - Note: This is very close to how i want it except when the link is clicked a second time, nothing happens

<script type="text/javascript">

<code>function hideID(objID){
var element = document.getElementById(objID);
element.style.display="none";
}
function showID(objID){
var element = document.getElementById(objID);
element.style.display="block";
}</code>

</script>

<div id="div1">content 1</div>

<div id="div2" style="display:none;">content 2</div>

<a href="" onClick="hideID('div1');showID('div2'); return false;">Reverse</a>

If anyone has any ideas, i would be very greatful
kind regards
~declan

Answer 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?

Answer 2

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

Answer 3

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>

Answer 4

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.

Answer 5

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>