[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Issue with Having Images Hidden/Visible Using Onclick

Posted on 2011-04-27
10
Medium Priority
?
375 Views
Last Modified: 2012-05-11
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

0
Comment
Question by:emailmike1994
  • 3
  • 3
  • 3
  • +1
10 Comments
 
LVL 23

Assisted Solution

by:cmalakar
cmalakar earned 800 total points
ID: 35476226
add following attribute to each div.

style="display:none"

like

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

0
 
LVL 9

Accepted Solution

by:
cb1393 earned 1200 total points
ID: 35476246
Try this:

<div id="Location" style="visibility:hidden">
0
 
LVL 4

Expert Comment

by:GeoffHarper
ID: 35476256
Add the following attribute to both <DIV> tags:


style="visibility:hidden"

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 23

Expert Comment

by:cmalakar
ID: 35476257
Check the difference of above two here..

http://webdesign.about.com/od/css/f/blfaqhidden.htm
0
 

Author Comment

by:emailmike1994
ID: 35476302
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
 
LVL 23

Expert Comment

by:cmalakar
ID: 35476349
>>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
 

Author Comment

by:emailmike1994
ID: 35476448
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
 
LVL 9

Expert Comment

by:cb1393
ID: 35476529
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
 
LVL 9

Expert Comment

by:cb1393
ID: 35476605
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
 

Author Closing Comment

by:emailmike1994
ID: 35476709
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question