SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jul 2002
    Location
    Sooner Nation
    Posts
    208
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    show / hide - toggle tutorial

    I found a lot of tutorials that use two different buttons to hide and show div's but I want one that basically toggles a section almost like this

    http://www.sitepoint.com/article/1166

    See the menu on the right you can show or hide and the page expands when it is hidden.
    The only function of business is to create customer value and to innovate. - Peter Drucker

  2. #2
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would use the following. It works in modern browsers (anything that supports document.getElementById, which is basically anything released after Netscape 4) and degrade gracefully in other browsers by not hiding the div if javascript is unavailable.

    Code:
    <script type="text/javascript">
    /* This goes in the head section */
    window.onload = function() { document.getElementById('hideable').style.display = 'none'; }
    
    function toggle(link, divid) {
        var div = document.getElementById(divid);
        if (div.style.display == 'none') {
            div.style.display = 'block';
            link.innerHTML = 'Hide Div';
        } else {
            div.style.display = 'none';
            link.innerHTML = 'Show Div';
        }
    }
    </script>
    
    <div id="hideable">
    This div can be shown and hidden
    </div>
    
    <a href="#hideable" onclick="toggle(this, 'hideable'); return false;">Show Div</a>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •