473,840 Members | 1,641 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

hide all divs without array?

7 New Member
Hi,
I'm very new to javascript, and I'm having trouble finding a way to display a string of divs without the code getting really messy.

I have several different pages to write, each with about 15-20 divs, and I need users to be able to select a sequence of divs - basically like a series of yes/no questions that, when "yes" or "no" is selected, displays the appropriate div as well as what's come before it.

I can hide all divs and display one, no problem. But thats no good cause a user needs to be able see the all the divs which have been selected in sequence.

I can hide each one individually and show the ones I need individually, but this is going to get messy with long strings of actions for each onclick.

I understand you can set up an array in the head of the page and use a hideall function like the one below, but the problem here is this: the platform used to view the pages requires a template to be used for each page, and the head section can only be located in the template itself, not the page body. So, I can create a template and store the javascript in the head section, but if I make an array then each page has to have the same number of divs, and they all have to have the same ids.

So unless I'm missing something, an array in the head section won't work either unless there's a way you can set an array without naming each div in it. (and I don't want to create a new template for each page).

So the question is, how do I make a simple hideall function given that I can't define an array in the head section?

(I've also tried putting the array in the body, but the viewing platform doesn't accept this for some reason)

I've tried a few different scripts, but the one I like best is below, taken from another post in these forums -

[HTML]<SCRIPT LANGUAGE="JavaS cript">
//here you place the ids of every element you want.
var ids=new Array('A','B',' C');

function switchid1(id){
hideallids1();
showdiv1(id);
}

function hideallids1(){
//loop through the array and hide each element by id
for (var i=0;i<ids.lengt h;i++){
hidediv1(ids[i]);
}
}

function hidediv1(id) {
//safe function to hide an element with a specified id
if (document.getEl ementById) { // DOM3 = IE5, NS6
document.getEle mentById(id).st yle.display = 'none';
}
else {
if (document.layer s) { // Netscape 4
document.id.dis play = 'none';
}
else { // IE 4
document.all.id .style.display = 'none';
}
}
}

function showdiv1(id) {
//safe function to show an element with a specified id

if (document.getEl ementById) { // DOM3 = IE5, NS6
document.getEle mentById(id).st yle.display = 'block';
}
else {
if (document.layer s) { // Netscape 4
document.id.dis play = 'block';
}
else { // IE 4
document.all.id .style.display = 'block';
}
}
}
</SCRIPT>

</head>

<body>[/HTML]
Jan 22 '08 #1
11 7851
gits
5,390 Recognized Expert Moderator Expert
hi ...

you may use the:

Expand|Select|Wrap|Line Numbers
  1. document.getElementsByTagName('div');
method for this purpose. that returns a list of all divs in the page. in case you want specified divs to be affected only you may set a class that could act as an secondary identifier:

[HTML]<div class="secondar y"/>whatever</div>[/HTML]
so with that we could do:

Expand|Select|Wrap|Line Numbers
  1. var divs = document.getElementsByTagName('div');
  2.  
  3. for (var i = 0, ele; ele = divs[i]; i++) {
  4.     if (ele.className == "secondary") {
  5.         // do something with all 'secondary'-class-divs
  6.     }
  7. }
kind regards
Jan 22 '08 #2
dusk
7 New Member
Thanks gits, that seems like its exactly what I'm looking for. But I can't get it to work in my code...

You can see below there's a button which I made earlier to hide each div separately, and a new button which I tried to make hide all divs with the hideallids function, but its not working.

If anyone has any ideas they'd be much appreciated!

(incidentally, I don't think I'll need to use the secondary class element, because at this stage all I'm after is a hideall function that works - I'll use the hideall in conjuction with a few showdiv's to display the ones I need at each point)

Code:

[HTML]<head>
<script language="JavaS cript">

var divs = document.getEle mentsByTagName( 'div')

function switchid(id){
hideallids();
showdiv(id);
}

function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.lengt h;i++){
hidediv(ids[i]);
}
}



function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getEl ementById) { // DOM3 = IE5, NS6
document.getEle mentById(id).st yle.display = 'none';
}
else {
if (document.layer s) { // Netscape 4
document.id.dis play = 'none';
}
else { // IE 4
document.all.id .style.display = 'none';
}
}
}

function showdiv(id) {
//safe function to show an element with a specified id

if (document.getEl ementById) { // DOM3 = IE5, NS6
document.getEle mentById(id).st yle.display = 'block';
}
else {
if (document.layer s) { // Netscape 4
document.id.dis play = 'block';
}
else { // IE 4
document.all.id .style.display = 'block';
}
}
}

