« Firefox underlining images
CSS “TOC” style? »

Show Hide Javascript

It seems like a lifetime ago I first saw that javascript that does the neat “show/hide” trick. Recently I did a search to see what the latest version of that script was and there must have been a dozen different varieties. I think I liked this one the best which is a million times simpler than ones I’ve previously posted on this site. (I haven’t really looked at those scripts in a long time, but for some reason this week alone I’ve needed to use it on two separate projects.) That one does a toggle:

function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}

I actually split it so that I could do a separate show/hide:

function show(menuName) {
var el = document.getElementById(menuName);
el.style.display = 'block';
}

function hide(menuName) {
var el = document.getElementById(menuName);
el.style.display = 'none';
}

This entry was posted on Tuesday, March 6th, 2007 at 9:04 am and is filed under Bookmarks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “Show Hide Javascript”

  1. Mihai Bocsaru Says:
    March 8th, 2007 at 12:30 pm

    Hi Jennifer,

    Nice conincidence! I was needing such a Show/Hide JavaScript solution just yesterday (March the 7th, 2007).

    Arvind method is very good and straightforward. For my project very requirements I’ve ended up using your solution from here http://www.scriptygoddess.com/archives/2004/01/06/another-revision-to-the-showhide-script/

    Thanks a lot,
    Mihai Bocsaru

  2. veronica Says:
    March 23rd, 2007 at 10:07 am

    (if this doesn’t post well…then i have posted it on my web site, just follow the link above.)

    i found a much easier solution to allow for showing and hiding of comments on the main index page.

    <script language="Javascript 1.2"
    type="text/javascript">
    function show(id)
    {
    el = document.getElementById(id);
    if (el.style.display == 'none')
    {
    el.style.display = '';
    el = document.getElementById('more' + id);
    } else {
    el.style.display = 'none';
    el = document.getElementById('more' + id);
    }
    }
    </script>

    so put that in the header.php or wherever your head tags are—that is, between the <head> tag.

    second you need to edit the link for the comments and have a div tag containing the actual comment information.

    so the link i use is this:
    <a href="javascript:show('vis-<?php the_ID(); ?>');"><?php comments_number('Comments (0)', 'Comments (1)', 'Comments (%)'); ?></a>

    i use ‘the_ID()” tag so that way it doesn’t confuse the browser and it validates the code. this way, each comment is unique to the individual post.

    the next thing to do is set up the div.

    <div align="left" id="vis-<?php the_ID(); ?>" style="display: none">
    <?php $withcomments = true; comments_template();?>
    </div>

    that’s it! you don’t need a plug-in…unless you don’t know how to edit the files in wordpress…hrm. maybe i should create a plug-in for the less code-adept.

    the javascript is a less than tweaked version of tom mcmillen’s code found here: http://lists.evolt.org/archive/Week-of-Mon-20020624/116152.html

    cheers.

  3. Gio Says:
    October 25th, 2007 at 9:30 am

    This solution works great. I’m using this feature as a way for users to add a comment. How can I have it go directly to the form to enter a comment rather than scolling down?

Leave a Reply