Available as: Web ComponentShortcodeOxygen Element
The classic method to show and hide elements on your website. Can be used
with custom markup for the header and/or content section.
<spx-accordion
icon="happy"
header-text="Click me to show some more text"
content-text="Hello!">
</spx-accordion>
<spx-accordion
header-text="Resize the browser window!"
styling="fluid"
font-size-min="1.5"
font-size-max="3">
</spx-accordion>
<style>
spx-accordion + spx-accordion {
margin-top: 12px;
}
</style>
<spx-accordion
indicator-icon="cube"
header-text="Clicking one accordion will close the other ones"
link="my-link-id"
link-type="close"></spx-accordion>
<spx-accordion
indicator-icon="aperture"
header-text="Clicking one accordion will close the other ones"
link="my-link-id"
link-type="close"></spx-accordion>
<spx-accordion
indicator-icon="apps"
header-text="Clicking one accordion will close the other ones"
link="my-link-id"
link-type="close"></spx-accordion>
<style>
spx-accordion + spx-accordion {
margin-top: 12px;
}
</style>
<spx-accordion
indicator-icon="cube"
header-text="Clicking one accordion will toggle the other ones"
link="my-link-id"
link-type="toggle"></spx-accordion>
<spx-accordion
indicator-icon="aperture"
header-text="Clicking one accordion will toggle the other ones"
link="my-link-id"
link-type="toggle"></spx-accordion>
<spx-accordion
indicator-icon="apps"
header-text="Clicking one accordion will toggle the other ones"
link="my-link-id"
link-type="toggle"></spx-accordion>
<spx-accordion
reverse
icon="happy"
header-text="Click me to show some more text in reverse!"
content-text="Hello in reverse!">
</spx-accordion>
<spx-accordion>
<p slot="header">I am a custom slot</p>
<img slot="content" src="{{ url.examples }}/10.svg" alt=""/>
</spx-accordion>
