h3x.no » javascript http://h3x.no Tor Henning Ueland`s thoughts about technology and other stuff Sun, 05 Feb 2012 20:24:43 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Show/hide a div with javascript http://h3x.no/2009/04/21/showhide-a-div-with-javascript http://h3x.no/2009/04/21/showhide-a-div-with-javascript#comments Tue, 21 Apr 2009 11:35:25 +0000 Tor Henning Ueland http://www.h3x.no/?p=32 Continue reading →]]> 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>
]]> http://h3x.no/2009/04/21/showhide-a-div-with-javascript/feed 0