Link to home
Start Free TrialLog in
Avatar of lapucca
lapucca

asked on

My accordion menu isn't working

Hi, I'm trying to make my left vertical menu(http://www.labctsi.org/index.php/cct/community_advisory_committee/) , under committee, to be like the accordion menu here:
http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html
Attached is my code for this.  However, I'm not sure where to put the left and down .png files for this to work?      
The CSS file is copy from the site above. Below is one of the CSS code regardnig the image.
background: #eef4d3 url(left.png) center right no-repeat;
Nothing happens now when I position cursor over the "Center Advisory".  I wonder if it's becuase it can't find the left and down .png files.

$(document).ready(function() {
 	        $("ul.sf-menu").supersubs({ 
                minWidth:    8,   // minimum width of sub-menus in em units 
                maxWidth:    25,   // maximum width of sub-menus in em units 
                extraWidth:  0     // extra width can ensure lines don't sometimes turn over 
                                   // due to slight rounding differences and font-family 
            }).superfish();
			
	});
	
	//slides the element with class "menu_body" when mouse is over the paragraph
	$("#committeeMenu li.menu_head").mouseover(function()
	{	$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
	   $(this).siblings().css({backgroundImage:"url(left.png)"});
	});	
 	</script>



		<div id="mainContent">
			<div id="secondaryNavigationColumn">
			    <div id="navcontainer">
			        <h2>OCE Menu</h2>
                    <ul id="navlist">
                        <li><a href="http://www.labctsi.org/index.php/cct/">Home</a></li>
                        <li><a href="http://www.labctsi.org/community">Resources/Services</a></li>
                        <li><a href="http://www.labctsi.org/index.php/cct/all_news/">News</a></li>
                        <li><a href="http://www.labctsi.org/index.php/cct/all_events/">Events</a></li>
                        <li><a href="http://www.labctsi.org/index.php/cct/about_us/">About Us</a></li>
	                    <h2>Committees</h2>
						<div id="committeeMenu" class="menu_list">
							<li class="menu_head">Center Advisory</li>
							<div class="menu_body">
								<li id="active"><a href="http://www.labctsi.org/index.php/cct/community_advisory_committee/">Advisory Committee</a></li>
							</div>
								<li><a href="http://www.labctsi.org/index.php/cct/community_health_providers/">Community Health Care Providers</a></li>
								<li><a href="http://www.labctsi.org/index.php/cct/community_leadership_council/">Community Leadership Council</a></li>
						</div>
                    </ul>
                </div>
			</div>

Open in new window

SOLUTION
Avatar of Bob Stone
Bob Stone
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of lapucca
lapucca

ASKER

Hi remorina,
Many thanks for your help.  I have applied all required changes except the CSS changes so it's not not showing the accordion menu at the site.  Since the site menu is created by someone else so i want to be very careful about making modifications to it.  Can you let me know what changes you made to this CSS file?  Thank you.
Avatar of lapucca

ASKER

oops, sorry, I guess what you listed in your reply are the modification you made.  Thank you and I will try that now.
Avatar of lapucca

ASKER

oops, sorry, I guess what you listed in your reply are the modification you made.  Thank you and I will try that now.
No worries lapucca,
Hope it works for you
Avatar of lapucca

ASKER

Hi remorina,
Thank you for the amazing and thorough help!  I'm still not that experience with the web front end coding yet.  However, with your help I got up running at a test page, http://www.labctsi.org/index.php/cct/index_Test

I have another question about this.  It would be great if you can just have a look at this question,  ID: 25595910

Thank you.