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

lapuccaAsked:
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.

Bob StoneIT GuruCommented:
Given there is no folder specified in the code "backgroundImage:"url(down.png)", you'd put it in the same directory as the script.

If you have an images directory and want to put them there you'd just change it to "backgroundImage:"url(images/down.png)" or "backgroundImage:"/images/url(down.png)" depending on your server.
0
remorinaCommented:
Hi lapucca,
The images whether missing or not should not affect the behaviour of the script.
There are several reasons why the script wouldn't be working in your site
  • You have taken the script function outside of the $(document).ready(function() which would prevent it from executing
  • Your current menu structure is not suitable for how the script executes and it also has invalid elements, a h2 tag cannot be a child of a ul
  • You have not adjusted the script correctly to point to your menu elements
  • the menu elements actually didn't have any children to show in the accordion
In order to get this working I was required to modify in several areas within the HTM file and the css file site.css

I'll include the modified code below, and also I've attached a local saved copy of your site with the script working.

hope this helps you getting it to work correctly



//Modified Function in the top of your file//
<!-- Initialise main menu (Superfish) -->
	<script type="text/javascript"> 
	
	$(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 p").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>



// Modified Menu Section //
<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>
                    </ul>
                    <h2>Committees</h2>
                    <div class="menu_list" id="committeeMenu"> <!--Code for menu starts here-->
		                <p><a href="http://www.labctsi.org/index.php/cct/community_advisory_committee/">Center Advisory</a></p>
		                <div class="menu_body">
		                <a href="#">Link-1</a>
                         <a href="#">Link-2</a>
                         <a href="#">Link-3</a>	
		                </div>
		                <p><a href="http://www.labctsi.org/index.php/cct/community_health_providers/">Community Health Care Providers</a></p>
		                <div class="menu_body">
			                <a href="#">Link-1</a>
                         <a href="#">Link-2</a>
                         <a href="#">Link-3</a>	
		                </div>
		                <p><a href="http://www.labctsi.org/index.php/cct/community_leadership_council/">Community Leadership Council</a></p>
		                <div class="menu_body">
                          <a href="#">Link-1</a>
                         <a href="#">Link-2</a>
                         <a href="#">Link-3</a>			
                       </div>
                  </div>
                </div>



//Modified CSS //
/*Center and Program pages - Secondary Navigation*/
ul#navlist, ul#committeeMenu
{
	text-align: left;
	list-style: none;
	padding: 0;
	margin: 0 auto;
}
ul#navlist li, #committeeMenu p
{
	display: block;
	margin: 0;
	padding: 0;
}
ul#navlist li a, #committeeMenu p a
{
	display: block;
	width: 100%;
	padding: 0.5em 0 0.5em 1em;
	border-width: 1px;
	border-color: #FFE #AAAB9C #CCC #FFF;
	border-style: solid;
	color: #333333;
	text-decoration: none;
	background: #F0F0E8;
}
#navcontainer>ul#navlist li a, #navcontainer>#committeeMenu p a
{
	width: 115px;
}
ul#navlist li#active a, #committeeMenu p#active a
{
	background: #F0E7D7;
	color: #990000;
}
ul#navlist li a:hover, ul#navlist li#active a:hover, #committeeMenu p a:hover, #committeeMenu p#active a:hover
{
	color: #800000;
	background: transparent;
	border-color: #AAAB9C #FFF #FFF #CCC;
	background: #F0F0E8;
}
#committeeMenu {font-size:12px;}

Open in new window

LABCTSI.zip
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
lapuccaAuthor Commented:
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.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

lapuccaAuthor Commented:
oops, sorry, I guess what you listed in your reply are the modification you made.  Thank you and I will try that now.
0
lapuccaAuthor Commented:
oops, sorry, I guess what you listed in your reply are the modification you made.  Thank you and I will try that now.
0
remorinaCommented:
No worries lapucca,
Hope it works for you
0
lapuccaAuthor Commented:
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.
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.