Solved

Using JavaScript to hide and show multiple div's

Posted on 2006-06-15
9
570 Views
Last Modified: 2008-03-06
I have created a page that hides and shows portions of my page based on several checkboxes.  When a check box is selected, the div below it displays a select list.  I have this working well.  Now I need to add another element to this.  At the top of the page, I have a select list with values 1-5.  I would like the user to be able to select one of these numbers and it will display that number of select lists under each topic.

The solution is for rooms in a resort.  If the user selects a number of rooms from the select list at the top, then each resort they click below should display that many select list, one for each room.  I had tried creating nested div's and naming them the same, thinking that if I chose to show them by name it would display them all, but I found out it only shows the first one.

Does anyone know how to do this?  Here is my page.  Thank you for any help you can provide.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Resorts</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="tracs_global.css" rel="stylesheet" type="text/css">
<script language="javascript">

function toggleLayer(whichLayer)
{
if (document.getElementById)
{
// this is the way the standards work
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"block";
}
else if (document.all)
{
// this is the way old msie versions work
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"block";
}
else if (document.layers)
{
// this is the way nn4 works
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"block";
}
}

</script>





<style type="text/css">
<!--

div#roomselectsa
{
margin: 0px 20px 0px 20px;
display: none;
}

div#roomselectsb
{
margin: 0px 20px 0px 20px;
display: none;
}

div#roomselectsc
{
margin: 0px 20px 0px 20px;
display: none;
}

div#roomselectsd
{
margin: 0px 20px 0px 20px;
display: none;
}

div#roomselectse
{
margin: 0px 20px 0px 20px;
display: none;
}

div#roomselectsf
{
margin: 0px 20px 0px 20px;
display: none;
}

div#roomselectsg
{
margin: 0px 20px 0px 20px;
display: none;
}

div#roomselectse
{
margin: 0px 20px 0px 20px;
display: none;
}

div#roomselectsh
{
margin: 0px 20px 0px 20px;
display: none;
}

div#roomselectsi
{
margin: 0px 20px 0px 20px;
display: none;
}


-->
</style>
</head>

<body>
<table width="781" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>
<form name="resort" method="post" action="resort_verify.php">  
<table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td valign="top">
          <p>&nbsp;</p>          <table width="100%" height="45" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td>&nbsp;</td>
            </tr>
          </table>          <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td height="220" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
    <td valign="bottom" class="content"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="60" class="content"># Rooms</td>
        <td><select name="select" onchange="updateFields(this);" >
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select></td>
      </tr>
    </table>
  </td>
    </tr>
  <tr valign="top">
      <td width="25"><input type="checkbox" name="hotel1" value="101" onClick="javascript:toggleLayer('roomselectsa');" >&nbsp;</td>
      <td width="260" class="content">Resort Name One
<div id="roomselectsa">
Room 1<select name="room_type1">
    <option value="1a">King</option>
    <option value="1b">Queen</option>
  </select>
</div>
  </td>
       </tr>

  <tr valign="top">
      <td width="25"><input type="checkbox" name="hotel2" value="101" onClick="javascript:toggleLayer('roomselectsb');" >&nbsp;</td>
      <td width="260" class="content">Resort Name One
<div id="roomselectsb">
Room 1<select name="room_type2">
    <option value="1a">King Suite</option>
    <option value="1b">Queen Suite</option>
  </select>
</div>
  </td>
       </tr>

  <tr valign="top">
      <td width="25"><input type="checkbox" name="hotel3" value="101" onClick="javascript:toggleLayer('roomselectsc');" >&nbsp;</td>
      <td width="260" class="content">Resort Name One
<div id="roomselectsc">
Room 1<select name="room_type3">
    <option value="1a">King NS</option>
    <option value="1b">QueenNS</option>
  </select>
</div>
  </td>
       </tr>


                  </table>
  </td>
                </tr>
            </table></td>
        </tr>
      <tr>
        <td valign="top">&nbsp;</td>
      </tr>
    </table>
</form>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
     <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p></td>
  </tr>
</table>
</body>
</html>
0
Comment
Question by:fmwebschool
  • 5
  • 3
9 Comments
 
LVL 15

Expert Comment

by:bpmurray
ID: 16915397
Well, the simple although clumsy way is to create a bunch of sections, not unlike what you already have here. In other words, you change the div roomselectsa to 5 divs, called roomselectsa1, roomselectsa2, ... roomselectsa5 and apply the same sort of logic you have already on your page.

A slicker solution is to create the divs on the fly using JavaScript, but that's a little trickier.

BTW, I think it's best to split this into 3 files: your CSS, your JavaScript and the markup.
0
 

Author Comment

