DanH42 Posted December 25, 2009 Share Posted December 25, 2009 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 More sharing options...
Synook Posted December 25, 2009 Share Posted December 25, 2009 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 More sharing options...
skaterdav85 Posted December 27, 2009 Share Posted December 27, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.