Dropdown Box Onclick

[ziycon]

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

[acoder]

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:

<div id="divObj" style="display:none">

// show
document.getElementById("divObj").style.display = "block";
// hide
document.getElementById("divObj").style.display = "none";

[ziycon]

Thanks for that, this wont make it gradually appear and gradually disappear though, will it?

[ziycon]

Ok, I've played around with it and I'm stumped, i have this code below on my page:

<div id="header_profile_details" style="display:none;"></div>
<div id="header_profile_tab"><a href="#" OnClick=\'(this);\'>down</a></div>

The CSS for these DIV's is:

#header_profile_tab { 
	float: right;
	width: 60px;
	height: 20px;
	margin: 0 10px 0 0;
	font-size: 14px;
	font-weight: bold;
	background-color: #FF0000;
	text-align: center;
	clear: right;
	display: inline;
}
#header_profile_details { 
	float: right;
	width: 100px;
	height: 60px;
	margin: 0 10px 0 0;
	font-size: 14px;
	font-weight: bold;
	background-color: #FF0000;
	text-align: center;
	clear: right;
}

Not sure what to do next!??

[acoder]

Thanks for that, this wont make it gradually appear and gradually disappear though, will it?

For that, you will need timing via the setInterval or setTimeout methods.

[acoder]

Ok, I've played around with it and I'm stumped, i have this code below on my page:

Since you're using CSS, you dont need to declare the style inline, so add "display:no ne to the style declaration for header_profile_ details.

In the down link, you need to call a function, e.g.

<div id="header_profile_tab"><a href="#" onclick="show('header_profile_details'); return false;">down</a></div>

Then in the JavaScript:

function show(id) {
    document.getElementById(id).style.display = 'block';
}

[ziycon]

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.

[acoder]

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:

function showhide(id) {
    var details = document.getElementById(id);
    if (details.style.display == "block") {
        // change it to "none"
        ...
        // and change link text
        document.getElementById("link").innerHTML = "down";
    } else {
        // similar for the opposite
    }
}

[ziycon]

Sorry, could you explain that cause i don't really understand it!?

[ziycon]

Got it sorted, working fine now, thanks for all your help acoder!

[ziycon]

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?

[acoder]

You could use a cookies (link).

[ziycon]

I code use sessions in the same way couldn't i as the site already has a session from when you log in.

[acoder]

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.