Forums

Add unique class or ID to panels

kinokeo 11 Jun, 2013
Hi. Is there a way to add a unique class or ID to the panels when they are set as tabs or sliders? Currently they are just DIVs all with the same class of "panel". I'd like to style each panel differently, so I need a way to differentiate them. The only ways I can think of are to use :nth child (which lacks support in IE8 unless using JQuery) or style all the elements in the form individually - neither of which are really sustainable solutions.
I tried adding something in the "container class" field of the panel, but this doesn't show when using tabs or sliders.
Thanks

Current code is:
<div class="pane-sliders" id="cf_container_10">
<div class="panel">...content of panel here...</div>
<div class="panel">...content of panel here...</div>
</div>
GreyHead 12 Jun, 2013
Hi kinokeo,

As a workaround this JavaScript added in a Load JS action seems to work OK.

I gave the parent tabarea Container a class of 'tabs' here:
window.addEvent('domready', function() {
  var i = 1;
  $$('.tabs dt').each( function(el) {
    el.id = 'tab_'+i;
    i++;
  });
});

Then the tabs are given ids of tab_1, tab_2, . . .

Bob
kinokeo 12 Jun, 2013
Thanks Bob.
I found that code added an ID to the tab headings, but not the actual content area itself. However, I actually need the unique IDs for slider panels at the moment, so I altered to the code to:

window.addEvent('domready', function() {
  var i = 1;
  $$('.pane-sliders > div').each( function(el) {
    el.id = 'panel_'+i;
    i++;
  });
});

which worked for me in this case, adding incrementing panel IDs to each panel.

Not sure how to do the same for the tab content area but I'll cross that bridge when I come to it...

Thanks for the help
This topic is locked and no more replies can be posted.