Geek Answers Handbook

JQuery Accordion: links not working

I am working on a page using the jQuery accordion interface element . I modeled my HTML with this example, except that inside the <li> elements I have some unordered list 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">Example Link</a></li> <li><a href="http://example.com">Example Link</a></li> </ul> <!--and of course there another group -->

Problem: links do not work

In all the browsers I tested, the links in these accordion menus invoke the accordion section to collapse , rather than linking you to a linked page. (I can still right-click and go to the linked site.)

Could this be a click binding problem?

+3
source share
9 answers

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

 $(".ui-accordion-container").accordion( { active: "a.default", ..., header: "a.accordion-label" } );
+9
source

Try adding inline onlick to prevent event bubbles:

 ... <a href='#' onclick="event.stopPropagation()" class="accordion-label">A Group of Links</a> ...

Or a domready event like this:

 $(".toggle-title a").click(function(event){ event.stopPropagation()})

However, the latter did not work for me, although the code wise makes sense, jQuery clicks! Anyone who can explain what is not shy for me, I came from MooTools and the Google Closure background, which has addEvent functions.

+5
source

I had the same problem and could not find the answer anywhere. In fact, a couple of sources said this was simply not possible.

With further play, I found a working solution. It may not be great, but it works like a charm.

First, just make sure the links you want to click and that are immune to accordion controls are 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 is tapped when a link is clicked inside the accordion header. When this is the case, the accordion is temporarily disconnected, retaining it as usual when fired. Then the link opens in this case in a new window, but you can also use document.location

If we turn on the accordion again, it will still shoot and switch the accordion. I found that a super-short timeout provides enough latency.

Hope this helps someone!

+4
source

AlwaysOpen must be true.

0
source

Maybe my proposal does not use the accordion () function [which I did not know about before, thanks for its appearance :)], but still showing how to have an Accordion interface 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.

0
source

The following is an alternative script for those still experiencing this problem: http://twostepmedia.co.uk/notes/development/jquery-accordion/

0
source

As my answer to your other question says:

  navigation: true

Must be installed in your options list.

-one
source

More articles:


All Articles