By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,594 Members | 3,291 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,594 IT Pros & Developers. It's quick & easy.

Show/Hide Elements with Javascript

P: 59
I searched forever to find this, but I didn't have any luck. Here's what I want to do:

I want to have an image that when you click on it, it shows/hides content. I also want that image to change when you click on it.

Basically, I want the content to show until you click the 'minus' image, and when that happens, I want the content to disappear. Also, I want the 'plus' image to take the place of the 'minus' image. If you click the 'plus image', I want the content to re-appear.

I need this to work so I can have something like this:

[html]
<a href="plus" id="1"><img src="plus.gif"></a>
<div id="1">This content will be shown!</div>

<a href="plus" id="16"><img src="plus.gif"></a>
<div id="16">This content will be shown!</div>
[/html]

Clearly I'm missing some other things in this example, like the minus button, and the javascript functions - but that's what I need help doing! :)

Thank you.
Jan 30 '08 #1
Share this Question
Share on Google+
4 Replies


rpnew
100+
P: 188
I searched forever to find this, but I didn't have any luck. Here's what I want to do:

I want to have an image that when you click on it, it shows/hides content. I also want that image to change when you click on it.

Basically, I want the content to show until you click the 'minus' image, and when that happens, I want the content to disappear. Also, I want the 'plus' image to take the place of the 'minus' image. If you click the 'plus image', I want the content to re-appear.

I need this to work so I can have something like this:

[html]
<a href="plus" id="1"><img src="plus.gif"></a>
<div id="1">This content will be shown!</div>

<a href="plus" id="16"><img src="plus.gif"></a>
<div id="16">This content will be shown!</div>
[/html]

Clearly I'm missing some other things in this example, like the minus button, and the javascript functions - but that's what I need help doing! :)

Thank you.
hi,
Its quite easy... you just need to read about onclick event for calling function and hidden attribute of different component(tag).

Regards,
RP
Jan 30 '08 #2

acoder
Expert Mod 15k+
P: 16,027
Add an onclick to the image. Give the image an id so you can access it with document.getElementById() or pass 'this' to the showhide function.

In the showhide function, change the src by setting the image's src attribute. Show using div.style.display="block" and hide it by setting the display property to "none".

Remember that IDs cannot start with a number, so you'll have to rename your div ids.
Jan 30 '08 #3

P: 59
Thank you both for your replies, that sounds easy enough to do. How do I make it so once I click the image, it switches to the other image? For example, if I click the plus image, how do I make it change to the minus image, and visa versa?
Jan 31 '08 #4

acoder
Expert Mod 15k+
P: 16,027
Thank you both for your replies, that sounds easy enough to do. How do I make it so once I click the image, it switches to the other image? For example, if I click the plus image, how do I make it change to the minus image, and visa versa?
Just change the src property of the image to "minus.gif" or whatever the image is called:
Expand|Select|Wrap|Line Numbers
  1. img.src = pathToMinusImage;
Jan 31 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.