h3x.no

Looking for a simple javascript to show/hide a given text/element?

Here`s all you need!

<!--
   Simple show/hide system
   @author - Tor Henning Ueland
-->
<script language="javascript" type="text/javascript">

        //ShowHide function - takes the div ID as argument
        function showHide(divId) {

                //Switch the display mode for the the div to hide
                var theDiv = document.getElementById(divId);
                if(theDiv.style.display == 'block')
                        theDiv.style.display = 'none';
                else
                        theDiv.style.display = 'block';

                //Remove this part if you dont want a "show/hide" text
                var showText = document.getElementById("showText");
                var hideText = document.getElementById("hideText");

                //Switch the display mode for the the show/hide text/div
                if(showText.style.display == 'block') {
                        showText.style.display = 'none';
                        hideText.style.display = 'block';
                } else {
                        showText.style.display = 'block';
                        hideText.style.display = 'none';
                }
        }
</script>

<div id="showHideMe" style="display:none;">
        Now you see me!
</div>

<a href="#" onClick="showHide('showHideMe')">
        <div id="showText" style="display:block;">Show</div>
        <div id="hideText" style="display:none;">Hide</div>
</a>