tags:

views:

4721

answers:

9
+1  Q: 

jQuery Accordion: links don't work

I'm working on a page using jQuery's accordion UI element. I modeled my HTML on that example, except that inside the <li> elements, I have some unordered lists of links. Like this:

  $(document).ready(function() {
     $(".ui-accordion-container").accordion(
        {active: "a.default", alwaysOpen: true, autoHeight: false}
     );
  });

  <ul class="ui-accordion-container">
  <li> <!-- Start accordion section -->
   <a href='#' class="accordion-label">A Group of Links</a>
   <ul class="linklist">
      <li><a href="http://example.com"&gt;Example Link</a></li>
      <li><a href="http://example.com"&gt;Example Link</a></li>
   </ul>

   <!--and of course there's another group -->

Problem: Links don't work

In all browsers I've tested, the links in those accordion menus cause the accordion section to collapse instead of taking you to the linked page. (I can still right-click and go to the linked site.)

Could this be some kind of click binding issue?

A: 

As my answer to your other question says:

 navigation: true

Should be set in your option list.

Pim Jager  2008-12-01 22:45:03
This didn't help me. The documentation says "If set, looks for the anchor that matches location.href and activates it."
Nathan Long  2008-12-02 14:50:12
+2  A: 

By default, the accordian widget sets all the links to headers. To change it, you need to specify a selector with the headers option. So, your code would look like this:

$(".ui-accordion-container").accordion(
   { active: "a.default", ...,  header: "a.accordion-label" }
);
Matthew Crumley  2008-12-01 22:57:22
A: 

AlwaysOpen should be true.

 2009-05-19 11:34:57
A: 

I had this exact same problem and could not find an answer anywhere. In fact, a couple sources said it just couldn't be done.

Upon further playing, I did find a working solution. May not be great, but it works like a charm.

First, just make sure the links you want to be clickable, and immune to the accordion controls, is easily identifiable. I had a class on mine.

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

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

});

Essentially, this listens for when a link inside the accordion header is clicked. When it is, the accordion is temporarily disabled, keeping it from firing as normal. The link is then opened, in this case, in a new window but you could use document.location as well

If we re-enabled the accordion immediately, it will still fire and toggle the accordion. I found that a super-short timeout provides enough delay.

Hope this helps someone!

Andrew Jones  2009-07-28 17:23:50
A: 

hi there,

