show+hide.tt

• Back
• Raw format

<script>
function show_hide(obj) {
	if(div = obj.getElementsByTagName('DIV')) {
		div.item(0).style.display =
			(div.item(0).style.display == 'block') ? 'none' : 'block';
	}
}

function show_hide2(div_id) {
	if(obj = document.getElementById(div_id)) {
		obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
		}
}

function show_onload() {
	var url = document.location.href.split(/\?/);
	show_hide2(url[1]);
	show_hide3(url[1]);
}

window.onload = show_onload;
</script>

<div id="showhide">
<h2>Show/Hide an element</h2>

<div id="div1" onclick="show_hide(this)" style="padding: 1em;">
	EXAMPLE1: Hello, press me, to see more content :)
	<div id="div2" style="border: 2px solid #009900; display: none;">
		i'm the inner div! see you around kid.
	</div>
</div>

<div id="div3" onclick="show_hide2('div4')" style="padding: 1em; margin: 1em 0;">
	EXAMPLE2: Hello, press me, to see more content :)
	<div id="div4" style="border: 2px solid #009900; display: none;">
		i'm the inner div! see you around kid.
	</div>
</div>

</div>
<script>
function show_hide3(div_id) {
    if(obj = document.getElementById(div_id)) {
        obj.style.height = (obj.style.height == 'auto') ? '30px' : 'auto';
    }
}
</script>

<style>
#div6 {
    overflow: hidden;
    height: 30px;
    border: 1px solid #000000;
    cursor: pointer;
}
</style>

<div id="showhide2">
<h2>Show/Hide an element</h2>

<div id="div6" onclick="show_hide3('div6')">
Nunc lobortis. Quisque quam justo, luctus id, fermentum id, dictum a, ante. Aliquam mi. Donec urna urna, scelerisque eget, placerat et, bibendum tempor, quam. Nullam eu massa eget neque adipiscing mattis. Suspendisse diam massa, lacinia eu, malesuada at, consectetuer tincidunt, ipsum. Aliquam facilisis, libero at blandit facilisis, est ligula rutrum quam, non condimentum sem libero quis quam. Nulla nonummy. In imperdiet sapien pharetra nisi. Praesent eu ante. Maecenas mauris nibh, aliquet quis, volutpat nec, tristique eu, turpis. Nam mattis ullamcorper magna. Pellentesque ut lorem. Ut dictum metus vel arcu. Suspendisse a ligula.
</div>

</div>