javascript code

Hi,

Does anyone have or know of some code that would do the something similar to this .gif image

where the user click on the errow it will drop down and when they click on it again it will go back up just like ebay home page.  

Thank you
sample.gif
lulu50Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
HainKurtConnect With a Mentor Sr. System AnalystCommented:
here is the extended version
<html>
<head>
			<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" ></script>
<style>
	.divCollapsablePanel {cursor:pointer}
	.divCollapsablePanelDetail {border:1px solid silver; padding:10; display:none}
</style>
	
<script>
$(document).ready(function() {
	$(".divCollapsablePanel").click(function(){
		$(".divCollapsablePanelDetail").hide();
		$(".divCollapsablePanelDetail",this).show(1000);
	});
});
</script>
</head>
<body>

<div class="divCollapsablePanel">
	Error
<div class="divCollapsablePanelDetail">
	error details
	<ul>
		<li>error 1</li>
		<li>error 2</li>
		<li>error 3</li>
	</ul>
</div>
</div>

<div class="divCollapsablePanel">
	Stack
<div class="divCollapsablePanelDetail">
	Stack details
	<ul>
		<li>Stack 1</li>
		<li>Stack 2</li>
		<li>Stack 3</li>
	</ul>
</div>
</div>

<div class="divCollapsablePanel">
	Other
<div class="divCollapsablePanelDetail">
	Other details
	<ul>
		<li>Other 1</li>
		<li>Other 2</li>
		<li>Other 3</li>
	</ul>
</div>
</div>

</body>
</html>

Open in new window

0
 
HainKurtSr. System AnalystCommented:
here is a sample using jQuery
<html>
<head>
			<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" ></script>
<style>
	.divCollapsablePanel {cursor:pointer}
</style>
	
<script>
$(document).ready(function() {
	$(".divCollapsablePanel").click(function(){$("div",this).toggle(1000);});
});
</script>
</head>
<body>

<div class="divCollapsablePanel">
	Error
<div style="display:none">
	error details
	<ul>
		<li>error 1</li>
		<li>error 2</li>
		<li>error 3</li>
	</ul>
</div>
</div>

<div class="divCollapsablePanel">
	Stack
<div style="display:none">
	Stack details
	<ul>
		<li>Stack 1</li>
		<li>Stack 2</li>
		<li>Stack 3</li>
	</ul>
</div>
</div>

</body>
</html>

Open in new window

0
 
lulu50Author Commented:

I have two questions:

what if code.jquery.com removes all their files is that mean my menu will not work
anymore?

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" ></script>

my second question.

I just found on the internet something similar to what I am looking for

http://javascript.internet.com/navigation/category-menus.html

the code you just posted it doesn't close when the user select a different category like the one in the javascript page.

is there a way to have only the clicked on category open and the rest closed?

0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
HainKurtSr. System AnalystCommented:
what if code.jquery.com removes all their files is that mean my menu will not work anymore?

get the files and put into your web server and use that one, do not refer to jQuery site

is there a way to have only the clicked on category open and the rest closed?

yes, will prepare extended sample later...
0
 
HainKurtSr. System AnalystCommented:
and you may ask for effect duration:

$(".divCollapsablePanelDetail",this).show(1000);
-->
$(".divCollapsablePanelDetail",this).show(); // to show immediately without any effect
-->
$(".divCollapsablePanelDetail",this).show(250); //1/4 sec for show effect
0
 
lulu50Author Commented:
HainKurt

do you know where I can get this library jquery-latest.min.js?

0
 
HainKurtSr. System AnalystCommented:
get it from here jquery.com
copy to your web server and reference to that library
make sure you use min version in your prod site for best performance...
0
 
HainKurtSr. System AnalystCommented:
learn jQuery, at least basic things :)
0
 
lulu50Author Commented:
I got it

Thanks,

Yes, I will try to learn it
0
 
lulu50Author Commented:
Great!!!! Thank you for helping me
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.