SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Toggle hidden content

    I'm looking for some javascript that'll toggle hidden content.

    As I'm not experienced in this, I want something which is cross-browser reliable - and I'm having trouble finding something suitable.

    Jquery has been suggested as an option... and I found something which appeared to do the job, apart from not validating as it uses a span to include the toggled content - which is a problem as I need to included block level stuff to be hidden.

    Also, it came as two buttons - show and hide - and I'd prefer a single button, or preferably a normal html link.

  2. #2
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Assign id to item that you want to hide, then change its style.

    With jQuery: $('#item').toggle();

    Without jQuery: var item = document.getElementById('item'); item.style.display = (item.style.display == 'none') ? '' : 'none';

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.
    Can you please work that into some code I can cut/paste - I don't have the knowledge to do it myself.

  4. #4
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change that block level stuff from something like
    Code:
    <div>Your stuff</div>
    to
    Code:
    <div id="toggle-stuff" style="display: none;">Your stuff</div>
    Then add a link like this:
    Code:
    <a href="javascript:void(0);" onclick="var item = document.getElementById('toggle-stuff'); item.style.display = (item.style.display == 'none') ? '' : 'none'; return false;">Toggle stuff</a>

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.

    So, if I wanted to use jQuery, would this be the correct code?

    Code:
    <a href="#" onclick="$('#toggle=stuff').toggle(); return false;">Toggle stuff</a>
    I get confused with the quotes.

    And, I swapped "javascript:void(0);" to "#" so's to validate.

    Does that affect anything?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,687
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Here is the content that you want to toggle:

    Code html4strict:
    <div id="stuff">
    ...
    </div>

    With the scripting, the best place to put your script (whether external or inline) is at the end of the body, just before the </body tag>

    Code html4strict:
    <html>
    <head>
    ...
    </head>
    <body>
    ...
    <script src="script.js"></script>
    </body>
    </html>

    When someone loads your page and they don't have any scripting, you don't want the stuff to be automatically hidden because they then have no way to see it. That's why we use scripting to hide the stuff, because scripting is also used to display it.

    We also use a CSS declaration to hide it.

    Code css:
    .hidden {
        display: none;
    }

    Here's how:

    Code javascript:
    // hide stuff
    var div = document.getElementById('stuff');
    div.className = 'hidden';

    You should not have a toggle link automatically shown on the page, because when people without scripting visit the page, the link will fail to work for them. Instead, use scripting to add the link. In this case, it's added just before the stuff to be toggled.

    Code javascript:
    // create link
    var link = document.createElement('a');
    link.href = '#' + div.id;
    link.onclick = function () {
        toggle();
    }
    // add link before stuff
    div.parentNode.insertBefore(link, div);

    That will create a link that looks like: <a href="#stuff">Toggle</a>

    The link also directly calls the toggle function. That toggle function can now easily do its job by toggling the id that's in the href reference.
    We just need to deal with some browser compatability issues. Some browsers automatically add the page link on to the link when you retrieve it, so if we split at the # we can take whatever is after it.

    Code javascript:
    function toggle() {
        var id = this.href.split('#')[1];
        var el = document.getElementById(id);
        el.className = (el.className === 'hidden') ? '' : 'hidden';
        return false;
    }

    Why do we return false? So that the web browser ignores what it normally does when links are clicked.

    So the full script consists of three basic parts:
    1. Hide the stuff
    2. Create a toggle link
    3. Toggle the stuff


    Code javascript:
    // hide stuff
    var div = document.getElementById('stuff');
    div.className = 'hidden';
     
    // create link
    var link = document.createElement('a');
    var text = document.createTextNode('Toggle');
    link.href = '#' + div.id;
    link.appendChild(text);
    link.onclick = toggle;
    // add link before stuff
    div.parentNode.insertBefore(link, div);
     
    function toggle() {
        var id = this.href.split('#')[1];
        var el = document.getElementById(id);
        el.className = (el.className === 'hidden') ? '' : 'hidden';
        return false;
    }

    And best of all, it still works properly when scripting is disabled, because the content still remains fully accessible.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks - that's a really comprehensive explanation.

    I need a bit of time to get my head around it, and may come back with a query in a day or so - but meantime, thanks.


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
  •