CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
tsdexter
tsdexter

Reputation: 2991

How can I activate a jQuery UI Accordion based on a data-active attribute?

For some reason I can't activate an accordion panel using data stored in a data-active attribute?

My HTML looks like this (after it's turned to an accordion and has all the classes added):

<div class="gcAccordion  ui-accordion ui-widget ui-helper-reset" style="" data-active="1" role="tablist">
    <h3 class="gcAccordionTitle  ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" style="display: block;" role="tab" id="ui-accordion-1-header-0" aria-controls="ui-accordion-1-panel-0" aria-selected="false" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>This is a title</h3>
    <div class="gcAccordionContent  ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;" id="ui-accordion-1-panel-0" aria-labelledby="ui-accordion-1-header-0" role="tabpanel" aria-expanded="false" aria-hidden="true">This is some content</div>
    <h3 class="gcAccordionTitle  ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" style="display: block;" role="tab" id="ui-accordion-1-header-1" aria-controls="ui-accordion-1-panel-1" aria-selected="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>This is a 2nd title</h3>
    <div class="gcAccordionContent  ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;" id="ui-accordion-1-panel-1" aria-labelledby="ui-accordion-1-header-1" role="tabpanel" aria-expanded="false" aria-hidden="true">This is some 2nd content</div>
    <h3 class="gcAccordionTitle  ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" style="display: block;" role="tab" id="ui-accordion-1-header-2" aria-controls="ui-accordion-1-panel-2" aria-selected="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>This is a 3rd title</h3>
    <div class="gcAccordionContent  ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;" id="ui-accordion-1-panel-2" aria-labelledby="ui-accordion-1-header-2" role="tabpanel" aria-expanded="false" aria-hidden="true">This is some 3rd content</div>
</div>

Javascript:

$('.gcAccordion').accordion({
  collapsible: true,
  heightStyle: "content",
  autoHeight: false,
  active: false,
  create: function(event, ui){
    $('.gcAccordion').each(function(){
      console.log($(this).attr('data-active'));
      $(this).accordion( "option", "active", $(this).attr('data-active'));          
    });
  }      
});

The console.log call properly outputs a 1 to the log but for some reason it doesn't activate the second panel. If I use this line for line 9 in the javascript it works:

$(this).accordion( "option", "active", 1);

But it won't work with the data-active attributes 1 value. Any ideas what's going on?

edit: removed link as the page is no longer active and all the code is in the question anyway.

UPDATE:

Thanks for the help. I needed to parseInt($(this).attr('data-active'))

Upvotes: 0

Views: 6525

Answers (1)

Ian
Ian

Reputation: 50905

The type of value returned by .attr() is a string. I'm betting you need a true/false (0/1) value, so try:

$(this).accordion("option", "active", +$(this).attr('data-active'));

The + unary operator is similar to parseInt, converting strings to numbers, but has less strict parsing, and is faster (I think).

Something that might be better is:

$(this).accordion("option", "active", $(this).attr('data-active') === "1" ? 1 : 0);

This will cause the accordion pane to be active only if the data-active attribute exists and its value is "1". Any other combination of existence/value will not open the pane.

EDIT:

Ignore the second example, as the "active" option accepts a 0-based integer, as the OP pointed out. I assumed it accepted true/false for some reason.

Upvotes: 3

Related Questions