</script>
</head>

<body>

<a href="javascrip t:showdiv('a1') ;hidediv('b1'); hidediv('b2');h idediv('b3');hi dediv('b4');hid ediv('a2')">Fir st Layer Yes</a>
<a href="javascrip t:showdiv('a2') ;hidediv('b3'); hidediv('b4');h idediv('b1');hi dediv('b2');hid ediv('a1')">Fir st Layer No</a>
<input type="button" onclick="javasc ript:hidediv('a 1');hidediv('a2 ')" value="Clear all"</a>
<input type="button" onclick="javasc ript:hideallids ()" value="Hide all"</a>

<div id='a1' style="display: none;">
First Layer Yes Content Yes<BR><BR>

<input type="button" onclick="javasc ript:showdiv('b 1');hidediv('b2 ')" value="Second Layer Yes"</a>
<input type="button" onclick="javasc ript:showdiv('b 2');hidediv('b1 ')" value="Second Layer No"</a>

</div>

<div id='b1' style="display: none">
Second Layer Yes Content
</div>

<div id='b2' style="display: none">
Second Layer Content No
</div>

<div id='a2' style="display: none;">
First Layer Content No<BR><BR>

<input type="button" onclick="javasc ript:showdiv('b 3');hidediv('b4 ')" value="Second Layer Content Yes"</a>
<input type="button" onclick="javasc ript:showdiv('b 4');hidediv('b3 ')" value="Second Layer Content No"</a>

</div>

<div id='b3' style="display: none">
Second Layer Content Yes
</div>

<div id='b4' style="display: none">
Second Layer Content No
</div>

</body>[/HTML]
Jan 22 '08 #3
gits
5,390 Recognized Expert Moderator Expert
in your hideallids-function you refer to ids that should be divs i think :)
Jan 22 '08 #4
dusk
7 New Member
ok I've had a got with this but still can't get it working. I've tried putting:

var divs=document.g etElementsByTag Name('div')

at the start too but no luck.

Here's the simplified code that 'looks' like it should work to me, but doesn't...

[html]
<script language="JavaS cript">

var ids=document.ge tElementsByTagN ame('div')

function switchid(id){
hideallids();
showdiv(id);
}

function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.lengt h;i++){
hidediv(ids[i]);
}
}

function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getEl ementById) { // DOM3 = IE5, NS6
document.getEle mentById(id).st yle.display = 'none';
}
else {
if (document.layer s) { // Netscape 4
document.id.dis play = 'none';
}
else { // IE 4
document.all.id .style.display = 'none';
}
}
}

function showdiv(id) {
//safe function to show an element with a specified id

if (document.getEl ementById) { // DOM3 = IE5, NS6
document.getEle mentById(id).st yle.display = 'block';
}
else {
if (document.layer s) { // Netscape 4
document.id.dis play = 'block';
}
else { // IE 4
document.all.id .style.display = 'block';
}
}
}

</script>
</head>

<body>

<a href="javascrip t:showdiv('a1') ;hidediv('a2')" >First Layer Yes</a>
<a href="javascrip t:showdiv('a2') ;hidediv('a1')" >First Layer No</a>
<input type="button" onclick="javasc ript:hideallids ()" value="Hide all"</a>

<div id='a1' style="display: none;">
First Layer Yes Content<BR><BR>
</div>

<div id='a2' style="display: none;">
First Layer Content No<BR><BR>
</div>
</body>
</html>[/html]
Jan 23 '08 #5
acoder
16,027 Recognized Expert Moderator MVP
Put the "var ids = ..." line into the hidealldivs function.
Jan 24 '08 #6
gits
5,390 Recognized Expert Moderator Expert
the problem is that you retrieve the div-node-list during load where the dom is not ready to use ... so to fix that you could use the tip of acoder or retrieve the nodes onload of your document's body ...

kind regards
Jan 24 '08 #7
dusk
7 New Member
Thanks for the help, I couldn't find a way to get the var divs = document.getEle mentsByTagName( 'div') line working, but I found another function which works fine, and it uses that line:

[html]

<script>

