expand collapse panel

[r-it]

Hi, i'm not sure this is the right place to post this but here goes.

 

I would like to know if anyone knows where i can get scripts that have the same effect as this site: http://www.chromaticsites.com/ please look at the top of the page (the client login area), notice how it expands and collapses without affecting the page, i would like something like that for the site i am building but all my googling has proved fruitless.

 

Thanks

[mainewoods]

their html that implements the login panel is shown at the bottom of this posting.  To show or hide the panel, you use javascript like this:

<script>
    // make the panel dissappear, using it's id value in the getElementById
    document.getElementById('chromatic').style.display = 'none';
    // make reappear
    document.getElementById('chromatic').style.display = '';
</script>

--their web site is using jquery, a popular javascript libray, but you only need the code above to display or hide the panel

 

<div id="chromatic" class="clearfix">

<form id="newsletter_login" action="http://chromaticsites.createsend.com/login.aspx?ReturnUrl=/Default.aspx" method="post" name="loginForm">
		<h5 class="newsproject">Email Newsletters</h5>
		<p>
			<input type="text" class="inputStyle" name="username" id="username" value="username" />
			<input type="password" class="inputStyle" name="password" id="password" value="password" />
			<input type="image" class="submit" src="http://www.chromaticsites.com/images/structure/go.png" alt="Login to Chromatic Sites Newsletters" />
</p>		
</form>

	<form id="project_login" action="https://chromaticsites.clientsection.com/login/authenticate" method="post">
		<h5 class="newsproject">Project Management</h5>
		<p>
			<input type="text" class="inputStyle" value="username" name="user_name" id="user_name" />
			<input type="password" class="inputStyle" value="password" name="password" />
			<input type="image" class="submit" src="http://www.chromaticsites.com/images/structure/go.png" alt="Login to Chromatic Sites Project Management" />
</p>
</form>

</div>