by:fmwebschool
ID: 16915514
That's what I had tried using a name like roomselectsa1, roomselectsa2, ... roomselectsa5, but I couldn't figure out how to get it to apply to each of the resorts not just the first one.  How do I get the value that is selected in the number of rooms to effect several divs?

As a side note, I had originally dynamically generated the div names using php, but whenever I added a number to the names, it failed.  So I assumed I could not use a number in the div name.

Thanks,
Allyson
0
 
LVL 11

Expert Comment

by:mvan01
ID: 16915526
Hi fmwebschool,

I have not reviewed your code in detail, but here's an idea for you to work:

Create multiple divs for each resort as you suggested, but they need not be nested.
Name the divs and give them IDs like:
resortAroom1
resortAroom2
resortAroom3
resortBroom1
resortBroom2
resortBroom3
resortCroom1
resortCroom2
resortCroom3

Get a variable set for the resort, e.g.:
var thisResort='C';

Then, when they select, for example, 2 rooms:
var numRooms=2;

you'll run through a for loop, for ALL rooms at each selected resort:
for (var i=1; i<maxRooms; i++) {
   whichDiv = 'resort'+thisResort+'room'+i;
   if (i<=numRooms) {
      document.getElementById(whichDiv).style.display = 'block';
   } else {
      document.getElementById(whichDiv).style.display = 'none';
   }
}

As you wrote the code you sent above, I'm sure you can figure out how to implement this within your code.

Peace and joy.  mvan
0
 
LVL 11

Expert Comment

by:mvan01
ID: 16915894
Hi fmwebschool,

Incidentally, you could nest a for loop for hotels and rooms (tied a bit more to your code above):

Name the divs, instead, with IDs like this:
hotel1room1
hotel1room2
hotel1room3
hotel2room1
hotel2room2
hotel2room3
hotel3room1
hotel3room2
hotel3room3

Then you can use this:

for (var j=1; j<maxHotels; j++) {
   var hotelNum = 'hotel'+j;
   // create object: thisHotel , which can be tested for .checked (these refer to your checkboxes)
   var thisHotel = eval('document.resort.'+hotelNum);
   for (var i=1; i<maxRooms; i++) {
      var whichDiv = hotelNum+'room'+i;
      if (i<=numRooms) {
         document.getElementById(whichDiv).style.display = (thisHotel.checked)?'block':'none';
      } else {
         document.getElementById(whichDiv).style.display = 'none';
      }
   }
}

Note this is OK for a few hotels, because it runs through all hotels & all rooms whenever one change is made.  You don't want to do this for 100 resorts x 10 rooms (for example).  But it is thorough, and you can change the number of rooms & call this and it will run through all hotels & fix up the number of rooms.

Peace and joy.  mvan
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

Author Comment

by:fmwebschool
ID: 16917359
Hi Mvan,

Thank you for your code.  I am still struggling and am not sure where to put the for loop.  Also I'm not sure what determines which value for room number is selected.  How do I integrate what you are demonstrating with the code that I have?

Thanks for the help.
0
 
LVL 11

Expert Comment

by:mvan01
ID: 16923105
Hi fmwebschool,

You'd create a function, like: function updateFields(obj).  Put the routine in there.  Ahead of the function, you'd define your var maxRooms= and var maxHotels=.  Call it in the onclick of your select option 1 2 3 4 5 rooms.  You would also call it from the onclick in each of your resort checkboxes.  As I said, it goes through all hotels & all number of rooms, so is most appropriate for calling when the number of rooms is changed.  But it will also work to show or hide the appropriate resort div as well.

Let me know if you have further questions.  I must now finish my workday.

Peace and joy.  mvan
0
 
LVL 11

Expert Comment

by:mvan01
ID: 16923117
"now finish my workday"

... I mean, I'll check back in a few hours ...  mvan
0
 
LVL 11

Accepted Solution

by:
mvan01 earned 500 total points
ID: 16926528
Hi ,

OK.  I've integrated the code with your 3 hotel, 5 room example.  I pretty much left alone whatever didn't need to change in order to use the code as I wrote it.  I also moved the initial div css definitions into the same javascript function, as it already has the code to do all hotels and all rooms there was no need to create multiple versions (1 per div) of the same style.

I hope it's clear.

Peace and joy.  mvan


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Resorts</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="tracs_global.css" rel="stylesheet" type="text/css">

<script language="JavaScript" type="text/javascript">

var maxRooms = 5;
var maxHotels = 3;

