show hide divs

Question

socalfoolina 0 Newbie Poster

15 Years Ago

Hi,

I'm new at javascript. I'm looking for help with the code below. I am trying to create a nav bar with opening and closing divs (vertical tab menu). However I'd like to have the ability for the user not to have to close the div in order to select the next div. Is there any action i can add to the code below to enable this function? Thank you.

<script type="text/javascript">
function unhide(divID) {
  var item = document.getElementById(divID);
  if (item) {
    item.className=(item.className=='hidden')?'unhidden':'hidden';
  }
}*/
</script> 


<div id="FabNav">

    <div id="fb-tab" class="tab-header"><a href="javascript:unhide('fb-description');" class="button">Dropdown One</a></div>
    <div id="fb-description" class="hidden">
        <table width="512px" border="1" bordercolor="#666666" cellspacing="0" cellpadding="0">
          <tr>
            <td>

</div>

    <div id="fb-tab" class="tab-header"><a href="javascript:unhide('fb-description');" class="button">Dropdown Two</a></div>
    <div id="fb-description" class="hidden">
        <table width="512px" border="1" bordercolor="#666666" cellspacing="0" cellpadding="0">
          <tr>
            <td>

</div>

</div>

javascript

Edited 11 Years Ago by mike_2000_17 because: Fixed formatting

4 Contributors
5 Replies
132 Views
2 Days Discussion Span
Latest Post 15 Years Ago Latest Post by essential

jarn 0 Newbie Poster

15 Years Ago

go over to my coding examples at:
http://www.datacorner.com/coding/doCallTime.txt

look for the getObj function...is a cross-browser version of your document.getElementById. getObj will return the element reference.

Then look for the showDbg and hideDbg functions. Given a valid element reference, they show you how to modify the style parameter to make elements visible or hidden.

essential 84 Posting Shark

15 Years Ago

Or you could also try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>http://www.daniweb.com</title>
<style type="text/css">
<!--
.hidden { display : none }
.unhidden { display : block }
-->
</style>
<script type="text/javascript">
<!--

var unhide = ( function() {
var save = [ ];
  return unhide = function( divID ) {
var ie, ff;
var divID = divID || null;   
/* http://www.daniweb.com/

NOTICE: 
- I am not imposing anyone to use this script, i'm just doing what i know is right and what is good for your browser. */

   var ua = ((( ie = document.all[ divID ] ) && !!!( ff = document.getElementById( divID ))) ? 1 : 0 ); 
   var item = null || { 0 : ff, 1 : ie }[ ua ];
   var saved = 0 || save[ 0 ];
   if ( saved && saved.id === item.id ) {
      return false; 
   } else {
      if ( saved ) {
       saved.className = "hidden"; 
      } item.className = (( item.className !== "unhidden" ) ? "unhidden" : "hidden" );
      save[ 0 ] = item;   
      } return;
   } // Exit Function;
} )( );
// -->
</script>
</head>
<body>
<div id="FabNav">
<div id="fb-tab" class="tab-header"><a href="javascript:void(0);" onclick="unhide('fb-description0');">Dropdown One</a></div>
<div id="fb-description0" class="hidden">
<table width="512" border="1" cellspacing="0" cellpadding="0">
<tr><td><h3>Dropdown ONE</h3></td></tr>
</table>
</div>
<div id="fb-tab" class="tab-header"><a href="javascript:void(0);" onclick="unhide('fb-description1');">Dropdown Two</a></div>
<div id="fb-description1" class="hidden">
<table width="512" border="1" cellspacing="0" cellpadding="0">
<tr><td><h3>Dropdown TWO</h3></td></tr>
</table>
</div>
<div id="fb-tab" class="tab-header"><a href="javascript:void(0);" onclick="unhide('fb-description2');">Dropdown Three</a></div>
<div id="fb-description2" class="hidden">
<table width="512" border="1" cellspacing="0" cellpadding="0">
<tr><td><h3>Dropdown THREE</h3></td></tr>
</table>
</div>
</div>
</body>
</html>

hope it both helped...

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

socalfoolina 0 Newbie Poster · Answer 1 · 2009-07-29T21:09:41+00:00

Thanks for you both for your help!

-essential

One more thing. The code you supplied is almost what I'm looking. Leaving is just as it is, can we add the functionality of having the clicked div collapsible as well?

