View Full Version : OOP for drop down Div?

12-27-2004, 02:12 PM
"div1" is invisible (display:none) when the page loads. Clicking on "twist1" div causes "div1" to appear (display:block) - showing the answer to some question.

It all works fine but is not at all elegant. (I have simplified it here - for the sake of the post).

I have several of these on each page and it is tedious to change all the div1's to div2's (and twist1 to twist2 etc) Also, it is too easy to make mistakes. I surely should be able to name (say) 'twist1' and then have all the other elements involved pick up the name from this single identifier, using "this." or "parentNode." or something.

I suspect an OOP approach would be appropriate but not sure where to start.

<div id="twist1" onclick="showHideContent('div1');" >
<p class="twist" onMouseOver="this.className='mouseOverColor';"
onMouseOut="this.className='mouseOutColor';">Show answer</p>
<div id="div1" class="dropDown" onclick="showHideContent('div1');">
<p>blah blah</p>

The JS
function showHideContent(id){
var divID = document.getElementById(id);
var idNum = id.substring(3,5);
var hideTwist = document.getElementById("twist" + idNum);
if (divID.style.display == 'block') {
divID.style.display = 'none';
hideTwist.style.display = 'block';
} else {
divID.style.display = 'block';
hideTwist.style.display = 'none';

12-27-2004, 02:40 PM
Sorry :p - I just found the elegant solution to my earlier post here (http://www.codingforums.com/showthread.php?t=48320). Thank you hemebond for your solution and sorry to have wasted time and cyberspace...