function updateFields(obj) {
   if (typeof obj == 'undefined') {
      // this is used to preset the divs when called onload w/o an obj passed
      var numRooms = 0;
   } else {
      var numRooms = document.resort.select.value;
   }

   for (var j=1; j<=maxHotels; j++) {
      var hotelNum = 'hotel'+j;
      // create object: thisHotel , which can be tested for .checked (these refer to your checkboxes)
      var thisHotel = eval('document.resort.'+hotelNum);
      for (var i=1; i<=maxRooms; i++) {
         var whichDiv = hotelNum+'room'+i;
         if (i<=numRooms) {
            document.getElementById(whichDiv).style.display = (thisHotel.checked)?'block':'none';
         } else {
            document.getElementById(whichDiv).style.margin = '0px 20px 0px 20px';
            document.getElementById(whichDiv).style.display = 'none';
         }
      }
   }
}

</script>

</head>
<body onload="updateFields()">
<table width="781" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>
<form name="resort" method="post" action="resort_verify.php">  
<table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td valign="top">
          <p>&nbsp;</p>          <table width="100%" height="45" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td>&nbsp;</td>
            </tr>
          </table>          <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td height="220" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
    <td valign="bottom" class="content"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="60" class="content"># Rooms</td>
        <td><select name="select" onchange="updateFields(this);" >
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select></td>
      </tr>
    </table>
  </td>
    </tr>
  <tr valign="top">
      <td width="25"><input type="checkbox" name="hotel1" value="101" onClick="updateFields(this);" >&nbsp;</td>
      <td width="260" class="content">Resort Name One
      <div id="hotel1room1">
         Room 1<select name="hotel1room1">
            <option value="1a">King</option>
            <option value="1b">Queen</option>
         </select>
      </div>
      <div id="hotel1room2">
         Room 2<select name="hotel1room2">
            <option value="1a">King</option>
            <option value="1b">Queen</option>
         </select>
      </div>
      <div id="hotel1room3">
         Room 3<select name="hotel1room3">
            <option value="1a">King</option>
            <option value="1b">Queen</option>
         </select>
      </div>
      <div id="hotel1room4">
         Room 4<select name="hotel1room4">
            <option value="1a">King</option>
            <option value="1b">Queen</option>
         </select>
      </div>
      <div id="hotel1room5">
         Room 5<select name="hotel1room5">
            <option value="1a">King</option>
            <option value="1b">Queen</option>
         </select>
      </div>
  </td>
       </tr>

  <tr valign="top">
      <td width="25"><input type="checkbox" name="hotel2" value="101" onClick="updateFields(this);" >&nbsp;</td>
      <td width="260" class="content">Resort Name Two
      <div id="hotel2room1">
         Room 1<select name="hotel2room1">
            <option value="1a">King</option>
            <option value="1b">Queen</option>
         </select>
      </div>
      <div id="hotel2room2">
         Room 2<select name="hotel2room2">
            <option value="1a">King</option>
            <option value="1b">Queen</option>
         </select>
      </div>
      <div id="hotel2room3">
         Room 3<select name="hotel2room3">
            <option value="1a">King</option>
            <option value="1b">Queen</option>
         </select>
      </div>
      <div id="hotel2room4">
         Room 4<select name="hotel2room4">
            <option value="1a">King</option>
            <option value="1b">Queen</option>
         </select>
      </div>
      <div id="hotel2room5">
         Room 5<select name="hotel2room5">
            <option value="1a">King</option>
            <option value="1b">Queen</option>
         </select>
      </div>
  </td>
       </tr>

  <tr valign="top">
      <td width="25"><input type="checkbox" name="hotel3" value="101" onClick="updateFields(this);" >&nbsp;</td>
      <td width="260" class="content">Resort Name Three
      <div id="hotel3room1">
         Room 1<select name="hotel3room1">
            <option value="1a">King</option>
            <option value="1b">Queen</option>
         </select>
      </div>
      <div id="hotel3room2">
         Room 2<select name="hotel3room2">
            <option value="1a">King</option>
            <option value="1b">Queen</option>
         </select>
      </div>
      <div id="hotel3room3">
         Room 3<select name="hotel3room3">
            <option value="1a">King</option>
            <option value="1b">Queen</option>
         </select>
      </div>
      <div id="hotel3room4">
         Room 4<select name="hotel3room4">
            <option value="1a">King</option>
            <option value="1b">Queen</option>
         </select>
      </div>
      <div id="hotel3room5">
         Room 5<select name="hotel3room5">
            <option value="1a">King</option>
            <option value="1b">Queen</option>
         </select>
      </div>
  </td>
       </tr>


                  </table>
  </td>
                </tr>
            </table></td>
        </tr>
      <tr>
        <td valign="top">&nbsp;</td>
      </tr>
    </table>
</form>
    <p>&nbsp;</p></td>
  </tr>
</table>
</body>
</html>
0
 

Author Comment

by:fmwebschool
ID: 17033251
Thank you mvan.  That worked beautifully.  I was able to integrate it with the rest of my page and it's exactly what I wanted.

Have a great day!!
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now