toggle div while hiding other divs

Question

I have a side nav on the left hand side with different types of surgeries. They are all in an ul.

When you click on a surgery (ul li), a div will show up on the right hand side, displaying FAQ's for that specific surgery. Clicking on another link in the ul will hide the currently open div and display the one you've just clicked on.

I've managed to do this, but I would also like to toggle the visibility of the FAQ div when I click the same ul li link again.

<html>
<head>
<style>
#popup div { display:none; }
#popup div.show { display:block; }
ul#links li { cursor:pointer;}
</style>
</head>
<body>

    <div class="sidenav">
        <ul id="links">
            <li id="armlift">Arm Lift</li>
            <li id="liposuction">Liposuction</li>
            <li id="tummytuck">Tummy Tuck</li>
            <li id="postgastric">Post-Gastric Bypass Surgery</li>
        </ul>       
    </div>

    <div id="popup">
        <div id="a_armlift">
        <span class="faq_header">Arm Lift</span>
        <p class="treatment_question">What is a an Arm Lift?</p>
            <div class="treatment_answer">This surgery removes excess...</div>
        <p class="treatment_question">What should I know?</p>
            <div class="treatment_answer">An incision is made...</div>
    </div>  
        <div id="a_liposuction">
        <span class="faq_header">Liposuction Lift</span>
        <p class="treatment_question">What is a Liposuction?</p>
            <div class="treatment_answer">Liposuction is the removal...</div>
        <p class="treatment_question">What should I know?</p>
            <div class="treatment_answer">Ideal candidates for...</div>
    </div>
        <div id="a_tummytuck">
        <span class="faq_header">Tummy Tuck</span>
        <p class="treatment_question">What is a Tummy Tuck?</p>
            <div class="treatment_answer">A tummy tuck tightens...</div>
        <p class="treatment_question">What is a Mini Tummy Tuck?</p>
            <div class="treatment_answer">A mini-tuck is a...</div>
        </div>
        <div id="a_postgastric">
        <span class="faq_header">Post-Gastric Bypass Surgery</span>
        <p class="treatment_question">What is a Post-Gastric Bypass Surgery?</p>
            <div class="treatment_answer">Gastric bypass surgery removes...</div>
        <p class="treatment_question">What should I know?</p>
            <div class="treatment_answer">Each patient has...</div>
    </div>
</div>

<script type="text/javascript">
var links_ul = document.getElementById('links');

for (var i = 0; i < links_ul.children.length; i++) {
    links_ul.children[i].onclick = function(ev) {
        s = document.getElementById('a_' + this.id);
        popup = document.getElementsByClassName('show');
        for (var j = 0; j < popup.length; j++) {
            popup[j].className = '';
        }
        s.className = 'show';
    };
}
</script>

</body>
</html>

Answer 1

I would recommend looking into doing this differently. There are many plugins available that do this sort of thing.

But, here's the answer to your question: http://jsfiddle.net/6Vku8/1/

for (var i = 0; i < links_ul.children.length; i++) {
    links_ul.children[i].onclick = function(ev) {
        s = document.getElementById('a_' + this.id);
        popup = document.getElementsByClassName('show');
        var shown = s.className == 'show';

        for (var j = 0; j < popup.length; j++) {
            popup[j].className = '';
        }
        s.className = shown ? '' : 'show';
    };
}

You need to find out whether or not the div is "shown" before hiding all of the divs.

toggle div while hiding other divs

Question

1 answers

solution1
1 ACCPTED 2012-09-25 17:33:08

toggle div while hiding other divs

Question

1 answers

solution1 1 ACCPTED 2012-09-25 17:33:08

solution1
1 ACCPTED 2012-09-25 17:33:08