Accordion - Markup ready

[teaganm]

We’re using the Bootstrap accordions as the basis for this widget: http://getbootstrap.com/javascript/#collapse-example-accordion

On the ‘panel-group’ element, we need the ID to be unique on the page. We’d like to start at 1 as shown in the first section of the example. If any additional Accordion widgets are added on the page, they would be 2, 3, etc as shown in the second section.

The panel group ID is referenced in the ‘accordion-toggle’ element in each accordion item.

Each accordion item has its own unique ID as well which is also referenced in the ‘accordion-toggle’ element - the first is collapseOne, and it increases by one for each. We need the ID to be unique on the page as well, as shown in the example.

For the form:

• Title field outputs into into the h4 and into the h2 as shown in the first item “Business Development Coordinator”
• Icon is output directly before the title (please remove the Icon Style options)
• Content is out after the h2 (Lorem Ipsum)
• Buttons are output into ‘accordion-btn’

You can ignore the icon and button markup in the example, please use the same markup as in other widgets.

Can we add a checkbox into the form for each collapsable item, at the very bottom after the second button that says “On page load, show this item expanded instead of collapsed” If checked, add the ‘in’ class onto the ‘panel-collapse’ element like this:

<div id="collapseOne" class="panel-collapse collapse in">

Instead of

<div id="collapseOne" class="panel-collapse collapse">

Thanks!

[adiraoco]

Implemented in 1c1950b6bb32d0788d603b2fa8ff0ecf33282ea6 and 10df640ccf9f096630e47cb82dfa0af9020ee7cc.

@teaganm for the toggle id's, I used collapse1, collapse2 etc. instead of collapseOne, collapseTwo,.. please let me know if this causes any issues. Thanks

[teaganm]

That's great, thanks Adi. Just one thing - please remove the Icon Style options for the main icon in the accordion.

[adiraoco]

Removed field in 620a7d1e74167d4af283df9ef5011a367feafc15.

[teaganm]

Thanks Adi. The removed field is good. One other thing I noticed though is that it looks like an extra element was added at some point. The markup I'm seeing now is this:

<a data-toggle="collapse" data-parent="#accordion1" href="#collapse1" class="accordion-toggle">
  <div class="-med-icon">
    <span class="sow-icon-fontawesome" data-sow-icon="&#xf042;" ></span>
  </div>
  Title Goes Here                       
</a>

The "-med-icon" div should not be there. Thanks!

[adiraoco]

@teaganm can you please check if you are facing this issue with a fresh widget. Some options are being carried forward from before the changes. Thanks.

[teaganm]

@adiraomj Yes, I updated to the latest version of the theme and plugin, and then I created a new page and added the widget. I am seeing the same markup as I posted above.

Is that not how it is coming up for you?

[adiraoco]

I'll have another look

[adiraoco]

Fixed the issue with 7448f80818235c0ec51e0213fffef90c16ef95e8. @teaganm Please have another look. Thanks.

[teaganm]

Looks great, thanks!