Expandable html

Discussion in 'Javascript' started by Doug, Apr 18, 2005.

  1. Doug

    Doug Guest

    Hi -
    I'm looking to code some javascript that has an event handler tied to
    an image ("a down arrow") that will expand code that was hidden on the
    page load. It's pretty simple, I have an accessories html table that I
    want to load in the html but hide to save page real estate until you
    click the "down arrow" image. I know I've seen stuff like this before,
    can anyone point me to an example of this or give me an idea of how to
    code it?

    Thanks, Doug
     
    Doug, Apr 18, 2005
    #1
    1. Advertising

  2. In article <>,
    says...
    > Hi -
    > I'm looking to code some javascript that has an event handler tied to
    > an image ("a down arrow") that will expand code that was hidden on the
    > page load. It's pretty simple, I have an accessories html table that I
    > want to load in the html but hide to save page real estate until you
    > click the "down arrow" image. I know I've seen stuff like this before,
    > can anyone point me to an example of this or give me an idea of how to
    > code it?


    <div>
    "display" CSS property
    getElementById()

    --
    Hywel
     
    Hywel Jenkins, Apr 18, 2005
    #2
    1. Advertising

  3. Doug

    DesignerNut Guest

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Expandable Menus Demo (johnzeratsky.com)</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="keywords" content="" />
    <style type="text/css">
    <!--

    span.expandLink {
    font-size: 70%;
    color: #333; }

    span.expandLink a {
    color: #333; }

    -->
    </style>

    <script type="text/javascript">
    function toggleSub(submenu) {
    if (document.getElementById(submenu).style.display == 'none') {
    document.getElementById(submenu).style.display = 'block'
    } else {
    document.getElementById(submenu).style.display = 'none'
    }
    }
    </script>

    </head>
    <body>


    <div id="sitenav">
    <h1>Expandable Menu Demo</h1>

    <h2>Foods you grow</h2>
    <ul>
    <li>
    <a href="#">Vegetables</a> <span class="expandLink">(<a href="#"
    onclick="toggleSub('vegMore'); return false">toggle</a>)</span>
    <ul id="vegMore" style="display: none;">
    <li><a href="#">Celery</a></li>
    <li><a href="#">Carrots</a></li>
    <li><a href="#">Broccoli</a></li>
    </ul>
    </li>
    <li>
    <a href="#">Fruits</a> <span class="expandLink">(<a href="#"
    onclick="toggleSub('fruitMore'); return false">toggle</a>)</span>
    <ul id="fruitMore" style="display: none;">
    <li><a href="#">Apple</a></li>
    <li><a href="#">Banana</a></li>
    <li><a href="#">Tomato?</a></li>
    </ul>
    </li>

    <li>
    <a href="#">Other</a> <span class="expandLink">(<a href="#"
    onclick="toggleSub('otherMore'); return false">toggle</a>)</span>
    <ul id="otherMore" style="display: none;">
    <li><a href="#">Mushrooms</a></li>
    <li><a href="#">Beef</a></li>
    <li><a href="#">Salmon</a></li>
    </ul>
    </li>

    <li><a href="#">Tips for Growing</a></li>

    <li>
    <a href="#">Contact</a> <span class="expandLink">(<a href="#"
    onclick="toggleSub('contactMore'); return false">toggle</a>)</span>
    <ul id="contactMore" style="display: none;">
    <li><a href="#"></a></li>
    <li>(608) 555-1234</li>
    </ul>
    </li>
    </ul>
    </div>
    <!-- end sitenav -->


    </body>
    </html>
     
    DesignerNut, Apr 19, 2005
    #3
  4. Doug

    RobB Guest

    Doug wrote:
    > Hi -
    > I'm looking to code some javascript that has an event handler tied to
    > an image ("a down arrow") that will expand code that was hidden on

    the
    > page load. It's pretty simple...


    Easy for you to say. #:-0


    > I have an accessories html table that I
    > want to load in the html but hide to save page real estate until you
    > click the "down arrow" image. I know I've seen stuff like this

    before,
    > can anyone point me to an example of this or give me an idea of how

    to
    > code it?
    >
    > Thanks, Doug


    Maybe...

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <base href="http://www.grsites.com/webgraphics/arrows/oy/">
    <style type="text/css">

    td.arrow {
    width: 20px;
    height: 20px;
    cursor: pointer;
    vertical-align: top;
    text-align: center;
    padding-top: 8px;
    border: 1px #aa0 solid;
    background: #aaa;
    }
    td.content {
    width: 300px;
    height: 20px;
    font: 12px arial;
    padding: 6px;
    border: 1px #000 solid;
    background: #ddd;
    }
    td h5 {
    font: 11px arial;
    letter-spacing: .5em;
    margin: 0 0 8px 4px;
    }
    td div {
    display: none;
    }
    #pload {
    background: url(arrows_oy_026.gif);
    display: none;
    }

    </style>
    <script type="text/javascript">

    function init()
    {
    var t, td, tds, i = 0;
    if (document.getElementById
    && (t = document.getElementById('foo'))
    && (tds = t.getElementsByTagName('td')))
    {
    while (td = tds.item(i++))
    {
    td.onclick = function()
    {
    var img = this.getElementsByTagName('img').item(0);
    var div = this.parentNode.getElementsByTagName('div').item(0);
    if (img && div)
    {
    var bWhich = /((^$)|(none))/.test(div.style.display);
    div.style.display = bWhich ? 'block' : 'none';
    img.src = bWhich ?
    'arrows_oy_025.gif' : 'arrows_oy_026.gif';
    }
    }
    }
    }
    }

    window.onload = init;

    </script>
    </head>
    <body>
    <span id="pload"></span>
    <table id="foo">
    <tbody>
    <tr>
    <td class="arrow">
    <img
    src="http://www.grsites.com/webgraphics/arrows/oy/arrows_oy_026.gif">
    </td>
    <td class="content">
    <h5>Item 1</h5>
    <div>
    ....blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah....
    </div>
    </td>
    </tr>
    <tr>
    <td class="arrow">
    <img
    src="http://www.grsites.com/webgraphics/arrows/oy/arrows_oy_026.gif">
    </td>
    <td class="content">
    <h5>Item 2</h5>
    <div>
    ....blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah....
    </div>
    </td>
    </tr>
    <tr>
    <td class="arrow">
    <img
    src="http://www.grsites.com/webgraphics/arrows/oy/arrows_oy_026.gif">
    </td>
    <td class="content">
    <h5>Item 3</h5>
    <div>
    ....blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah....
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>
     
    RobB, Apr 19, 2005
    #4
  5. DesignerNut wrote:
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    > <head>
    > <title>Expandable Menus Demo (johnzeratsky.com)</title>
    > <meta http-equiv="content-type" content="text/html;charset=utf-8" />


    Such a character set declaration is unnecessary in XHTML (especially
    when it is "utf-8") since an XML parser will ignore that; the character
    encoding used is to be specified in a XML processing instruction.
    However, even this is only necessary if that encoding differs from UTF-8:

    <http://www.w3.org/TR/xhtml1/#strict>
    <http://www.w3.org/TR/xhtml1/#C_9>

    > <meta name="keywords" content="" />
    > <style type="text/css">
    > <!--
    >
    > span.expandLink {
    > font-size: 70%;
    > color: #333; }
    >
    > span.expandLink a {
    > color: #333; }
    >
    > -->
    > </style>


    Since this so far Valid Strict XHTML 1.0, it is likely that you somewhat
    disable the `style' element by commenting out its content. An XML
    parser is allowed to remove comments before building the parse tree:

    <http://www.w3.org/TR/2004/REC-xml-20040204/#sec-comments>

    Furthermore, the `style' element is not supposed to work anyway here; in
    XML applications, the stylesheet has to be linked to the document using
    an XML processing instruction:

    <http://www.w3.org/TR/xhtml1/#C_13>

    > <script type="text/javascript">
    > function toggleSub(submenu) {
    > if (document.getElementById(submenu).style.display == 'none') {


    This kind of referencing is known to be error-prone; features
    (non-backwards compatible objects and their properties) should
    be tested for prior to usage.

    > [...]
    > <li>
    > <a href="#">Vegetables</a> <span class="expandLink">(<a href="#"
    > onclick="toggleSub('vegMore'); return false">toggle</a>)</span>


    This menu is not going to work without client-side scripting, if that,
    although that would have been possible if created by a competent author.

    > [...]



    PointedEars
     
    Thomas 'PointedEars' Lahn, May 1, 2005
    #5
    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. Rathtap
    Replies:
    0
    Views:
    410
    Rathtap
    Jun 23, 2004
  2. summer00
    Replies:
    0
    Views:
    309
    summer00
    Mar 9, 2005
  3. Edwin Knoppert
    Replies:
    0
    Views:
    4,377
    Edwin Knoppert
    Nov 29, 2005
  4. Andrew Ng
    Replies:
    1
    Views:
    352
    Gerbrand van Dieijen
    Oct 12, 2003
  5. Nico Schuyt

    Expandable menu

    Nico Schuyt, Jan 9, 2004, in forum: HTML
    Replies:
    2
    Views:
    2,395
    Nico Schuyt
    Jan 10, 2004
Loading...

Share This Page