Simple Hide And Show Div Box, Need Help With Javascripting |
Simple Hide And Show Div Box, Need Help With Javascripting |
crampz |
Dec 6 2006, 04:25 PM
Post
#1
|
Group: Members Posts: 2 Joined: 6-December 06 Member No.: 1,225 |
hi I have this website with about 20 products a page and alot of pages , so i had this simple hide and show box put in show information is hidden or shown. each hidden and shown box gets its own ID mine is called info_(no.) . (no.) - being from 2+ . these open up fine on there own but i also want one at the top which will open them all up and close them all with one click but still keeping the seperate ones as well.
This is The Main Code That has to be at the top before the body tag of each page <script language="javascript"> function show_hide(divID){ var divArea = document.getElementById(divID) var divAreaImg = document.getElementById(divID+"_img") var divAreaVisible = divArea.style.display != "none" if(divAreaVisible){ divArea.style.display = "none" divAreaImg.innerHTML = "<img src='/EN/Script/plus.jpg' border='0'>" }else{ divArea.style.display = "" divAreaImg.innerHTML = "<img src='/EN/Script/minus.jpg' border='0'>" } } function show_hide_text(divID){ var divArea = document.getElementById(divID) var divAreaImg = document.getElementById(divID+"_img") var divAreaVisible = divArea.style.display != "none" if(divAreaVisible){ divArea.style.display = "none" divAreaImg.innerHTML = "+" }else{ divArea.style.display = "" divAreaImg.innerHTML = "−" //ADDED TO CLOSE ANY EXPANDED SECTIONS close_others(divID) } } function close_others(divID){ var span_tags = document.getElementsByTagName("span") for(i=0;i<span_tags.length;i++){ //alert(span_tags[i].getAttribute('id')+" "+divID) if(span_tags[i].getAttribute('id') != divID){ if(span_tags[i].getAttribute('id').indexOf('_img') == -1){ span_tags[i].style.display = 'none' document.getElementById(span_tags[i].getAttribute('id')+"_img").innerHTML = "+" } } } } </script> And this is the code that is the show and hide div box: <!--Start Of Show / Hide Box--> <div align="center"> <a href="java script:void(0);" onClick="show_hide('info_2');"><span id="info_2_img><span id="info_2_img><img src="Script/plus.jpg" width="9" height="9" border="0"></span></a> More Info <tr> <td valign="top"><div id="info_1" style="display:none;"> </div></div> <!--End Of Show / Hide Box--> As you can see i have set it up so div box with the ID info_2 opens and close . this one is called info_1 because this is the main one which will open and close all . onClick="show_hide('info_2');"><span id="info_2_img> this bit opens div box id info_2 I need help with coding this piece of code so that it can open and close more than just one. Please Help. Thank You |
Darin McGrew |
Jul 19 2012, 09:30 AM
Post
#2
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
QUOTE BTW I changed the clickable SPAN elements into links, since I believe that's more usable. Yep. And more accessible. Clickable SPAN elements often don't work with screen readers. |
Lo-Fi Version | Time is now: 18th March 2024 - 09:05 PM |