Issue with Having Images Hidden/Visible Using Onclick

Hi,

Apologies if this is a relatively simple issue, but I'm new to the coding game. :)

What I'm aiming for is having a number of hidden divs that only become visible one at a time when a linked phrase is clicked.  When the next phrase is clicked, the previous div becomes hidden again.

This much I have working.  

My issue is that when the page loads, all of my divs are visible.  It's only when I click one of my links that they start following the whole "one at a time" rule.

Any ideas?

Here's what I have in my header.php file:
<!-- onclick hiding script -->

<script>
function setVisibility(id, visibility) {
document.getElementById(id).style.visibility = visibility;
}
 
function HideDivs()
{
document.getElementById('Location').style.visibility="hidden";
document.getElementById('Location2').style.visibility="hidden";

 }
</script>
<!-- end onclick hiding script -->
</head>

Open in new window


And here's what I have on my page:
<a onclick="HideDivs(); setVisibility('Location', 'visible');">Location</a>
<div id="Location">Berlin City Location<br />
191 Riverside Street<br />
Portland, ME 04103<br />
Info: 877-806-6548<br />
Service: 866-698-3477</div>

<a onclick="HideDivs(); setVisibility('Location2', 'visible');">Location2</a>
<div id="Location2">Berlin City Location2<br />
100 Fake Street<br />
Portland, ME 04103<br />
Info: 877-555-5555<br />
Service: 866-555-5555</div>

Open in new window

emailmike1994Asked:
Who is Participating?
 
cb1393Connect With a Mentor Commented:
Try this:

<div id="Location" style="visibility:hidden">
0
 
cmalakarConnect With a Mentor Commented:
add following attribute to each div.

style="display:none"

like

<div id="Location" style="display:none" >Berlin City Location<br />

0
 
GeoffHarperCommented:
Add the following attribute to both <DIV> tags:


style="visibility:hidden"

Open in new window

0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
cmalakarCommented:
Check the difference of above two here..

http://webdesign.about.com/od/css/f/blfaqhidden.htm
0
 
emailmike1994Author Commented:
I appreciate all of the quick responses.

I tried both solutions, and both work to a certain extent.  They both make the divs hidden upon loading the page.  However, when I use cmalakar's solution, the divs don't reappear as they should when I click my linked text.  When I use cb1393's, they do.

I read the article as well cmalakar.  I appreciate that extra bit of information.  But that solution doesn't seem to fully work for me.

If anyone has any further thoughts, please offer them.  But it looks like I might be accepting cb1393's fix.
0
 
cmalakarCommented:
>>when I use cmalakar's solution, the divs don't reappear as they should when I click my linked text

Its because in your javascript function, you are changing the visibility style property.

>>document.getElementById('Location').style.visibility="hidden";

if you use display:none with div, then in your javascript funtions you should use

document.getElementById('Location').style.display="inline"; //for showing
document.getElementById('Location').style.display="block"; //for hiding

As said in above article, display style property is better than visibility style property.
0
 
emailmike1994Author Commented:
Hopefully you'll all keep in mind that I'm a beginner as I ask another question or two.

I made changes to the javascript in header.php, but now clicking either of my links makes both divs appear and disappear

I might need this all spoon fed to me.  Apologies.

What should my original code I provided look like to make this work, both the javascript and the code on my page?

0
 
cb1393Commented:
You can use the display style as indicated (provided you make the appropriate script changes), but there is a difference in how items hide and appear on the page. The visibility style allows content to be hidden within the space it consumes. The display style is more like inserting/removing the content, so the content below it will shift up to fill the void, or down when the content is displayed.

I don't know about one being better than the other- I think it's more about how you want it to look.
0
 
cb1393Commented:
Something like the following should work:
<html>
<head>
<title></title>
<script>
function setVisibility(id) {
	HideDivs();
	document.getElementById(id).style.visibility = "visible";
}
 
function HideDivs()
{
document.getElementById('Location').style.visibility="hidden";
document.getElementById('Location2').style.visibility="hidden";

 }
</script>
</head>
<body onload="HideDivs()">


<a href="" onclick="setVisibility('Location');return false">Location</a><br>
<div id="Location" style="visiblity:hidden;">Berlin City Location<br />
191 Riverside Street<br />
Portland, ME 04103<br />
Info: 877-806-6548<br />
Service: 866-698-3477
</div>

<a href="" onclick="setVisibility('Location2');return false">Location2</a><br>
<div id="Location2" style="visiblity:hidden;">Berlin City Location2<br />
100 Fake Street<br />
Portland, ME 04103<br />
Info: 877-555-5555<br />
Service: 866-555-5555
</div> 


</body>
</html>

Open in new window

0
 
emailmike1994Author Commented:
This is tough because you both gave working solutions.  I'm going to give cb1393 the edge because his is the solution I'm going to use.

But you both get points because you both gave some extra effort.

Thank you all for helping out.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.