473,890 Members | 1,686 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

hide some divs, show some others (but not all)

7 New Member

I have a page with lots of hidden divs which are revealed based on choices made at each 'layer'.

So I've used naming convention which represents the order in which each div becomes visible - 'a100', 'a200', 'a300' for the first 'layer'; 'b100', 'b200', 'b300' for the second; 'c100, 'c200', 'c300' for the third ... etc

I'm writing the javascript functions to hide and show the appropriate divs and its getting out of hand pretty quickly - I have to 'showdiv' each div in the sequence that the user chooses, and also 'hidediv' every other choice which could potentially have been made (since if a user goes back a step in the sequence and clicks on a different choice it needs to hide what has already been displayed).

What I'm after is a way to use 'hidediv' to span multiple divs using the naming convention above - like using a partial name plus asterisk to find all the names which match the partial name given. But preferably it would recognise alphanumeric order...

Like if I could use:

[html]<A href="javascrip t:hidediv('b*') ">click here</A>[/html]

to hide all divs with ids beginning with 'b' or later in the alphabet

Here's the javascript:


<script language="JavaS cript">

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';



and here's some html:


choose <A href="javascrip t:showdiv('a100 ');hidediv('a20 0');hidediv('b1 00');hidediv('b 200');hidediv(' c100');hidediv( 'c200')">a100</A> or <A href="javascrip t:showdiv('a200 ');hidediv('a10 0');hidediv('b1 00');hidediv('b 200');hidediv(' c100');hidediv( 'c200')">a200</A>
<DIV id=a100 style="DISPLAY: none">a100 content<BR><BR> choose <A href="javascrip t:showdiv('b100 ');hidediv('b20 0');hidediv('c1 00);hidediv(c20 0')">b100</A> or <A href="javascrip t:showdiv('b200 ');hidediv('b10 0');hidediv('c1 00');hidediv('c 200')">b200</A></DIV>
<DIV id=a200 style="DISPLAY: none">a200 content<BR><BR> choose <A href="javascrip t:showdiv('b100 ');hidediv('b20 0');hidediv('c1 00);hidediv(c20 0')">b100</A> or <A href="javascrip t:showdiv('b200 ');hidediv('b10 0');hidediv('c1 00');hidediv('c 200')">b200</A></DIV>
<DIV id=b100 style="DISPLAY: none">b100 content<BR><BR> choose <A href="javascrip t:showdiv('c100 ');hidediv('c20 0')">c100</A> or <A href="javascrip t:showdiv('c200 ');hidediv('c10 0')">c200</A></DIV>
<DIV id=b200 style="DISPLAY: none">b200 content<BR><BR> choose <A href="javascrip t:showdiv('c100 ');hidediv('c20 0');">c100</A> or <A href="javascrip t:showdiv('c200 ');hidediv('c10 0');">c200</A></DIV>
<DIV id=c100 style="DISPLAY: none">this is c100 content</DIV>
<DIV id=c200 style="DISPLAY: none">this is c200 content</DIV>

Feb 22 '08 #1
2 2152
1,654 Recognized Expert Top Contributor
[html]<A href="javascrip t:hidediv('b', 1)">click here</A>[/html]

Expand|Select|Wrap|Line Numbers
  1. function hidediv(id, ALL) {
  2.     //safe function to hide an element with a specified id
  3.     //if ALL flag is on, hide all starting with what provided as id 
  5.     if (document.getElementById) { // DOM3 = IE5, NS6
  6.         if (ALL) {
  7.             var divs = document.getElementsByTagName('div');
  8.             for (var i=0; i<divs.length; i++)
  9.             if (divs[i].id.match('^'+id))
  10.             document.getElementById(id).style.display = 'none';
  11.         }
  12.         else document.getElementById(id).style.display = 'none';
  13.     }
  15.     //change the remaining accordingly... (it don't think it will work for IE4)
  16.     }
  17.     else {
  18.         if (document.layers) { // Netscape 4
  19.             document.id.display = 'none';
  20.         }
  21.         else { // IE 4
  22.             document.all.id.style.display = 'none';
  23.         }
  24.     }
  25. }
Feb 22 '08 #2
7 New Member
ok I've tried this but I can't get it to work... it gives me an 'error on page' message when I try using this


