Jump to content

JS Code to show and hide text

darknightelor

By darknightelor
in JavaScript

Recommended Posts

darknightelor Newbie

darknightelor

Posted
Posted

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.

Link to comment
Share on other sites
Ache Newbie

Ache

Posted
Posted

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>

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

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";   }}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...