Using jQuery to create sliding menu

Please see code snippet. I'm using jQuery 1.3.2.

This code works at the moment as in it allows me to open and close menus, changing the class of the one selected, but I also need it to change or remove the class from the other headers. I already have tried changing the code to the folliowing:

"$(this).addClass("slideMenu_header_select").next("div.menu_body").slideToggle(0).siblings("div.menu_body").slideUp(0).siblings("div.slideMenu_header_select").removeClass("slideMenu_header_select");"

However this doesn't work.

So basically, onMouseClick, expand the menu body and add CSS class to header, removing the same CSS class from other headers.

Any help appreciated. Thanks in advance.
<script type="text/javascript">
$(document).ready(function() {
 
    $("#nav div.slideMenu_header").click(function() {
        $(this).addClass("slideMenu_header_select").next("div.menu_body").slideToggle(0).siblings("div.menu_body").slideUp(0);
    });
});
</script>

Open in new window

DReade83Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

alien109Commented:
can you provide a sample of the html?
0
DReade83Author Commented:
Sure, please see snippet.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Test</title>
<style type="text/css">
.slideMenu_header { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; position: relative; cursor: pointer; }
.slideMenu_header_over { background: #FFB951; }
.slideMenu_header_select { background: #FF9900; }
.slideMenu_body { display: none; }
</style>
<script type="text/javascript" language="javascript" src="/static/js/jquery-1.3.2.js"></script>
</head>
<body>
<div id="sideNav" style="width: 100px;">
<div class="slideMenu_header" onMouseOver="this.className='slideMenu_header slideMenu_header_over'" onMouseOut="this.className='slideMenu_header'">Header 1</div>
  <div class="slideMenu_body">
    <div>Option 1</div>
    <div>Option 1</div>
    <div>Option 1</div>
  </div>
</div>
</body>
</html>

Open in new window

0
alien109Commented:
did you change some of the classnames and ids of the elements between the first post, and the html you just posted?

is:
   sideNav = nav
    slideMenu_body=menu_body
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

DReade83Author Commented:
Sorry, my bad, yes they are. :-)

Please see new snippet...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Test</title>
<style type="text/css">
.slideMenu_header { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; position: relative; cursor: pointer; }
.slideMenu_header_over { background: #FFB951; }
.slideMenu_header_select { background: #FF9900; }
.menu_body { display: none; }
</style>
<script type="text/javascript" language="javascript" src="/static/js/jquery-1.3.2.js"></script>
</head>
<body>
<div id="nav" style="width: 100px;">
<div class="slideMenu_header" onMouseOver="this.className='slideMenu_header slideMenu_header_over'" onMouseOut="this.className='slideMenu_header'">Header 1</div>
  <div class="menu_body">
    <div>Option 1</div>
    <div>Option 1</div>
    <div>Option 1</div>
  </div>
</div>
</body>
</html>

Open in new window

0
alien109Commented:
try this, not sure if this is what the intended result is. I added a few more menu items to help demonstrate the removal of the selected psuedo class.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Test</title>
<style type="text/css">
.slideMenu_header { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; position: relative; cursor: pointer; }
.slideMenu_header_over { background: #FFB951; }
.slideMenu_header_select { background: #FF9900; }
.menu_body { display: none; }
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function() {
	$("#nav div.slideMenu_header").hover(function() {
		$(this).addClass("slideMenu_header_over");
 
	},
	function() {
		$(this).removeClass("slideMenu_header_over");
	});
 
	$("#nav div.slideMenu_header").click(function() {
		$(".slideMenu_header_select").removeClass("slideMenu_header_select");
		$(this).addClass("slideMenu_header_select")
		.next("div.menu_body").slideToggle(0)
		.siblings("div.menu_body").slideUp(0);
	});
});
</script>
</head>
<body>
<div id="nav" style="width: 100px;">
	<div class="slideMenu_header">Header 1</div>
	<div class="menu_body">
		<div>Option 1</div>
		<div>Option 1</div>
		<div>Option 1</div>
	</div>
	<div class="slideMenu_header">Header 2</div>
	<div class="menu_body">
		<div>Option 2</div>
		<div>Option 2</div>
		<div>Option 2</div>
	</div>
	<div class="slideMenu_header">Header 3</div>
	<div class="menu_body">
		<div>Option 3</div>
		<div>Option 3</div>
		<div>Option 3</div>
	</div>
 
</div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
DReade83Author Commented:
Genius! This took me ages to figure out, but that's because I'm a jQuery noob. :-)

Thanks man!!!
0
alien109Commented:
No problem, man. Happy to help.

Cheers.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.