<A href="javascrip t:hidediv('a', 1)">click here</A> to hide


and if I give it the exact name of a div, it hides that div correctly but not the others:


<A href="javascrip t:hidediv('a100 ', 1)">click here</A> to hide


here's my code:

Expand|Select|Wrap|Line Numbers
  2. function showdiv(id) {
  3.     //safe function to show an element with a specified id
  5.     if (document.getElementById) { // DOM3 = IE5, NS6
  6.         document.getElementById(id).style.display = 'block';
  7.     }
  8.     else {
  9.         if (document.layers) { // Netscape 4
  10.             document.id.display = 'block';
  11.         }
  12.         else { // IE 4
  13.             document.all.id.style.display = 'block';
  14.         }
  15.     }
  16. }
  19. function hidediv(id, ALL) {
  20.     //safe function to hide an element with a specified id
  21.     //if ALL flag is on, hide all starting with what provided as id 
  23.     if (document.getElementById) { // DOM3 = IE5, NS6
  24.         if (ALL) {
  25.             var divs = document.getElementsByTagName('div');
  26.             for (var i=0; i<divs.length; i++)
  27.             if (divs[i].id.match('^'+id))
  28.             document.getElementById(id).style.display = 'none';
  29.         }
  30.         else document.getElementById(id).style.display = 'none';
  31.     }
  32. }


click here to show:<BR><BR><B R>

<A href="javascrip t:showdiv('a100 ')">a100</A><BR><BR><BR>

<A href="javascrip t:showdiv('a100 2')">a1002</A><BR><BR><BR>

<A href="javascrip t:showdiv('a100 3')">a1003</A><BR><BR><BR>

<div id=a100 style="DISPLAY: none">div a100 content</DIV>

<div id=a1002 style="DISPLAY: none">div a1002content</DIV>

<div id=a1003 style="DISPLAY: none">div a1003content</DIV>


<A href="javascrip t:hidediv('a', 1)">click here</A> to hide

Feb 24 '08 #3

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

Similar topics

by: David | last post by:
Hi everyone, Hoping there are some .js/browser experts out there that can help with this weird problem. I have made a swap div routine and applied the events to menu buttons with a closer layer behind the menus. The closer div has a lower index than the submenu divs so it appears behind them. The closer div contains a transparent gif with an event applied to it to close all of the divs when moused over.
by: jerryyang_la1 | last post by:
I've found this script that allows be to hide/show form elements.. <script language="JavaScript"><!-- var toggle = true; function show(object) { if (document.layers && document.layers) document.layers.visibility = 'visible'; else if (document.all) { document.all.style.visibility = 'visible';
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
by: asilverpeach | last post by:
Hey Guys! Found some great scripts here on this topic but have to make to changes to the code that I can't seem to figure out. First, In the following code clicking on the headers shows the div information. I want a nested show hide element though. So when you click on "Do you have carpets to be cleaned?" Small Rooms & Medium Rooms appears (that I got working) But Then when you click on Small rooms or medium rooms i want the three lines...
by: ali | last post by:
Hello every one i need you help regarding div hide and show. i am having a link like <a href="#" onClick="expandWin()">show/hide </a> <div id=showHide> </div> within div i have lots of form tags and div elements say n. The problem
by: billyudi | last post by:
I followed this post to use a form drop down to show/hide divs. http://www.thescripts.com/forum/thread150206.html Now I need to be able to show two or three divs at once while hiding all the others on each drop down selection. Any ideas?
by: dusk | last post by:
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...
by: ryrocks | last post by:
Hi, Im making a 'contact us' page. The user click on the div, this then reveals another larger div displaying more information giving the effect of the box expanding or dropping down. I have 3 starting divs on my page, each one expanding onclick. The show/hide elemant works fine. There is one slight problem... I want the user to be able to click anywhere inside the starting div in order for the hidden div to be revealed. This is ok for the...
by: question.boy | last post by:
I am trying to control the visibility of a set of div based on selected values but can't seem to get it right. Below is what I have so far but it does not work at all. The basic concept was to have a set of Divs A through Z and by click the associated text character that Div would be visible and all others would be hidden. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://...
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
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...
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...
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...
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...
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

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.