scriptygoddess

06 Mar, 2007

Show Hide Javascript

Posted by: Jennifer In: Bookmarks

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';
}

4 Responses to "Show Hide Javascript"

1 | Mihai Bocsaru

March 8th, 2007 at 12:30 pm

Avatar

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

March 23rd, 2007 at 10:07 am

Avatar

(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

October 25th, 2007 at 9:30 am

Avatar

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?

4 | Jazza

September 12th, 2009 at 12:47 am

Avatar

Finally a simple version of what I'm after. Thanks.

Featured Sponsors

Genesis Framework for WordPress

Advertise Here


  • Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
  • Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
  • Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre

About


Advertisements