Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2004
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    OOP for drop down Div?

    "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.

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

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

  • #2
    New Coder
    Join Date
    Dec 2004
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    OOP is for "oops"

    Sorry - I just found the elegant solution to my earlier post here. Thank you hemebond for your solution and sorry to have wasted time and cyberspace...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •