Show/hide a div with javascript

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>
This entry was posted in Web development and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">