I'm creating a page the will always show with a tab nav bar to the right, which I'd like to show and hide the tabs but have the functionality that if the user selects another tab in the nav bar the other will close but also be able to be close as well - so the the main page is viewable. I tried to word this as clearly as I can. Thanks again!

SoN9ne 0 Light Poster · Answer 2 · 2009-07-30T03:58:53+00:00

Another way to achieve the same effect without using CSS is to do
item.style.display = 'none'; // Hides
or
item.style.display = ''; // Shows

you can get the collapse effect with jquery or any other library for that matter. That would be the easiest.
To get the effect so it will close the other tabs you could just add
document.getElementById(divID).style.display = 'none';
to the trigger function and add the id for each item.

essential 84 Posting Shark Featured Poster · Answer 3 · 2009-07-31T14:17:06+00:00

Hi socalfoolina,

here's your requested script, that comes with a pretty basic lines that you can easliy expand and use. With No fancy statements on it...

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>DropDownDemo</title>
      <style type="text/css">
      <!--
      div {
        border : none;
        margin : 0;
        padding : 0;
      }
      .unhidden { 
        display : block;
      }
      .hidden { 
        display : none;
      }
      -->
      </style>
      <script type="text/javascript">
      <!--
      var save = ( [] );
      var unhide = ( function( divID ) {
      var item;
      var ie = 1;
      var divID = divID || 0;
      if ( divID ) {
        (( item = document.getElementById( divID )) ? ie = 0 : item = document.all[ divID ] );
      if ( save[ 0 ] && save[ 0 ].id !== String ( item.parentNode.id )) {
         var isParent = save[ 0 ].parentNode;
         var node = isParent.childNodes;
         var nType;
         for ( i = 0; i < node.length; i++ ) {
         nType = node[ i ].nodeType;
            if ( nType === 1 || nType === Node.ELEMENT_NODE ) {
               if ( node[ i ].hasAttribute( "class" )) {
                  node[ i ].className = "hidden";
                  continue;
               }
            } 
         }
      } item.className = (( item.className === "unhidden" ) ? "hidden" : "unhidden" );
         if ( item.id.indexOf( "cat" ) !== -1 ) {
         save[ 0 ] = item;
         } return; 
      } return false;
      } );
      // -->
      </script>
   </head>
   <body>
      <div id="panel">
      <div onclick="unhide('cat0')">List 1</div>
         <div id="cat0" class="hidden">
            <div onclick="unhide('sub0');">List Item #1</div>
               <ol id="sub0" class="hidden">
                  <li><a href="#">Sub1 Item #1</a></li>
                  <li><a href="#">Sub1 Item #2</a></li>
                  <li><a href="#">Sub1 Item #3</a></li>                </ol>
            <div onclick="unhide('sub1');">List Item #2</div>
               <ol id="sub1" class="hidden">
                  <li><a href="#">Sub2 Item #1</a></li>
                  <li><a href="#">Sub2 Item #2</a></li>
                  <li><a href="#">Sub2 Item #3</a></li>                </ol>
            
            </div>
      <div onclick="unhide('cat1')">List 2</div>
         <div id="cat1" class="hidden">            <div onclick="unhide('sub3');">List Item #1</div>
               <ol id="sub3" class="hidden">
                  <li><a href="#">Sub1 Item #1</a></li>
                  <li><a href="#">Sub1 Item #2</a></li>
                  <li><a href="#">Sub1 Item #3</a></li>                </ol>
            <div onclick="unhide('sub4');">List Item #1</div>
               <ol id="sub4" class="hidden">
                  <li><a href="#">Sub2 Item #1</a></li>
                  <li><a href="#">Sub2 Item #2</a></li>
                  <li><a href="#">Sub2 Item #3</a></li>                </ol>

</div>
      <div onclick="unhide('cat2')">List 3</div>
         <div id="cat2" class="hidden">            <div onclick="unhide('sub5');">List Item #1</div>
               <ol id="sub5" class="hidden">
                  <li><a href="#">Sub1 Item #1</a></li>
                  <li><a href="#">Sub1 Item #2</a></li>
                  <li><a href="#">Sub1 Item #3</a></li>                </ol>
         </div>
      </div>
   </body>
</html>