function clearAllDivs(pa ss) {
var divs = document.getEle mentsByTagName( 'div');
for(i=0;i<divs. length;i++){
if(divs[i].id.match(pass) ){//if they are 'see' divs
if (document.getEl ementById) // DOM3 = IE5, NS6
divs[i].style.display= "none";// show/hide
else
if (document.layer s) // Netscape 4
document.layers[divs[i]].display = 'none';
else // IE 4
document.all.di vs[i].display = 'none';
} else {
if (document.getEl ementById)
divs[i].style.display= "none";
else
if (document.layer s) // Netscape 4
document.divs[i].display = 'none';
else // IE 4
document.all.di vs[i].display = 'none';
}
}
}

</script>

</head>

<body>

<a href="javascrip t:clearAllDivs( )">Clear all divs</a>

[/html]
Jan 29 '08 #8
gits
5,390 Recognized Expert Moderator Expert
glad to hear you got it working :) ... post back to the forum anytime you have more questions ...

kind regards
Jan 30 '08 #9
acoder
16,027 Recognized Expert Moderator MVP
Thanks for the help, I couldn't find a way to get the var divs = document.getEle mentsByTagName( 'div') line working, but I found another function which works fine, and it uses that line:
If you don't need to support Netscape 4 and IE4, you can trim that function to half its size.
Jan 30 '08 #10

Sign in to post your reply or Sign up for a free account.

Similar topics

6
38828
by: Mel | last post by:
i need to have as many as 5 divs side by side on the same line without a break. if browser displays a horizontal scrollbar, its ok with my users and they can resize it. something like the following: X X X X X where each 'X' is a div with my stuff inside them and i dont want it to look like
4
4234
by: bridgemanusa | last post by:
Hi All: I have a very long page of html that I want to take portions and hide them in divs, then show when a link is clicked. I have the hide show part working when the link is clicked, however I would really like to use linked images instead to do the following: - When open.gif is clicked, the contents of the div show and open.gif is swapped with close.gif - subsequently, when close.gif is clicked, the div contents get hidden
2
4616
by: duke123 | last post by:
Hi, I have two divs (image & story) both positioned in a manner so that one overlays the other. The purpose of the code below is to hide one and show the other on a button click. So whenever we click the button, whichever div is hidden becomes visible and the other gets hidden. The initial state on page load (through the css is - "image" visible, "story" invisible through the display property (block/none). But when I use the code below,...
3
1933
by: Sarah W | last post by:
Forgive me, I'm still pretty newb with javascript. I was asked to start updating a webpage for an organization I belong to, and I'd like to make it a bit easier to read. Before I get too far, the current page is located http://www.northshield.org/Posts/Display.aspx?ID=8 As you can see, it is very long, and pretty confusing. What I'd like to do is for each name level, use a show/hide div for the one under it. For example, all of the...
1
4313
by: ll | last post by:
I'm currently working on a form which consists of a show and hide javascript. The toggle works fine, although when I click on submit, I would like the page to reload with the toggle (show/hide) div in the same state it was before being submitted. E.G. If the div was visible, I'd like for it to be visible upon return. Here's the script I'm currently using - thanks for any help, Louis --------------------------------------------
2
1206
by: shapper | last post by:
Hello, I created a function to show a div given its id and hide the other divs (defined in a div): function show(id) { //var e = document.getElementsByTagName("div"); var e = {"home", "contact", "products", "photos"}; for (var i = 0; i < e.length; i++) { e.style.display = 'none';
5
4479
by: Mike P | last post by:
How would I show or hide a div that is using client side Javascript based upon a server side variable? Here are my divs : <div id="idButton5" class="otherLeftBarLink" onmouseover="javascript: changeStylesMouseOver('5');" onmouseout="javascript: changeStylesMouseOut('5');" onclick="location='/AddProject.aspx'"> <div class="leftBarLinkText"> Add Project
11
2581
Ciary
by: Ciary | last post by:
hey all, i have a problem with radio buttons showing and hiding divs in IE. i can't figure out what the problem is. when i click on the radiobutton nothing changes. it's only when i click somewhere else, it changes. can someone tell me how i can change it instantly. here is a my html sample: <form name='Sel'> <input type='radio' name='selector' value='val1' id='val1' checked=true onchange='Change()'/> //also tried onclick ...
6
2539
by: theory | last post by:
Having an odd problem with this script- it's supposed to show/hid div's based on the option selected in a selection box. It's supposed to change methodology based on common browsers. The hardest part of my needs is that I explicitly need to support IE6, IE7, IE8, FF2, and FF3. Other browsers are optional, but that IE6 throws a monkeywrench in things. So I came up with this script, and now it supports FF2-3, but IE is catching an error,...
0
9699
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10603
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10660
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10301
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9440
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7838
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5685
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5874
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
4076
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.