JQuery Accordian: Understanding header links

I am trying to learn JQuery and having some difficulty understanding the process. I read through several posts, and maybe it's my weak understanding of javascript that's the hindrance, but I'm wanting to learn. My goal is to use the Accordion UI for a menu system; to have the main menu items (#sidebar ul.accordion li a .opener .selected ) also work as a link and not just as the "opener" for the sub menu ( div.slide ul li a ). I have listed the HTML, CSS, and JQuery script below, and think my question is as follows:

Q: Is my problem in the JQuery 'header: "opener"' or the 'event: "click"' or the need for a 'click(function(){ })'?

Any help (education) would be greatly appreciated.

I have the following HTML menu structure...

<div id="sidebar">
 <ul class="accordian">  
   <li>  
     <a href="./mainpagelink.php" class="opener">linkname</a>
   <div class="slide">
     <ul>
       <li><a href="subpagelink.php">sublinkname</a></li>
        ...
     </ul>
   </div>
   </li>
    ...
 </ul>
 ...
</div>

I have the following CSS...

#sidebar {
 width:210px;
 float:left;
 padding-top:18px;
}
#sidebar .accordion {
 margin:0 0 12px;
 padding:0;
 list-style:none;
 font-size:1.2em;/* 1.1 em */
}
#sidebar .accordion l开发者_C百科i {
 border-bottom:1px solid #009;
 padding:7px 0 7px 11px;
}
#sidebar .accordion a {outline-style:none;}
#sidebar .accordion a:hover {
 color:#9fa714;
 text-decoration:none;
}
#sidebar .accordion .ui-state-active {
 display:block;
  background:url(../images/arrow-rt.gif) 100% 5px no-repeat;
 margin-right:11px;
 color:#9fa714;
 text-decoration:none;
}
#sidebar .slide {padding:1px 0 0 28px;}
#sidebar .slide ul {
 margin:0;
 padding:0;
 list-style:none;
}
#sidebar .slide ul li {
 border:0;
 padding:4px 0 2px;
}
#sidebar .slide ul li.active a,
#sidebar .slide ul a:hover {
 background:none;
 color:#9fa714;
}

I have the following jquery script...

$(document).ready(function(){  
$('ul.accordion').accordion({
active: ".selected",
autoHeight: false,
header: ".opener",
collapsible: true,
event: "click"
});

From the looks of it, you are building a tree-view type menu. As such, I'd say that's what you want...a tree-view...not an accordion.

In your example, you are setting the .opener as the element to expand the accordion. You also are wanting it to be a link to another page. You can't have both.

What you could try is something like this:

+linkname

That separates the element opening the accordion from your link.