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

Dropdown Box Onclick

100+
P: 384
What I'm trying to do i think is with javascript, i have a site in PHP and when a user logs in i want them to see the little tab with the downwards arrow, when the click on this a box will appear and display the users avatar and username etc and an upwards arrow, when the user clicks on this upwards arrow then the box disappears back up and only shows the tab with the downwards arrow.

I've been working with PHP & mySQL for over 7 years now but near really used javascript till now, any help is well appreciated. Thanks in advance.

ImageShack - Image Hosting :: examplenc8.jpg
Dec 12 '08 #1
Share this Question
Share on Google+
13 Replies


acoder
Expert Mod 15k+
P: 16,027
To show something hidden onclick, change the style.display property to "block". You should have it set to "none" initially to keep it hidden. Of course, to hide it again, set it back to none:
Expand|Select|Wrap|Line Numbers
  1. <div id="divObj" style="display:none">
Expand|Select|Wrap|Line Numbers
  1. // show
  2. document.getElementById("divObj").style.display = "block";
  3. // hide
  4. document.getElementById("divObj").style.display = "none";
Dec 12 '08 #2

100+
P: 384
Thanks for that, this wont make it gradually appear and gradually disappear though, will it?
Dec 12 '08 #3

100+
P: 384
Ok, I've played around with it and I'm stumped, i have this code below on my page:
Expand|Select|Wrap|Line Numbers
  1. <div id="header_profile_details" style="display:none;"></div>
  2. <div id="header_profile_tab"><a href="#" OnClick=\'(this);\'>down</a></div>
The CSS for these DIV's is:
Expand|Select|Wrap|Line Numbers
  1. #header_profile_tab { 
  2.     float: right;
  3.     width: 60px;
  4.     height: 20px;
  5.     margin: 0 10px 0 0;
  6.     font-size: 14px;
  7.     font-weight: bold;
  8.     background-color: #FF0000;
  9.     text-align: center;
  10.     clear: right;
  11.     display: inline;
  12. }
  13. #header_profile_details { 
  14.     float: right;
  15.     width: 100px;
  16.     height: 60px;
  17.     margin: 0 10px 0 0;
  18.     font-size: 14px;
  19.     font-weight: bold;
  20.     background-color: #FF0000;
  21.     text-align: center;
  22.     clear: right;
  23. }
Not sure what to do next!??
Dec 12 '08 #4

acoder
Expert Mod 15k+
P: 16,027
@ziycon
For that, you will need timing via the setInterval or setTimeout methods.
Dec 12 '08 #5

acoder
Expert Mod 15k+
P: 16,027
@ziycon
Since you're using CSS, you dont need to declare the style inline, so add "display:none to the style declaration for header_profile_details.

In the down link, you need to call a function, e.g.
Expand|Select|Wrap|Line Numbers
  1. <div id="header_profile_tab"><a href="#" onclick="show('header_profile_details'); return false;">down</a></div>
Then in the javascript:
Expand|Select|Wrap|Line Numbers
  1. function show(id) {
  2.     document.getElementById(id).style.display = 'block';
  3. }
Dec 12 '08 #6

100+
P: 384
Got it working now, another little question, how would i go about changing the option from down to display up and call a hide function when the box is displayed?

Sorry about all the questions, I'm not up on JS. Thanks for all your help.
Dec 12 '08 #7

acoder
Expert Mod 15k+
P: 16,027
You can use a show/hide function which checks whether it's showing or hidden and then does both jobs: shows/hides appropriately and changes the display text:
Expand|Select|Wrap|Line Numbers
  1. function showhide(id) {
  2.     var details = document.getElementById(id);
  3.     if (details.style.display == "block") {
  4.         // change it to "none"
  5.         ...
  6.         // and change link text
  7.         document.getElementById("link").innerHTML = "down";
  8.     } else {
  9.         // similar for the opposite
  10.     }
  11. }
Dec 12 '08 #8

100+
P: 384
Sorry, could you explain that cause i don't really understand it!?
Dec 12 '08 #9

100+
P: 384
Got it sorted, working fine now, thanks for all your help acoder!
Dec 12 '08 #10

100+
P: 384
Another add-on question for this, how would i go about say the user clicks down and shows the box, how would i keep that box open across the site on different pages without it closing everytime i go to a new page?
Dec 13 '08 #11

acoder
Expert Mod 15k+
P: 16,027
You could use a cookies (link).
Dec 13 '08 #12

100+
P: 384
I code use sessions in the same way couldn't i as the site already has a session from when you log in.
Dec 13 '08 #13

acoder
Expert Mod 15k+
P: 16,027
You could, but since this happens client-side, you will need to pass this information on to the server-side through some means, e.g. Ajax, form posting, URL, open new window, iframe, etc.
Dec 13 '08 #14

Post your reply

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