Jump to content
Sign in to follow this  
darknightelor

JS Code to show and hide text

Recommended Posts

Hello all!I need a JS code which will show certain text if you click on an anchor text and hide that text if you click on the anchor text again.For example: You click on item on a list "Names" you get a smaller list opened: "John" "Adam" "Moiraine" "Logain", and when you click on "Names" again, the smaller list closed.Now, I already managed to go this far:

<html><head><script>function sw(y,x){t=document.getElementById(x).stylet.display=(y=='on')?'block':'none'}</script><style>#div1,.div2 {display:none;}</style></head><body><ul style="list-style-type:none;"><li><button onclick=sw('on','div1')>Names</button><ul><div id="div1"><li>Adam</li></div></ul></ul></body></html>

As you can see, I can't do the following: Make the smaller list be closed by the same button (probably need If statement in the script), and I can't make the script work on regular anchor, but only on "button".Please help me.

Share this post


Link to post
Share on other sites

I wrote what you want a long time ago for a site of mine. It was a menu.Change whatever you want to your liings, e.g. the colors, border, font-size etc etc.Put this in the header of a htm file:

<script language="JavaScript">function goToURL() { history.go(-1); }</script><style>  .menu  {   background-color:#0000FF;   border:1px solid #FFFF00;   width:120px;   font-size:12px;   font-family:verdana;   position: absolute;   font:bold;   color: #FFFF00;   cursor: hand;  }  .item_panel  {	width:120px;	border-left:1px solid #FFFF00;	border-right:1px solid #FFFF00;	clip:rect(0,120,0,0);	position:absolute;  }  .item_panel a  {   text-decoration:none;   color:#FFFF00;   cursor:hand;  }  .item  {   background-color: #6666ff;   width: 148px;   font-size: 11px;   font-family: verdana;     }  </style>    <script language="JavaScript">    var height = 20; // Hoogte van de hoofdmenu linken  var iheight = 20; // hoogte van de menu elementen   var bgc = "0000C0" // Achtergrondkleur menu element  var tc = "ffff00" // text kleur van het menu element   var over_bgc = "#C0C0C0";//achtergrondkleur menu item bij mouse-over  var over_tc = "#FF3333"; //teskt kleur bij mouse-over  var speed = 10;  var timerID = "";  var N = (document.all) ? 0 : 1;  var width = 120;  var self_menu = new Array();function write_menu(){  smc = 0;   document.write("<div style='position:absolute'>");  mn = 0;  mni = 1;  start = -1;    for(i=0;i<Link.length;i++)  {   la = Link[i].split("|");   if (la[0] == "0")   {	if(start == 0) 	 {	  document.write("</div>");	  h =  csmc * iheight;	  tmn = mn; //-h	  self_menu[smc] = new Array(tmn,h,0,-2);	  smc++;	  mn--;	 }	 csmc = 0;	document.write("<div class='menu' style='top:"+mn+";height:"+height+"' id='down"+smc+"' onclick='pull_down("+smc+","+mni+")'> "+ la[1] + "</div>");	self_menu[smc] = new Array(mn,height,0,mni);	smc++;	mni++;	mn+=height;	start = 1;   }   else   {	if(start == 1) 	 {	  if(N)mn+=2;	   document.write("<div class='item_panel' id='down"+smc+"' style='top:"+mn+"'>");	   start = 0;	 }		document.write("<a href='"+la[2]+"'");	if (la[3] != "") document.write(" target='" + la[3] + "' ");	document.write("><div align='center' id='d"+i+"' style='height:"+iheight);	if (N) document.write(";width:150");	document.write("' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>  "+ la[1] + "</div></a>");	csmc++;   }  }  if (start == 0)    {	 document.write("</div>");	 h =  csmc * iheight;	 tmn = mn + 5; //-h	 self_menu[smc] = new Array(tmn,h,0);	 name = "down" + (self_menu.length-1);	 obj = document.getElementById(name);	 obj.style.borderBottomColor = "darkblue";	 obj.style.borderBottomWidth = 1;	 obj.style.borderBottomStyle = "solid";   }  document.write("</div>");}function color(obj){ document.getElementById(obj).style.backgroundColor = over_bgc; document.getElementById(obj).style.color = over_tc}function uncolor(obj){ document.getElementById(obj).style.backgroundColor = bgc; document.getElementById(obj).style.color = tc}function pull_down(nr,c){ if (timerID == "") { to = self_menu[nr+1][1] begin = nr + 2; if (timerID != "") clearTimeout(timerID); if (self_menu[nr+1][2] == 0) {  self_menu[nr+1][2] = 1;  if(nr == self_menu.length-2) {to++;}  epull_down(begin,to,0); } else {  to = 0;  self_menu[nr+1][2] = 0;  name = "down"+(nr+2);  open_item = 0;  for(i=0;i<nr;i++)  {   if(self_menu[i][2] == 1) 	{open_item += self_menu[i][1];	}  }  if (N == false) {open_item-= (c*1)};  if (nr== self_menu.length-2) {val = self_menu[self_menu.length-1][1];to=-1;}  else  val = parseInt(document.getElementById(name).style.top) -(open_item)-(c*height);  epull_up(begin,to,val); } }}function epull_down(nr,to,nowv){ name = "down" + (nr-1); obj = document.getElementById(name).style.clip = "rect(0,"+width+","+(nowv+1)+",0)"; for (i=nr;i<self_menu.length;i++) {  name = "down" + i;  obj = document.getElementById(name);  obj.style.top = parseInt(obj.style.top)+1; } nowv++; if(nowv < to) timerID = setTimeout("epull_down("+nr+","+to+","+nowv+")",speed); else timerID = "";}function epull_up(nr,to,nowv){ name = "down" + (nr-1); obj = document.getElementById(name).style.clip = "rect(0,"+width+","+nowv+",0)"; for (i=nr;i<self_menu.length;i++) {  name = "down" + i;  obj = document.getElementById(name);  obj.style.top = parseInt(obj.style.top)-1; } nowv--; if(nowv > to) timerID = setTimeout("epull_up("+nr+","+to+","+nowv+")",speed); else timerID = "";}function startup(nr){ write_menu(); if (nr != 0) { for(i=0;i<self_menu.length;i++) {  if(self_menu[i][3] == nr) pull_down(i,nr)  i==self_menu.length; } }}  </script>

And this in the body:

<script language="JavaScript">	  //Link[nr] = "positie [0 is menu/1 is een item],Link naam ,url,target (blank|top|frame_naam)"	  // je kunt eenvoudig items toevoegen, gewoon doornummeren  var Link = new Array();  Link[0] = "0|NEDERLANDS";  Link[1] = "1|0 - 9|gpt-nl/verdienen0-9.htm|main";  Link[2] = "1|A - C|gpt-nl/verdienena-c.htm|main";  Link[3] = "1|D - F|gpt-nl/verdienend-f.htm|main";  Link[4] = "1|G - I|gpt-nl/verdieneng-i.htm|main";  Link[5] = "1|J - L|gpt-nl/verdienenj-l.htm|main";  Link[6] = "1|M - O|gpt-nl/verdienenm-o.htm|main";  Link[7] = "1|P - R|gpt-nl/verdienenp-r.htm|main";  Link[8] = "1|S - T|gpt-nl/verdienens-t.htm|main";  Link[9] = "1|U - W|gpt-nl/verdienenu-w.htm|main";  Link[10] = "1|X - Z|gpt-nl/verdienenx-z.htm|main";  Link[11] = "0|BUITENLANDS";  Link[12] = "1|Belgiƫ|gpt-bl/belgie.html|main";  Link[13] = "1|Duitsland|gpt-bl/duits.html|main";  Link[14] = "1|Engels|gpt-bl/engels.html|main";    startup(0);  </script>

Share this post


Link to post
Share on other sites

No comment on Ache's code, but it is a lot to study. A basic toggle function looks like this:

function toggle_display (id) {   var el = document.getElementById(id);   if (el.style.display == "" || el.style.display == "none") {	  el.style.display = "block";   } else {	  el.style.display = "none";   }}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...