Accordion

Outputs accordion component stylesheet, which can be used with html details element or custom disclosure components.

Demos

Basic Accordion

A standard accordion stack with plus-to-minus icons and one-at-a-time behavior.

What is your return policy?

You can return any unused item within 30 days of purchase for a full refund.

Do you offer customer support?

Yes, our customer support team is available 24/7 via email, live chat, or phone.

<div data-ulu-details-group='{ "onlyOneOpen": true }'>
  <details class="accordion">
    <summary class="accordion__summary">
      What is your return policy?
      <span class="accordion__icon" aria-hidden="true">
        <span class="css-icon css-icon--plus-to-minus"></span>
      </span>
    </summary>
    <div class="accordion__content">
      <p>You can return any unused item within 30 days of purchase for a full refund.</p>
    </div>
  </details>
  <details class="accordion">
    <summary class="accordion__summary">
      Do you offer customer support?
      <span class="accordion__icon" aria-hidden="true">
        <span class="css-icon css-icon--plus-to-minus"></span>
      </span>
    </summary>
    <div class="accordion__content">
      <p>Yes, our customer support team is available 24/7 via email, live chat, or phone.</p>
    </div>
  </details>
</div>

Transparent Variant

The `accordion--transparent` modifier blends the component into the background.

Product Features

Water-resistant design
24-hour battery life

Warranty Information

This product comes with a one-year limited warranty covering manufacturer defects.

<div data-ulu-details-group='{ "onlyOneOpen": true }'>
  <details class="accordion accordion--transparent">
    <summary class="accordion__summary">
      Product Features
      <span class="accordion__icon" aria-hidden="true">
        <span class="css-icon css-icon--angle-right-to-down"></span>
      </span>
    </summary>
    <div class="accordion__content">
      <ul>
        <li>Water-resistant design</li>
        <li>24-hour battery life</li>
      </ul>
    </div>
  </details>
  <details class="accordion accordion--transparent">
    <summary class="accordion__summary">
      Warranty Information
      <span class="accordion__icon" aria-hidden="true">
        <span class="css-icon css-icon--angle-right-to-down"></span>
      </span>
    </summary>
    <div class="accordion__content">
      <p>This product comes with a one-year limited warranty covering manufacturer defects.</p>
    </div>
  </details>
</div>

Borderless Variant

The `accordion--borderless` modifier removes external borders for an inline look.

Privacy Settings

Manage who can see your profile and activity status.

Cookie Policy

We use cookies to improve your browsing experience.

<div data-ulu-details-group='{ "onlyOneOpen": true }'>
  <details class="accordion accordion--borderless">
    <summary class="accordion__summary">
      Privacy Settings
      <span class="accordion__icon" aria-hidden="true">
        <span class="css-icon css-icon--angle-down-to-up"></span>
      </span>
    </summary>
    <div class="accordion__content">
      <p>Manage who can see your profile and activity status.</p>
    </div>
  </details>
  <details class="accordion accordion--borderless">
    <summary class="accordion__summary">
      Cookie Policy
      <span class="accordion__icon" aria-hidden="true">
        <span class="css-icon css-icon--angle-down-to-up"></span>
      </span>
    </summary>
    <div class="accordion__content">
      <p>We use cookies to improve your browsing experience.</p>
    </div>
  </details>
</div>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "background-color":               "background",
  "background-color-open":          white,
  "border-color":                   "rule-light",
  "border-radius":                  true,
  "border-width":                   1px,
  "box-shadow":                     none,
  "margin":                         (1.5em 0),
  "margin-between":                 0,
  "padding-x":                      1.25em,
  "padding-y":                      1.25em,
  "icon-background-color":          transparent,
  "icon-background-color-hover":    transparent,
  "icon-border-radius":             50%,
  "icon-color":                     "link",
  "icon-color-hover":               "link-hover",
  "icon-font-size":                 1em,
  "icon-margin":                    1em,
  "icon-size":                      auto,
  "icon-stroke-width":              0.15em,
  "summary-background-color":       #f6f6f6,
  "summary-color":                  null,
  "summary-background-color-hover": null,
  "summary-color-hover":            null,
  "summary-line-height":            null,
  "summary-padding-y":              1em,
  "summary-type-size":              false,
  "summary-font-weight":            bold,
  "summary-border-enabled":         true,
  "summary-border-color":           "rule-light",
  "summary-border-width":           1px,
  "transparent-content-padding":    (1em 0),
  "borderless-margin-between":      0.5em,
  "active-selector":                ".is-active"
);

