9 replies [Last post]
aweera
aweera's picture
Offline
newbie
Last seen: 2 years 20 weeks ago
Timezone: GMT-4
Joined: 2012-05-04
Posts: 7
Points: 8

I have the following links with corresponding divs

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

I want a div to show when its link is clicked. Following is the JS script (short)
function showdiv(
			document.getElementById(id).style.display = "block";
		}

it works bu there is a problem if i click multiple links all the divs will be displayed which I donot want that.
I would apperciate if some one can help me solve this, when I clicked a second link, I want the previos div to hide
Please help me

aweera

//mod edit: moved to off topic as not really a css question. ~gt

aweera
aweera's picture
Offline
newbie
Last seen: 2 years 20 weeks ago
Timezone: GMT-4
Joined: 2012-05-04
Posts: 7
Points: 8

onclick for the links

onclick="showdiv('firstimpression');"
fucntion showdiv(id)-

aweera
aweera's picture
Offline
newbie
Last seen: 2 years 20 weeks ago
Timezone: GMT-4
Joined: 2012-05-04
Posts: 7
Points: 8

this is the html code: <a

this is the html code:
<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>

aweera
aweera's picture
Offline
newbie
Last seen: 2 years 20 weeks ago
Timezone: GMT-4
Joined: 2012-05-04
Posts: 7
Points: 8

I have corressponding divs as

I have corressponding divs as well I try to display the div when the a-link is clicked;
it works but when i click another link the previous div is still displayed, I only want
the clicked div to stay visible and all other divs hidden

JS code:
<script type="text/javascript">
function showdiv(id){
document.getElementById(id).style.display = "block";
}
</script>

aweera
aweera's picture
Offline
newbie
Last seen: 2 years 20 weeks ago
Timezone: GMT-4
Joined: 2012-05-04
Posts: 7
Points: 8

divs

all the divs have one class name if that might help

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5120
Points: 2717

Hi aweera, Use the one

Hi aweera,
Use the one classname to hide them all before you show the one clicked on.
You may have to loop through a collection of elements after using getElementsByTagName looking for the class.
Or if all the divs are in a single container use that as a start point.

aweera
aweera's picture
Offline
newbie
Last seen: 2 years 20 weeks ago
Timezone: GMT-4
Joined: 2012-05-04
Posts: 7
Points: 8

Thnaks alot tony I will try

Thnaks alot tony I will try that.

aweera
aweera's picture
Offline
newbie
Last seen: 2 years 20 weeks ago
Timezone: GMT-4
Joined: 2012-05-04
Posts: 7
Points: 8

code dont work

I wrote this code to turn the class patientinfodivs but now nothins is happening, I dont know what am I doing wrong!

<script type="text/javascript">
		function showdiv(id){
			var item = document.getElementsByClassName(patientinfodivs);
			if (item){
				item.className=(item.className=='patientinfodivs').style.display="none";
			}
		document.getElementById(id).style.display = "block";
 
		}
 
	</script>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5120
Points: 2717

Hi

Hi aweera,
getElementsByClassName is a fairly new method that isn't supported by all browsers.
If you are using it I think you should quote the classname like getElementsByClassName('patientinfodivs');
Then you already know that all in the collection have that class so you should be able to step through them and set each of them to display none.

All Code below is untested Smile

<script type="text/javascript">
function showdiv(id){
  var infodivs = document.getElementsByClassName('patientinfodivs');
  for (var i =0; i < infodivs.length; i++) {
    infodivs[i].style.display="none";
  }
  document.getElementById(id).style.display = "block";
}
 </script>

Or using getElementsByTagName as first suggested

<script type="text/javascript">
function showdiv(id){
  var divs = document.getElementsByTagName('DIV');
 
  for (var i =0; i < divs.length; i++) {
    if(divs[i].calssName.indexOf('patientinfodivs') {
      divs[i].style.display="none";
    }
  }
  document.getElementById(id).style.display = "block";
}
 </script>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5120
Points: 2717

Actually thinking a little

Actually thinking a little more on this the better way to do this is to swap in and out a class.
So patientinfodivs would be set to display:none in the stylesheet.
And you would add and remove another class that is set to display:block; in your showdiv function.
Again this is untested and could be done better

<script type="text/javascript">
function showdiv(id){
  var divs = document.getElementsByTagName('DIV');
 
  for (var i =0; i < divs.length; i++) {
    if(divs[i].className.indexOf('show') {
      var cname = divs[i].className;
      var newcname = cn.replace('show', '');
      divs[i].className = newcname;
    }
  }
  var toshow = document.getElementById(id).className;
  toshow += " show";
  document.getElementById(id).className = toshow; 
}
 </script>