Breathing Spring

Archive for the ‘javascript’ Category

div open close

a script that help open three divs only at times, a very good I even used it in joomla news in front page by modifying tempaltes/mytemplate/html/com_content/frontend

<script type=”text/javascript”><!–
function OpenDiv(id) {
var opened_divs = 0;
for (i=1;i<=5;i++) { // so you can add more than 2
var divname = ‘div’+i;
var divstyle = document.getElementById(divname).style;
if(divstyle.display == ‘block’) opened_divs++;
}
var state = document.getElementById(id).style;
if(state.display == ‘block’) {
state.display = ‘none’;
return;
}
else if (state.display == ‘none’){
if(opened_divs < 3) {
state.display = ‘block’;
return;
}
else {
for (j=3;j<=5;j++) {
var new_div = ‘div’+j;
if(document.getElementById(new_div).style.display == ‘block’ && new_div != id) {
document.getElementById(new_div).style.display = ‘none’
document.getElementById(id).style.display = ‘block’
return;
}
}
}
}
}
// –></script>
<div id=”alldivs”><!– all will probably confuse IE = see document.all –>
<a class=”gray” onclick=”OpenDiv(‘div1′);”>DIV 1</a>
<div id=”div1″ style=”display: block;”>Div 1</div>
<a class=”gray” onclick=”OpenDiv(‘div2′);”>DIV 2</a>
<div id=”div2″ style=”display: block;”>Div 2</div>
<a class=”gray” onclick=”OpenDiv(‘div3′);”>DIV 3</a>
<div id=”div3″ style=”display: block;”>Div 3</div>
<a class=”gray” onclick=”OpenDiv(‘div4′);”>DIV 4</a>
<div id=”div4″ style=”display: none;”>Div 4</div>
<a class=”gray” onclick=”OpenDiv(‘div5′);”>DIV 5</a>
<div id=”div5″ style=”display: none;”>Div 5</div>
</div>

hide show div in javascript

<script language="javascript">
function toggle() {
	var ele = document.getElementById("toggleText");
	var text = document.getElementById("displayText");
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "show";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "hide";
	}
}
</script>
<a id="displayText" href="javascript:toggle();">show</a> <== click Here
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

another option would be

<script language='javascript'>
			function showme() {
			var ele = document.getElementById('hideme');
	   		ele.style.visibility = 'visible';

			}
			function hideme() {
			var ele = document.getElementById('hideme');
	   		ele.style.visibility = 'hidden';

			} 

</script>