Tabs & Accordions

Peter van Westen ADMIN

Please try the latest development version from:
regularlabs.com/development-releases

There is a new global setting to add a + / - icon to the accordion handles.

You can also override this via the {accordion} tags.
The syntax is a little different to Sliders for J3.

{accordion ... icons="true"}

And you only have to add that to the first tag. It will be applied to the entire accordion set.

Please post a rating at the Joomla! Extensions Directory

Peter van Westen ADMIN

Peter van Westen ADMIN

This is the CSS responsible for adding the + / - symbols.
You can of course override that with whatever you want via your template's CSS.

[data-rlta-element=container][data-rlta-state=ready][data-rlta-type=accordions][data-rlta-icons=true] > [data-rlta-element=button]:after {
  content: "+";
  font-weight: bold;
  float: right;
  margin-left: 1rem;
}
[data-rlta-element=container][data-rlta-state=ready][data-rlta-type=accordions][data-rlta-icons=true] > [data-rlta-element=button]:not([data-rlta-state=closed]):after {
  content: "−";
}

Please post a rating at the Joomla! Extensions Directory

Timothy Jones

Timothy Jones

Thank you - works like a charm.

Regards

Tim

Michel Gauthier

Michel Gauthier

The accordion title is a H3 size. How can I change H3 for H4, H5, H6 or H7? Or, how can I change styling for H3 in the accordion title ?
Thanks in advance.

Peter van Westen ADMIN

Peter van Westen ADMIN

Check the advanced settings in the system plugin.

For styling, use CSS.

Please post a rating at the Joomla! Extensions Directory

bwd

bwd

Is it possible to get the filled circle with white inset that the J3 version had?
docs3.regularlabs.com/sliders/examples/v...-examples#icon-class

I tried with css but no luck:

.fa-circle-plus:before {
	content: "\f055";
}
.fa-circle-minus:before {
	content: "\f055";
}
[data-rlta-element=container][data-rlta-state=ready][data-rlta-type=accordions][data-rlta-icons=true] > [data-rlta-element=button]:after {
    content: "\f055";
}
[data-rlta-element=container][data-rlta-state=ready][data-rlta-type=accordions][data-rlta-icons=true] > [data-rlta-element=button]:not([data-rlta-state=closed]):after {
  content: "\f056";
}

** Edit: nvm figured it out that I was just missing:
font-family: FontAwesome

I left it here since it may help someone else.

Thanks,
Dave

Peter van Westen ADMIN

Peter van Westen ADMIN