show/hide javascript

Discussion in 'Javascript' started by dylanb, May 9, 2008.

  1. dylanb

    dylanb Guest

    Hi can anyone tell me how to alter this script so it will works on
    classes and id's;
    <script>
    function showhide(id){
    if (document.getElementById){
    obj = document.getElementById(id);
    if (obj.style.display == "none"){
    obj.style.display = "";
    } else {
    obj.style.display = "none";
    }
    }
    }
    </script>

    its called by;

    <a href="javascript:void(0)" onmouseover="showhide('divname')">
    link</a>

    <div style="display: none;" id="divname">
    some content
    </div>

    I just need to make it work on div classes
     
    dylanb, May 9, 2008
    #1
    1. Advertising

  2. dylanb wrote:
    > Hi can anyone tell me how to alter this script so it will works on
    > classes and id's;
    > <script>


    <script type="text/javascript">

    > function showhide(id){
    > if (document.getElementById){
    > obj = document.getElementById(id);
    > if (obj.style.display == "none"){
    > obj.style.display = "";
    > } else {
    > obj.style.display = "none";
    > }
    > }
    > }


    A bit more indentation would make this script legible, but not good.
    For example, `obj' was not declared and so is not local; it should be

    var obj = ...

    instead.

    > </script>
    >
    > its called by;
    >
    > <a href="javascript:void(0)" onmouseover="showhide('divname')">
    > link</a>


    Should be at least

    <script type="text/javascript">
    document.write('<a href="javascript:void(0)" onclick="return false"'
    + ' onmouseover="showhide(\'divname\')">link<\/a>');
    </script>

    so that no-script users are not bothered with a non-working element.

    > <div style="display: none;" id="divname">
    > some content
    > </div>


    It is a really bad idea to hide content first. This way it will stay
    inaccessible when there is insufficient script and DOM support available.

    > I just need to make it work on div classes


    Since unlike an ID a CSS class may be used for several elements in a
    document, the solution is a not a trivial one. See e.g.
    dhtml.getElemByClassName() in http://PointedEars.de/scripts/dhtml.js

    Another way is to apply the XPath expression `//*[@class="foo"]' on the BODY
    node or a decendant node, see <http://developer.mozilla.org/en/docs/XPath>.
    (This will be implemented in the next version of dhtml.js.)


    PointedEars
    --
    realism: HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness: XHTML 1.1 as application/xhtml+xml
    -- Bjoern Hoehrmann
     
    Thomas 'PointedEars' Lahn, May 9, 2008
    #2
    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. Lisa Calla
    Replies:
    1
    Views:
    3,545
    Kumar Reddi
    Nov 8, 2004
  2. Nestor
    Replies:
    6
    Views:
    44,264
    Kevin Spencer
    Apr 25, 2006
  3. Hedon
    Replies:
    0
    Views:
    462
    Hedon
    Feb 21, 2007
  4. Mic
    Replies:
    5
    Views:
    13,560
    Alexey Smirnov
    Aug 31, 2007
  5. ll
    Replies:
    2
    Views:
    653
    Thomas 'PointedEars' Lahn
    May 1, 2008
Loading...

Share This Page