The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Simple Hide And Show Div Box, Need Help With Javascripting
crampz
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
Darin McGrew
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th March 2024 - 09:05 PM