May be my suggestion is not using accordion() function, [ which i didn't know about before, Thank you for bring it up :) ] but still show how to have have an Accordion UI Element.

HTML

<body id="body">
    <h2>Accordian</h2>
     <div id="accordion" class="">

       <div class="toggle_all">
         <ul class="links">
           <li><a class="openall" href="#"><span>Open All</span></a></li>
           <li>|</li>
           <li><a class="closeall" href="#"><span>Close All</span></a></li>
         </ul>
       </div>

       <!-- toggleAll ends -->
       <div class="accordion">
         <div class="section_title_accordion design-gray">
           <h3><a href="#" class="open"><span>Lorem ipsum</span></a></h3>
         </div>
         <!-- section_title_accordion ends -->
         <div class="accordion_content"> <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </div>

         <!-- accordion_content ends -->
       </div>
       <!-- accordion ends -->
       <div class="accordion">
         <div class="section_title_accordion design-gray">
           <h3><a href="#" class="open"><span>Lorem ipsum</span></a></h3>
         </div>
         <!-- section_title_accordion ends -->

         <div class="accordion_content"> <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </div>
         <!-- accordion_content ends -->
       </div>
       <!-- accordion ends -->
       <div class="accordion">
         <div class="section_title_accordion design-gray">
           <h3><a href="#" class="open"><span>Lorem ipsum</span></a></h3>

         </div>
         <!-- section_title_accordion ends -->
         <div class="accordion_content"> <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </div>
         <!-- accordion_content ends -->
       </div>
       <!-- accordion ends -->
     </div>

     <!-- #accordion ends -->
</body>

CSS

<style type="text/css" >
#body { margin-left:20%; font:12px verdana; }
.accordion { width:500px; }
h3 { margin:0; padding:0; }
.section_title_accordion { float:left; width:500px; margin:2px 0 0; }
.section_title_accordion h3 span { margin:0; float:left; color:#fff; padding:2px 0 3px 10px; }
.section_title_accordion a span { padding-left:20px; }
.accordion_content { border-bottom:1px solid #666666; border-left:1px solid #666666; border-right:1px solid #666666; float:left; padding:5px 3px; }
.accordion_content span.content { margin:5px 0 0; }
.design-gray { background:#003366; }
.design-gray a { color:#fff; float:left; width:100%; height:22px; background:#003366; text-decoration:none; }
.design-gray a:hover { text-decoration:underline;}
.on .design-gray a { color:#fff; float:left; width:100%; height:22px; background:#003366;}
.accordion_content_hover { background:#ffffcc; color:#000099; }
.toggle_all { padding:20px 0; width:500px; margin-bottom:5px; }
.toggle_all ul { padding:0; margin:0; }
.toggle_all ul li { list-style-type:none; }
.toggle_all .links li { float:left; padding-left:5px; }
.toggle_all .links li a, .toggleAll .links span { color:#666666; }
</style>

jQuery

<script language="javascript" type="text/javascript">

$(document).ready(function() {
  $(".accordion_content").hide();
  $("a.open").click(function() {
    $(this).parents(".accordion").find(".accordion_content").toggle();
     $(this).parents(".accordion").toggleClass('on'); 
     return false;
  });   

    $(".accordion_content").mouseover(function() {
      $(this).addClass('accordion_content_hover');
      return false;  
    });

    $(".accordion_content").mouseout(function() {
      $(this).removeClass('accordion_content_hover');
      return false;  
    });

    $("a.openall").click(function() {
        $(".accordion_content").show();
     $(this).parents("#accordion").find(".accordion").addClass('on');
     return false;
    });
    $("a.closeall").click(function() {
          $(".accordion_content").hide();
       $(this).parents("#accordion").find(".accordion").removeClass('on');
     return false;
    });
});
</script>

Hope this helps.

egyamado  2009-07-28 17:49:31
A: 

Thank you Marthew for your solution! That works! And thanks, Nathan for your question.

 2009-08-30 08:01:11
You're welcome. If you're able (not sure if reputation points are required), voting up the question would be a nice thank you. :)
Nathan Long  2009-08-31 14:16:48
+1  A: 

here is a really simple solution

http://www.designerstalk.com/forums/help-me/41297-jquery-accordion-embedding-links-help-needed.html

 2009-10-25 23:10:53
A: 

it helped me thanks

ooty  2010-01-02 16:19:49
A: 

Solution http://www.colorizate.com/jquery-acordion-hack-link-interno/

Colorizate  2010-07-15 00:49:40

related questions

Communicating between websites (using Javascript or ?)
Javascript Unit-testing?
How can I return a variable from a $.getJSON function
Is there an "exists" function for jQuery
Why do I receive a q[num] error when aborting a jQuery queue pipeline?
How do I fire an event when a iframe has finished loading in jQuery?
How to compare html entity with JQuery
Problems while submitting a UTF-8 form textarea with JQuery/AJAX
How do I get the coordinates of the caret in text boxes?
SimpleModal breaks ASP.Net Postbacks
How would you handle errors when using jQuery.ajax() ?
Where is the best jQuery "plugins" library on the web?
Where can I learn jQuery? Is it worth it?
Keeping key value pairs together in HTML <select/> with JQuery?
How to set encoding in .getJSON JQuery
What is a selector engine?
Escaping HTML strings with jQuery
jQuery AJAX vs. UpdatePanel
What's the best way to code a desktop application-like menu bar in Javascript?
Dynamic Alphabetical Navigation
Scrolling Overflowed DIVs with JavaScript
How do I add a pre tag inside a code tag with jQuery?
Graph visualization code in javascript?
Wrapping lists into columns
Interview Questions for an Intern