<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>h3x.no &#187; div</title>
	<atom:link href="http://h3x.no/tag/div/feed" rel="self" type="application/rss+xml" />
	<link>http://h3x.no</link>
	<description>Tor Henning Ueland`s thoughts about technology and other stuff</description>
	<lastBuildDate>Fri, 30 Jul 2010 21:20:19 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Show/hide a div with javascript</title>
		<link>http://h3x.no/2009/04/21/showhide-a-div-with-javascript</link>
		<comments>http://h3x.no/2009/04/21/showhide-a-div-with-javascript#comments</comments>
		<pubDate>Tue, 21 Apr 2009 11:35:25 +0000</pubDate>
		<dc:creator>Tor Henning Ueland</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Web development]]></category>
		<category><![CDATA[div]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.h3x.no/?p=32</guid>
		<description><![CDATA[Looking for a simple javascript to show/hide a given text/element? Here`s all you need! body.hl { background-color:#ffffff; } pre.hl { color:#000000; background-color:#ffffff; font-size:10pt; font-family:'Courier New';} .hl.num { color:#2928ff; } .hl.esc { color:#ff00ff; } .hl.str { color:#ff0000; } .hl.dstr { color:#818100; } .hl.slc { color:#838183; font-style:italic; } .hl.com { color:#838183; font-style:italic; } .hl.dir { color:#008200; } [...]]]></description>
			<content:encoded><![CDATA[<p>Looking for a simple javascript to show/hide a given text/element?</p>
<p>Here`s all you need! <img src='http://h3x.no/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<style type="text/css">
body.hl { background-color:#ffffff; }
pre.hl  { color:#000000; background-color:#ffffff; font-size:10pt; font-family:'Courier New';}
.hl.num { color:#2928ff; }
.hl.esc { color:#ff00ff; }
.hl.str { color:#ff0000; }
.hl.dstr { color:#818100; }
.hl.slc { color:#838183; font-style:italic; }
.hl.com { color:#838183; font-style:italic; }
.hl.dir { color:#008200; }
.hl.sym { color:#000000; }
.hl.line { color:#555555; }
.hl.mark  { background-color:#ffffbb;}
.hl.kwa { color:#000000; font-weight:bold; }
.hl.kwb { color:#830000; }
.hl.kwc { color:#000000; font-weight:bold; }
.hl.kwd { color:#010181; }</p>
</style>
<pre class="hl"><span class="hl com">&lt;!--</span>
<span class="hl com">   Simple show/hide system</span>
<span class="hl com">   &#64;author - Tor Henning Ueland</span>
<span class="hl com">--&gt;</span>
<span class="hl kwa">&lt;script</span> <span class="hl kwb">language</span>=<span class="hl str">&quot;javascript&quot;</span> <span class="hl kwb">type</span>=<span class="hl str">&quot;text/javascript&quot;</span><span class="hl kwa">&gt;</span>

        //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 <span class="hl str">&quot;show/hide&quot;</span> text
                var showText = document.getElementById(<span class="hl str">&quot;showText&quot;</span>);
                var hideText = document.getElementById(<span class="hl str">&quot;hideText&quot;</span>);

                //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';
                }
        }
<span class="hl kwa">&lt;/script&gt;</span>

<span class="hl kwa">&lt;div</span> <span class="hl kwb">id</span>=<span class="hl str">&quot;showHideMe&quot;</span> <span class="hl kwb">style</span>=<span class="hl str">&quot;display:none;&quot;</span><span class="hl kwa">&gt;</span>
        Now you see me!
<span class="hl kwa">&lt;/div&gt;</span>

<span class="hl kwa">&lt;a</span> <span class="hl kwb">href</span>=<span class="hl str">&quot;#&quot;</span> <span class="hl kwb">onClick</span>=<span class="hl str">&quot;showHide('showHideMe')&quot;</span><span class="hl kwa">&gt;</span>
        <span class="hl kwa">&lt;div</span> <span class="hl kwb">id</span>=<span class="hl str">&quot;showText&quot;</span> <span class="hl kwb">style</span>=<span class="hl str">&quot;display:block;&quot;</span><span class="hl kwa">&gt;</span>Show<span class="hl kwa">&lt;/div&gt;</span>
        <span class="hl kwa">&lt;div</span> <span class="hl kwb">id</span>=<span class="hl str">&quot;hideText&quot;</span> <span class="hl kwb">style</span>=<span class="hl str">&quot;display:none;&quot;</span><span class="hl kwa">&gt;</span>Hide<span class="hl kwa">&lt;/div&gt;</span>
<span class="hl kwa">&lt;/a&gt;</span>
</pre>
]]></content:encoded>
			<wfw:commentRss>http://h3x.no/2009/04/21/showhide-a-div-with-javascript/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
