JQuery Accordian: Understanding header links

Question

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 li {
 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"
});

Answer 1

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.

Answer 2

I'm not sure I follow. The following is what I found earlier, but not sure how to make it work opening the page in location.href or where to put it in the function:

 $('.stats a').click(function(){  
  expander.accordion('disable');
  window.open($(this).attr('href'));

setTimeout ( function() {  
 expander.accordion('enable');  
}, 250 );

http://stackoverflow.com/questions/332384/jquery-accordion-links-dont-work

I guess this isn't the right application of the Accordion UI?

Thanks again for any help.

Answer 3

First let me apologize for the way my comments are showing up. Apparently, I should have signed up before asking my question so I would have the ability to comment, instead of posting answers.

Referring to DAs comment, I had found the timer example (see link above) as a way to disable Accordion temporarily, so the .opener element could act as a link also, then re-enable Accordion, but really didn't understand the application and have no idea how to make that open in the same window.

To reiterate my goal, I would like the the main menu item to serve as a link, as well as the Accordion.opener (a tree-view may be a better option) and was hoping to find a method to make this work.

I'm not sure I follow the "+linkname" answer above – could you expound your suggestion please.

Thanks for your patience.