Hide/Show Divs

Discussion in 'Javascript' started by question.boy@hotmail.com, Nov 18, 2008.

  1. Guest

    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://
    www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script language="javascript" type="text/javascript">
    function HideAll() {
    var DivName
    //Loop through each lette of the alphabet
    for (var i = 0; i < 26; i++) {
    //document.write(String.fromCharCode(i+65)+" ");
    //Hide the specified div
    DivName = String.fromCharCode(i+65);
    //alert(DivName);
    //document.getElementById(''+DivName+'').style.display=='none';
    document.getElementById('P').style.display=='none';
    }
    return false;
    }

    function ShowDiv() {

    }
    </script>
    </head>
    <body>
    <div id="outerWrapper">
    <div id="header">
    <p></p>
    </div>
    <p><SPAN onclick="JavaScript: return HideAll();">A</SPAN>-B-C-D-E-F-
    G-H-I-J-K-L-M-N-O-P-Q-R-S-T-U-V-W-X-Y-Z</p>
    </div>
    </body>
    </html>

    On a side note, working with javascript, how does a professional
    developer troubleshot functions etc? Are there any tools that permit
    evaluating variable, placing code breaks, outputing error codes/desc.,
    etc during execution?

    Thank you so very much for the enlightenment!

    QB
    , Nov 18, 2008
    #1
    1. Advertising

  2. Guest

    Sorry my HTML was incomplete. Here it is again

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://
    www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script language="javascript" type="text/javascript">
    function HideAll() {
    var DivName
    //Loop through each lette of the alphabet
    for (var i = 0; i < 26; i++) {
    //document.write(String.fromCharCode(i+65)+" ");
    //Hide the specified div
    DivName = String.fromCharCode(i+65);
    //alert(DivName);
    //document.getElementById(''+DivName
    +'').style.display=='none';
    document.getElementById('P').style.display=='none';
    }
    return false;



    }


    function ShowDiv() {


    }


    </script>
    </head>
    <body>
    <div id="outerWrapper">
    <div id="header">
    <p></p>
    </div>
    <p><SPAN onclick="JavaScript: return HideAll();">A</SPAN>-B-C-D-E-
    F-
    G-H-I-J-K-L-M-N-O-P-Q-R-S-T-U-V-W-X-Y-Z</p>
    <div id="M"><p>M text goes here</p></div>
    <div id="P"><p>P text goes here</p></div>
    </div>
    </body>
    </html>
    , Nov 18, 2008
    #2
    1. Advertising

  3. Guest

    On Nov 17, 9:42 pm, wrote:
    > Sorry my HTML was incomplete.  Here it is again
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    > <html xmlns="http://www.w3.org/1999/xhtml">
    > <head>
    > <script language="javascript" type="text/javascript">
    > function HideAll() {
    >         var DivName
    >         //Loop through each lette of the alphabet
    >         for (var i = 0; i < 26; i++) {
    >                 //document.write(String.fromCharCode(i+65)+" ");
    >                 //Hide the specified div
    >                 DivName = String.fromCharCode(i+65);
    >                 //alert(DivName);
    >                 //document.getElementById(''+DivName
    > +'').style.display=='none';
    >                 document.getElementById('P').style.display=='none';
    >         }
    >         return false;
    >
    > }
    >
    > function ShowDiv() {
    >
    > }
    >
    > </script>
    > </head>
    > <body>
    > <div id="outerWrapper">
    >   <div id="header">
    >     <p></p>
    >   </div>
    >    <p><SPAN onclick="JavaScript: return HideAll();">A</SPAN>-B-C-D-E-
    > F-
    > G-H-I-J-K-L-M-N-O-P-Q-R-S-T-U-V-W-X-Y-Z</p>
    >   <div id="M"><p>M text goes here</p></div>
    >   <div id="P"><p>P text goes here</p></div>
    > </div>
    > </body>
    > </html>


    Never mind. It was an extra =!!!!

    document.getElementById('P').style.display=='none';
    should be
    document.getElementById('P').style.display='none';
    , Nov 18, 2008
    #3
  4. Reply at bottom

    <> wrote in message
    news:...
    >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.
    >
    > [snip]
    >
    > On a side note, working with javascript, how does a professional
    > developer troubleshot functions etc? Are there any tools that permit
    > evaluating variable, placing code breaks, outputing error codes/desc.,
    > etc during execution?
    >
    > Thank you so very much for the enlightenment!
    >
    > QB


    I didn't look at the two later posts but try this

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
    www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>

    <script type="text/javascript">
    function init(){
    var HTML = '<p>Click letter to show relevant division</p>'
    for (var i = 0; i < 26; i++) {
    var letter = String.fromCharCode(i+65);
    HTML += '<SPAN id="hide' + letter + '" onclick="hideAll(\'' + letter +
    '\');"><u>' + letter + '</u></SPAN>';
    HTML += (i<25) ? '-':''
    }
    document.getElementById('alphabet').innerHTML = HTML;
    }

    function hideAll(divSelected) {
    //Loop through each letter of the alphabet
    for (var i = 0; i < 26; i++) {
    // Show the specified div ; Hide all othere
    var DivName = String.fromCharCode(i+65);
    document.getElementById(DivName).style.display
    = (divSelected==DivName)?'':'none';
    }
    return false;
    }
    </script>

    </head>
    <body onload="init();hideAll(0)">
    <div id="outerWrapper">
    <div id="header">
    <p></p>
    </div>

    <div id="alphabet"></div>

    <div id="A">Div A</div>
    <div id="B">Div B</div>
    <div id="C">Div C</div>
    <div id="D">Div D</div>
    <div id="E">Div E</div>
    <div id="F">Div F</div>
    <div id="G">Div G</div>
    <div id="H">Div H</div>
    <div id="I">Div I</div>
    <div id="J">Div J</div>
    <div id="K">Div K</div>
    <div id="L">Div L</div>
    <div id="M">Div M</div>
    <div id="N">Div N</div>
    <div id="O">Div O</div>
    <div id="P">Div P</div>
    <div id="Q">Div Q</div>
    <div id="R">Div R</div>
    <div id="S">Div S</div>
    <div id="T">Div T</div>
    <div id="U">Div U</div>
    <div id="V">Div V</div>
    <div id="W">Div W</div>
    <div id="X">Div X</div>
    <div id="Y">Div Y</div>
    <div id="Z">Div Z</div>
    Some extra stuff (not hidden)
    </div>
    </body>
    </html>

    --
    Trevor Lawrence
    Canberra
    Web Site http://trevorl.mvps.org
    Trevor Lawrence, Nov 18, 2008
    #4
  5. Num GG Guest

    > On a side note, working with javascript, how does a professional
    > developer troubleshot functions etc?  Are there any tools that permit
    > evaluating variable, placing code breaks, outputing error codes/desc.,
    > etc during execution?
    >
    > Thank you so very much for the enlightenment!
    >
    > QB

    For this: Just install Firefox and the plugin named Firebug...
    You'll get it! (break points, step by step running, spies on variables
    and so on...)

    Cheers

    Num
    Num GG, Nov 18, 2008
    #5
  6. David Mark Guest

    On Nov 17, 10:34 pm, "Trevor Lawrence" <Trevor L.@Canberra> wrote:
    > Reply at bottom
    >
    > <> wrote in message
    >
    > news:...
    >
    >
    >
    > >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.

    >
    > > [snip]

    >
    > > On a side note, working with javascript, how does a professional
    > > developer troubleshot functions etc?  Are there any tools that permit
    > > evaluating variable, placing code breaks, outputing error codes/desc.,
    > > etc during execution?

    >
    > > Thank you so very much for the enlightenment!

    >
    > > QB

    >
    > I didn't look at  the two later posts but try this
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    > <html xmlns="http://www.w3.org/1999/xhtml">
    > <head>
    >
    > <script type="text/javascript">
    > function init(){
    >   var HTML = '<p>Click letter to show relevant division</p>'
    >   for (var i = 0; i < 26; i++) {
    >     var letter = String.fromCharCode(i+65);
    >     HTML += '<SPAN id="hide' + letter + '" onclick="hideAll(\''+ letter +
    > '\');"><u>' + letter  + '</u></SPAN>';
    >     HTML += (i<25) ? '-':''
    >   }
    >   document.getElementById('alphabet').innerHTML = HTML;


    You are replacing perfectly good static markup with some sort of
    scripted faux links, using deprecated markup and a non-standard
    property assignment. Just make them links (to bookmarks "A" through
    "Z") to start with. If you detect getEBI and can find the "alphabet"
    div, then attach a click listener to it (or use onclick) and delegate
    from there.

    [snip]
    David Mark, Nov 19, 2008
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. middletree
    Replies:
    0
    Views:
    588
    middletree
    Oct 25, 2005
  2. Mike P
    Replies:
    7
    Views:
    917
  3. Mike P

    show/hide divs on checkbox click

    Mike P, Nov 14, 2007, in forum: ASP General
    Replies:
    1
    Views:
    242
    Dooza
    Nov 14, 2007
  4. Frances
    Replies:
    3
    Views:
    108
    Randy Webb
    Sep 9, 2005
  5. ll
    Replies:
    2
    Views:
    643
    Thomas 'PointedEars' Lahn
    May 1, 2008
Loading...

Share This Page