what is the best way to toggle two divs in the same area

Question

i am loading two divs in a page: divA and divB

i have divB display style = none.

I have a link that says "Show viewB". When i click this i want div B to show up where divA is and divA to hide.

i then want the link to change to "Show viewA"

what is the most elegant way of doing this in jquery?

Answer 1

By using the toggle() function:

$("#link").toggle(function() {
  toggleDivs();
  $(this).html("Show viewA");
}, function() {
  toggleDivs();
  $(this).html("Show viewB");
});

function toggleDivs() {
  $("#divA, #divB").toggle();
}