Expand / Collapse Javascript code

Discussion in 'OT Technology' started by morgue, Apr 22, 2007.

  1. morgue

    morgue New Member

    Joined:
    Jul 10, 2004
    Messages:
    8,278
    Likes Received:
    0
    here is the javascript ...

    function toggleList(id){
    if(document.getElementById){
    var element = document.getElementById(id);
    if(element){
    element.style.display =(element.style.display == 'none')?'':'none';
    }}}

    applied to ul div...

    <h2>Expand -Collapse</h2> <a href="javascript:toggleList('idname')">[+/-]</a></strong>
    <ul id="idname" style="display:block">
    <li><a href="#html" target="_self">Number One</a></li>
    <li><a href="amana.html" target="_self">Number 2</a></li>
    <li><a href="baumatic.html" target="_self">Number 3</a></li></ul>

    Now, how would I make it so, it starts "collapsed"???

    This works but starts expanded... suggestions?
     
  2. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    quick-n-dirty:

    use the onload() event to run toggleList()?
     
  3. morgue

    morgue New Member

    Joined:
    Jul 10, 2004
    Messages:
    8,278
    Likes Received:
    0
    doesn't work
     
  4. Supergeek

    Supergeek New Member

    Joined:
    Jan 23, 2007
    Messages:
    1,855
    Likes Received:
    0
    Location:
    Colorado
    nevermind, that didn't work.
     
  5. Supergeek

    Supergeek New Member

    Joined:
    Jan 23, 2007
    Messages:
    1,855
    Likes Received:
    0
    Location:
    Colorado
    Ok, I rewrote it and it starts collapsed.
    Code:
    function toggleList(id) {
        if(document.getElementById) {
            var element = document.getElementById(id);
            if (element) {
                if (element.style.display == 'block') {
                    document.getElementById(id).style.display = 'none';
                } else {
                    document.getElementById(id).style.display = 'block';
                }
            }
        }
    }
    
    </script>
    <body>
    
    <h2>Expand -Collapse</h2> <a href="javascript:toggleList('idname')">[+/-]</a></strong>
    <ul id="idname" style="display:none">
    <li><a href="#html" target="_self">Number One</a></li>
    <li><a href="amana.html" target="_self">Number 2</a></li>
    
    What is this syntax called? I've seen similar stuff in C, Perl, PHP, but I don't remember what it's called:
    Code:
    [B] element.style.display =(element.style.display == 'none')?'':'none';
    [/B]
     
  6. Supergeek

    Supergeek New Member

    Joined:
    Jan 23, 2007
    Messages:
    1,855
    Likes Received:
    0
    Location:
    Colorado
    The variable assignment is kind of redundant. You could do it like this:
    Code:
    function toggleList(id) {
        if (document.getElementById) {
                if (document.getElementById(id).style.display == 'block') {
                    document.getElementById(id).style.display = 'none';
                } else {
                    document.getElementById(id).style.display = 'block';
                }
        }
    }
    
    I just recently learned Javascript, so this is a good exercise for me.
     
  7. gnp

    gnp New Member

    Joined:
    Mar 11, 2007
    Messages:
    280
    Likes Received:
    0
    tertiary operator; basically an if then else inline;
     
  8. Supergeek

    Supergeek New Member

    Joined:
    Jan 23, 2007
    Messages:
    1,855
    Likes Received:
    0
    Location:
    Colorado
    Tertiary--thanks. I knew what its function was, just couldn't remember what it was called.
     

Share This Page