Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Location
    Maryland, USA
    Posts
    165
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Accordion Menu Problems in IE

    Hello,

    I've used some simple jquery in combination with CSS to create an accordion menu for a new website that I'm developing.

    The menu works perfectly in safari and firefox, but not at all in IE. I'm not sure where to being to troubleshoot this, as I am not very familiar with jquery.

    Here is the relevant code:

    Javascript:
    Code:
    <script type="text/javascript" language="javascript" src="css/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    	//slides the element with class "menu_subbody" when li with class "menu_subhead" is clicked
    	$("#first_pane li.menu_subhead").click(function()
    	{
    		$(this).css({}).next("ul.menu_subbody").slideToggle(300).siblings("ul.menu_subbody").slideUp("slow");
    		$(this).siblings().css({});
    	});
    	
    });
    </script>
    HTML:
    Code:
    					<div id="first_pane" class="menu_pane">
    						<div style="position: relative;"><h3><img src='img/roundedCorners/dark_blue_tr.jpg' class='tr' style="top: 0;" alt="CSS Rounded Corner Image"/>Programs</h3></div>
    							<ul>
    								<li class="menu_subhead"><a href="#" style="font-weight: bold;">Cardiac CT Practicum</a></li>
    									<ul class="menu_subbody">
    										<li><a href="#">General</a></li>
    										<li><a href="#">Description</a></li>
    										<li><a href="#">Lectures</a></li>
    										<li><a href="#">Registration</a></li>
    										<li><a href="#">Sample Schedule</a></li>
    										<li><a href="#">Evaluations</a></li>
    										<li><a href="#">Previous Classes</a></li>
    										<li><a href="#">Scheduled Dates</a></li>
    									</ul>
    								<li class="menu_subhead"><a href="#" style="font-weight: bold;">CT Progress and Potential</a></li>
    									<ul class="menu_subbody">
    										<li><a href="#">General</a></li>
    										<li><a href="#">Description</a></li>
    										<li><a href="#">Faculty</a></li>
    										<li><a href="#">Programs</a></li>
    										<li><a href="#">Scheduled Dates</a></li>
    									</ul>
    								<li><a href="#" style="font-weight: bold;">Why take our course?</a></li>
    							</ul>
    					</div>
    					<!-- end first_pane -->
    CSS:
    Code:
    <style type="text/css">
    .menu_subbody {
    	display: none;
    }
    .menu_subhead {
    	cursor: pointer;
    }
    </style>
    here is a link to the actual site if you want to see it in action


    Does anyone have any idea what could be causing this problem? It seems like things always work on firefox and safari, and then IE has to go and mess things up. Perhaps I can incorporate a noscript clause that causes the CSS to define .menu_head {display: inherit;} ?

    Any help would be greatly appreciated. Thanks
    Last edited by madmatter23; 06-25-2008 at 10:05 PM. Reason: Simplified example codes


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •