Jump to content

Show/hide <div>'s


DanH42
 Share

Recommended Posts

I'm trying to have a link that will make extra content show when it's clicked, then hide when it's clicked again. I've done it in the past, but I didn't save the code I used. Here's what I'm using now, which doesn't work:

<html><head><script type="text/javascript"><!--    function more() {       var a = document.getElementById(less);       var b = document.getElementById(more);          a.style.display = 'none';          b.style.display = 'block';    }    function less() {       var a = document.getElementById(less);       var b = document.getElementById(more);          a.style.display = 'block';          b.style.display = 'none';    }//--></script></head><body><div id="less"><a href="#" onclick="more();">More>></a></div><div id="more" style='display: none;'><a href="#" onclick="less();"><<Less</a><br>(content)</div></body></html>

Link to comment
Share on other sites

You need quotation marks around all strings, including the ones you pass as parameters to the getElementById() method.

document.getElementById("less");

Link to comment
Share on other sites

you could just wrap that all into one function like this:

function showHideList(listID) {	var listState = document.getElementById(listID).style.display;	if(document.getElementById(listID).style.display == 'block') {		document.getElementById(listID).style.display = 'none';	}	else {		document.getElementById(listID).style.display = 'block';	}}

just make sure your hidden section has the hidden value for the display property in your css.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...