JqueryUI Tabs and Accordions

I have a page layout template that I am using JqueryUI Tabs on. The tabs work beautifully.  I have added Webzone parts on each tab using the design manager. They work fine. I have a CSWP that uses the JqueryUI Accordion for my that displays the results of a list based on managed term store. There is the problem.

Tab #1 According looks fine.

On every other tab using the same query just different term store.  The accordion is broken.

When I look at the source code, the jqueryUI css isn't being applied to the other CSWPs like the first.  Any clue as to why not.  I've never had a problem with this display template before but I've never used it multiple times on the same page.

This Just IN.....

If I remove the Accordion web part from the first tab, ie. change the display template.  It works on tab #2 but not tabs #3 or 4

April 27th, 2015 2:55pm

So I reproduced this in plain html.  It has to deal with the multiple function calls to accordion.  I need to reference them like this. 

 $("#accordion1").accordion();
    $("#accordion2").accordion(); 

The problem now is how to do this dynamically.  I don't want to have to create four different display templates...  Is there a way to add JavaScript to parse the DIV tags?

  • Marked as answer by StevenBennett Monday, April 27, 2015 8:19 PM
Free Windows Admin Tool Kit Click here and download it now
April 27th, 2015 7:46pm

Ok. Need to update. Now all accordions but the first will not except the heightStyle: "content" option.
April 28th, 2015 9:10am

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics