Question

I have the following CSS on my HTML page:

<style type="text/css">
    .hidden           {display:none;}
    .visible          {display:block;}
</style>

And almost every and on the page belongs to one or the other of these CSS styles. What I need is the javascript to swap everything to it’s opposite number….i.e. every hidden becomes visible and vice versa.

I was using something similar on an earlier project, but it only lets me swap one thing at a time, and forces me to specify it’s ID directly. What I need is a global ‘if visible – change to hidden – and vice versa’ script.

The code (which I tried and failed to expand to have this behaviour) is below:

<script type="text/javascript">
    function toggle(divID) {var item = document.getElementById(divID); if (item) {item.className=(item.className=='hidden')?'visible':'hidden';}}
</script>

Any ideas?

Answer 1

<style type="text/css">
.hidden           {display:none;}
.visible          {display:block;}
.temp           {display:none;}
</style>

function swap() {
$('.hidden').removeClass('hidden').addClass('temp');
$('.visible').removeClass('visible').addClass('hidden');
$('.temp').removeClass('temp').addClass('visible');
}