472,989 Members | 3,144 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,989 software developers and data experts.

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


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="javascript: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="JavaScript">

function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
else {
if (document.layers) { // Netscape 4
document.id.display = '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.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
else { // IE 4
document.all.id.style.display = 'block';



and here's some html:


choose <A href="javascript:showdiv('a100');hidediv('a200');h idediv('b100');hidediv('b200');hidediv('c100');hid ediv('c200')">a100</A> or <A href="javascript:showdiv('a200');hidediv('a100');h idediv('b100');hidediv('b200');hidediv('c100');hid ediv('c200')">a200</A>
<DIV id=a100 style="DISPLAY: none">a100 content<BR><BR>choose <A href="javascript:showdiv('b100');hidediv('b200');h idediv('c100);hidediv(c200')">b100</A> or <A href="javascript:showdiv('b200');hidediv('b100');h idediv('c100');hidediv('c200')">b200</A></DIV>
<DIV id=a200 style="DISPLAY: none">a200 content<BR><BR>choose <A href="javascript:showdiv('b100');hidediv('b200');h idediv('c100);hidediv(c200')">b100</A> or <A href="javascript:showdiv('b200');hidediv('b100');h idediv('c100');hidediv('c200')">b200</A></DIV>
<DIV id=b100 style="DISPLAY: none">b100 content<BR><BR>choose <A href="javascript:showdiv('c100');hidediv('c200')"> c100</A> or <A href="javascript:showdiv('c200');hidediv('c100')"> c200</A></DIV>
<DIV id=b200 style="DISPLAY: none">b200 content<BR><BR>choose <A href="javascript:showdiv('c100');hidediv('c200');" >c100</A> or <A href="javascript:showdiv('c200');hidediv('c100');" >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 2094
1,654 Expert 1GB
[html]<A href="javascript: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
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="javascript: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="javascript: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><BR>

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

<A href="javascript:showdiv('a1002')">a1002</A><BR><BR><BR>

<A href="javascript:showdiv('a1003')">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="javascript: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...
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)...
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...
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...
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...
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...
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...
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...
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...
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
by: nia12 | last post by:
Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...
by: SueHopson | last post by:
Hi All, I'm trying to create a single code (run off a button that calls the Private Sub) for our parts list report that will allow the user to filter by either/both PartVendor and PartType. On...

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.