Help Finding a sample code

G

gmagnuson

Guest
Does anyone know where there is a sample code (I am guessing Javascript) that does this: In the middle of a webpage you have a "topic" and you click on that link (or Plus or minus arrow) and it will show the text instantaly. I think I recall MSDN using some of this for the definitions--The help file in Windows XP using something like it also. So you click on the topic and all the sub text "revels its self instantaly. I hope I described it right. Thanks!
 
MSDN uses normal links. If you click the box (It's not a plus or minus arrow, just a box with a dot example) it loads a new link, no javascripts here. I know of another site that uses this feature, Spammers Paradise, they have a feature called 'Fast Reply Box'. It is closed by default, but if you click the Fast Reply button, it opens instantly, and yes this uses Javascript code. How this works, I am not sure, but you can take a look in the source. You may have to register first to view the box.
 
Originally posted by Glaanieboy
I know of another site that uses this feature, Spammers Paradise, they have a feature called 'Fast Reply Box'. It is closed by default, but if you click the Fast Reply button, it opens instantly, and yes this uses Javascript code. How this works, I am not sure, but you can take a look in the source. You may have to register first to view the box.

That is what I need, now to figure out how to code it. Is there a piece of sample code that is already done somewhere that I can just reconfigure to suit my needs? The only difference is I would like it to just be text I.E.

This is what they see as the main menu
They will see a few lines like this
......when clicked the text will pop down like this and
......show under it. When clicked again it will go back
......to normal.


Get the idea?

Here is the javascript code it uses:

javascript:ShowHide('qr_open','qr_closed')

But that does not help me with my website coding needs.
 
ShowHide function
Code:
function ShowHide(id1, id2) {
	  if (id1 != '') expMenu(id1);
	  if (id2 != '') expMenu(id2);
	}

expMenu function
Code:
function expMenu(id) {
	  var itm = null;
	  if (document.getElementById) {
		itm = document.getElementById(id);
	  } else if (document.all){
		itm = document.all[id];
	  } else if (document.layers){
		itm = document.layers[id];
	  }
	
	  if (!itm) {
	   // do nothing
	  }
	  else if (itm.style) {
		if (itm.style.display == "none") { itm.style.display = ""; }
		else { itm.style.display = "none"; }
	  }
	  else { itm.visibility = "show"; }
	}

This is the complete (?) javascript code for the Show/Hide any text. I don't have the time to examine it (because I will be out of town for a few days) and explain it how it works, but I am sure there are plenty of other people around who are willing to explain it to you
 
Originally posted by Glaanieboy
I am sure there are plenty of other people around who are willing to explain it to you


Thanks for the code! Could someone explain to me how it works and how I put it into a html document? It looks to be different than other code I have delt with. Thanks!
 
I could not get that code to work, but I found some other, but could not get it to work it keeps giving me an error Line: 20, Char:1 Error: 'document.all.div2.style'is null or not an object'

Here is the code:

<html>

<head>

<script language="javascript">
<!--
var state = 'none';

function showhide(layer_ref) {

if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval ("document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
</script>



</head>

<body>

<p><a href="#" onclick="showhide('div1');">Article 1 - Membership</a></p>

<p><a href="#" onclick="showhide('div2');">Article 2 - Meetings of Members</a></p>

<p><a href="#" onclick="showhide('div3');">Article 3 - Board of Directors</a></p>

<p><a href="#" onclick="showhide('div4');">Article 4 - </a></p>

<p><a href="#" onclick="showhide('div5');">Article 5 - </a></p>

<p><a href="#" onclick="showhide('div6');">Article 6 - </a></p>

<p><a href="#" onclick="showhide('div7');">Article 7 - </a></p>

<p><a href="#" onclick="showhide('div8');">Exhibit A - </a></p>


<div id="div1" style="display: none;">Content 1</div>

<div id="div2" style="display: none;">Content 2</div>

<div id="div2" style="display: none;">Content 3</div>

<div id="div2" style="display: none;">Content 4</div>

<div id="div2" style="display: none;">Content 5</div>

<div id="div2" style="display: none;">Content 6</div>

<div id="div2" style="display: none;">Content 7</div>

<div id="div2" style="display: none;">Content 8</div>




</body>

</html>
 
I looked there, but they did not have anything that was related to what I was looking for. But it is a good place for code samples. I will keep it in mind.
 
Try this...


<--------------------copy--------------------->

<html>

<head>
This is a test
</head>

<script LANGUAGE="JavaScript" type="text/javascript">
<!--
var state = 'none';

function showhide(layer_ref) {

if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval ("document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
</script>


<body>

<p><a href="#" onclick="showhide('div1');">Article 1 - Membership</a></p>

<p><a href="#" onclick="showhide('div2');">Article 2 - Meetings of Members</a></p>

<p><a href="#" onclick="showhide('div3');">Article 3 - Board of Directors</a></p>

<p><a href="#" onclick="showhide('div4');">Article 4 - </a></p>

<p><a href="#" onclick="showhide('div5');">Article 5 - </a></p>

<p><a href="#" onclick="showhide('div6');">Article 6 - </a></p>

<p><a href="#" onclick="showhide('div7');">Article 7 - </a></p>

<p><a href="#" onclick="showhide('div8');">Exhibit A - </a></p>


<div id="div1" style="display: none;">Content 1</div>

<div id="div2" style="display: none;">Content 2</div>

<div id="div3" style="display: none;">Content 3</div>

<div id="div4" style="display: none;">Content 4</div>

<div id="div5" style="display: none;">Content 5</div>

<div id="div6" style="display: none;">Content 6</div>

<div id="div7" style="display: none;">Content 7</div>

<div id="div8" style="display: none;">Content 8</div>




</body>

</html>

<--------------------copy--------------------->

It works in Mozilla, Firebird and IE 6, but not with Opera 6.1.
 

Members online

No members online now.

Latest profile posts

Also Hi EP and people. I found this place again while looking through a oooollllllldddd backup. I have filled over 10TB and was looking at my collection of antiques. Any bids on the 500Mhz Win 95 fix?
Any of the SP crew still out there?
Xie wrote on Electronic Punk's profile.
Impressed you have kept this alive this long EP! So many sites have come and gone. :(

Just did some crude math and I apparently joined almost 18yrs ago, how is that possible???
hello peeps... is been some time since i last came here.
Electronic Punk wrote on Sazar's profile.
Rest in peace my friend, been trying to find you and finally did in the worst way imaginable.

Forum statistics

Threads
62,015
Messages
673,494
Members
5,621
Latest member
naeemsafi
Back