File Information

File: _accordion.scss
Group: accordion
Type: variable
Lines (comments): 25-58
Lines (code): 60-94

Map Properties

Name	Type	Default	Description
background-color	Color	background	This is the background color of the accordion before it is expanded.
background-color-open	Color	white	This is the background color of the accordion when it is expanded. This will change the background color of the accordion's summary as well as the details.
border-color	String	"rule-light"	The color of the accordion border.
border-radius	Boolean	Number	true
border-width	Dimension	1px	The width of the borders of the accordions.
box-shadow	CssValue	none	Adds a box shadow to accordion container.
margin	Dimension	(1.5em 0)	This is the margin above and below the accordion. Multiple Accordions will stack. See margin-between below.
margin-between	Dimension	0	This adds a margin between adjacent accordions. By default, accordions do not have any net margin between each other.
padding-x	Dimension	1.5em	Singular value for the left and right padding.
padding-y	Dimension	1.5em	Singular value for the top and bottom padding.
icon-background-color	Color	transparent	The background color of the icon.
icon-background-color-hover	Color	transparent	The background color of the icon when hovered or focused.
icon-border-radius	Number	50%	The border-radius of the icon.
icon-color	String	link	Color of the icon. This uses color.scss, so the value of this option should be a color variable from color.scss.
icon-color-hover	String	link-hover	Color of the icon when hovered or focused on. This uses color.scss, so the value of this options should be a color variable from color.scss.
icon-font-size	Dimension	1em	The font-size of the icon.
icon-margin	Dimension	1em	The margin to the left of the icon.
icon-size	Dimension	auto	The size of the icon. Used as the base in the flex property.
icon-stroke-width	Dimension	0.15em	The stroke width of the icon.
summary-background-color	Color	#f6f6f6	The background color for the summary (toggle button) of the accordion.
summary-background-color-hover	Color	null	The background color for the summary (toggle button) of the accordion when hovered.
summary-color	Color	null	The color of the text in the accordion summary.
summary-color-hover	Color	null	The color of the text in the accordion summary when hovering or focusing on it.
summary-line-height	Dimension	null	Adjusts the line height of the summary element.
summary-padding-y	Dimension	1em	The vertical padding of the summary.
summary-type-size	String	Boolean	"large"
summary-border-enabled	Boolean	true	Whether the summary has a border when the accordion is open.
summary-border-color	Color	rule-light	The color of the summary border.
summary-border-width	Dimension	1px	The width of the summary border.
transparent-content-padding	Dimension	(0.25em 0)	The padding of the content area for transparent accordions.
borderless-margin-between	Dimension	0.5em	Margin between accordions when using no-border modifier.
active-selector	String	'.is-active'	The selector used for the active state of a non- accordion.

Mixins

set()

Mixin

Change modules $config

File Information

File: _accordion.scss
Group: accordion
Type: mixin
Lines (comments): 96-99
Lines (code): 101-103

Examples

@include ulu.component-accordion-set(( "property" : value ));

Parameters

Name	Type	Description
$changes	`Map`	Map of changes

Require

$config

styles()

Mixin

Prints component styles

File Information

File: _accordion.scss
Group: accordion
Type: mixin
Lines (comments): 115-118
Lines (code): 120-278

Demo

View

Examples

@include ulu.component-accordion-styles();

Require

get()

Functions

get()

Function

Get a config option

File Information

File: _accordion.scss
Group: accordion
Type: function
Lines (comments): 105-108
Lines (code): 110-113

Examples

@include ulu.component-accordion-get("property");

Parameters

Name	Type	Description
$name	`Map`	Name of property

Require

$config

Jump To:

Demos

Basic Accordion

Transparent Variant

Borderless Variant

Variables

$config

Map Properties

Mixins

set()

Examples

Parameters

Require

styles()

Demo

Examples

Require

Functions

get()

Examples

Parameters

Require