1

I am using jquery tools + livequery. I have a horizontal accordion with 4 elements. On initial page load they are created by a PHP-script, so the accordion works great - first tab opens, and everything slides properly. (just like in this example: http://flowplayer.org/tools/demos/tabs/accordion-horizontal.html)

I have a timer event that reloads the accordion elements via JSON. As soon as that happens - tabs aren't activated. I've been trying to attach a livequery event once the accordion is reloaded, but I can't figure it out.

Structure is like this:

<div id="accordion">
<div class="accordion_element>[tab content]</div>
<div class="accordion_element>[tab content]</div>
<div class="accordion_element>[tab content]</div>
<div class="accordion_element>[tab content]</div>
</div>

I activate the accordion by:

$("#accordion").tabs("#accordion .div_body", {
    tabs: '.img_bgr', 
    effect: 'horizontal'
});

And it works like a charm - first tab is expanded, other tabs are clickable and expand when clicked. Then every minute I trigger:

$.getJSON("accordion.php", function(json){
    $.each(json, function(key, val) {
    //-------parse json here and append each accordion_item (I empty the accordion prior)
    $('#accordion').append(accordion_item);
    });
});

So at this point i have a beautiful accordion, but it is not activated - it's just tabs.

How do i attach a livequery event to the following so that it effects all future updates to #accordion? 

$("#accordion").tabs("#accordion .div_body", {
    tabs: '.img_bgr', 
    effect: 'horizontal'
});

essentially i need to be able to assign .live (or livequery) to .tabs which will control all clicks etc.

on this page - http://flowplayer.org/tools/demos/tabs/accordion-horizontal.html
imagine the 3 images + exposed text gets reloaded with json and .tabs has no further effect.

like this (which doesnt work of course)

$("#accordion").live( '.tabs', function(){
"#accordion .div_body", {
tabs: '.img_bgr', 
effect: 'horizontal'
};
vroomer
  • 11
  • 3
  • i had an answer here - but it disappeared.. have no idea if i did that - if i did - I'm sorry . to respond >.tabs is a function that comes with jquery tools and it handles all clicks and events on its own. so in the above function- $("#element_that_contains_tabs").tabs (#element that will be exposed as the trigger is clicked%, { tabs: %trigger%, effect} if i assign live click on .class -> it fires up multiple times and messes with .tabs so i have stuff all over the page =) I tried to assign it to #unique_id, but i'm rhen re-inventing the function. – vroomer Mar 13 '11 at 21:28

1 Answers1

0

Have you tried this?

$("#accordion").livequery(function() {
  $(this).tabs("#accordion .div_body", {
    tabs: '.img_bgr', 
    effect: 'horizontal'
});
Stefan
  • 3,850
  • 2
  • 26
  • 39