Question

61

simple div onclick show javascript

rated 0 times [ 63] [ 2] / answers: 1 / hits: 89129 / 12 Years ago, sun, may 6, 2012, 12:00:00

when I click on any link the correspoding div shows up
but when I click the next link, the newly clicked dive shows up as well as the previously clicked. I would like the previos div to hide. NEW to development please some one help me........

this is the html code for links:

<a class=hide onclick=showdiv('firstimpression');  href=#>First Impression</a>

<a class=hide onclick=showdiv('speaking');  href=#>Speaking</a>

<a class=hide onclick=showdiv('eating');  href=#>Eating</a>

<a class=hide onclick=showdiv('taste');  href=#>Taste</a>

<a class=hide onclick=showdiv('saliva');  href=#>Saliva</a>

<a class=hide onclick=showdiv('cleaning'); href=#>Cleaning</a>

<a class=hide onclick=showdiv('nighttime'); href=#>Night Time</a>

<a class=hide onclick=showdiv('singledenture'); href=#>Single Denture</a>

<a class=hide onclick=showdiv('soreness');  href=#>Soreness</a>

<a class=hide onclick=showdiv('burning'); href=#>Burning</a>

<a class=hide onclick=showdiv('adapting'); href=#>Adapting</a>

<a class=hide onclick=showdiv('futureconsideration'); href=#>Future Consideration</a>

<a class=hide onclick=showdiv('conclusion'); href=#>Conclusion</a>

these are the divs:

<div id=firstimpression class=patientinfodivs>

<div id=speaking class=patientinfodivs>

.....and so on

Javascript code

<script type=text/javascript>

function showdiv(id){

document.getElementById(id).style.display = block;

}

</script>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kamronr

Add To Favorites

Follow

Total Points: 749

Total Questions: 110

Total Answers: 122

Location: Dominica

Member since Sat, Nov 5, 2022

2 Years ago

kamronr questions

1 How to enforce semicolon in Typescript interface

Mon, Dec 21, 20, 00:00, 3 Years ago

1 Jest - How do I reset object state for each test?

Fri, Oct 16, 20, 00:00, 4 Years ago

1 Change (Add/Remove) CSS Class On Mobile With JS or jQuery

Sat, Oct 3, 20, 00:00, 4 Years ago

1 Don't allow horizontal scroll when scrolling vertically (and vice versa)

Tue, Oct 1, 19, 00:00, 5 Years ago

1 How to extract text from PDF?

Sun, Jul 28, 19, 00:00, 5 Years ago

View All

answered 12 Years ago leighrheac · Accepted Answer

As much as I hate creating global variables, they just come in so handy sometimes...

var _hidediv = null;

function showdiv(id) {

    if(_hidediv)

        _hidediv();

    var div = document.getElementById(id);

    div.style.display = 'block';

    _hidediv = function () { div.style.display = 'none'; };

}

This will prevent you from needlessly searching through divs to find the one you should hide.

Edit: Expanding upon @StevenRoose's suggestion:

var _targetdiv = null;

function showdiv(id) {

    if(_targetdiv)

        _targetdiv.style.display = 'none';

    _targetdiv = document.getElementById(id);

    _targetdiv.style.display = 'block';

}