Accordion

Single <input type="radio">

1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
<div class="e-accordion">
  <input type="radio" name="accordion-radio" id="accordion-radio-0" checked>
  <label for="accordion-radio-0" class="e-accordion__title">
    Accordion 1
  </label>
  <div class="e-accordion__content">
    1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <input type="radio" name="accordion-radio" id="accordion-radio-1">
  <label for="accordion-radio-1" class="e-accordion__title">
    Accordion 2
  </label>
  <div class="e-accordion__content">
    2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <input type="radio" name="accordion-radio" id="accordion-radio-2" disabled>
  <label for="accordion-radio-2" class="e-accordion__title">
    Disabled
  </label>
  <div class="e-accordion__content">
    3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <input type="radio" name="accordion-radio" id="accordion-radio-3">
  <label for="accordion-radio-3" class="e-accordion__title">
    Accordion 4
  </label>
  <div class="e-accordion__content">
    4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
</div>

                        <div class="e-accordion">
                          <input type="radio" name="accordion-radio" id="accordion-radio-0" checked>
                          <label for="accordion-radio-0" class="e-accordion__title">Accordion 1</label>
                          <div class="e-accordion__content">1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
                          <input type="radio" name="accordion-radio" id="accordion-radio-1">
                          <label for="accordion-radio-1" class="e-accordion__title">Accordion 2</label>
                          <div class="e-accordion__content">2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
                          <input type="radio" name="accordion-radio" id="accordion-radio-2" disabled>
                          <label for="accordion-radio-2" class="e-accordion__title">Disabled</label>
                          <div class="e-accordion__content">3Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
                          <input type="radio" name="accordion-radio" id="accordion-radio-3">
                          <label for="accordion-radio-3" class="e-accordion__title">Accordion 4</label>
                          <div class="e-accordion__content">4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
                        </div>

Multiple <input type="checkbox">

1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
<div class="e-accordion">
  <input type="checkbox" name="accordion-checkbox" id="accordion-checkbox-0" checked>
  <label for="accordion-checkbox-0" class="e-accordion__title">
    Accordion 1
  </label>
  <div class="e-accordion__content">
    1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <input type="checkbox" name="accordion-checkbox" id="accordion-checkbox-1">
  <label for="accordion-checkbox-1" class="e-accordion__title">
    Accordion 2
  </label>
  <div class="e-accordion__content">
    2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <input type="checkbox" name="accordion-checkbox" id="accordion-checkbox-2" disabled>
  <label for="accordion-checkbox-2" class="e-accordion__title">
    Disabled
  </label>
  <div class="e-accordion__content">
    3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <input type="checkbox" name="accordion-checkbox" id="accordion-checkbox-3">
  <label for="accordion-checkbox-3" class="e-accordion__title">
    Accordion 4
  </label>
  <div class="e-accordion__content">
    4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
</div>

                        <div class="e-accordion">
                          <input type="checkbox" name="accordion-checkbox" id="accordion-checkbox-0" checked>
                          <label for="accordion-checkbox-0" class="e-accordion__title">Accordion 1</label>
                          <div class="e-accordion__content">1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
                          <input type="checkbox" name="accordion-checkbox" id="accordion-checkbox-1">
                          <label for="accordion-checkbox-1" class="e-accordion__title">Accordion 2</label>
                          <div class="e-accordion__content">2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
                          <input type="checkbox" name="accordion-checkbox" id="accordion-checkbox-2" disabled>
                          <label for="accordion-checkbox-2" class="e-accordion__title">Disabled</label>
                          <div class="e-accordion__content">3Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
                          <input type="checkbox" name="accordion-checkbox" id="accordion-checkbox-3">
                          <label for="accordion-checkbox-3" class="e-accordion__title">Accordion 4</label>
                          <div class="e-accordion__content">4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
                        </div>

Variations

Stretched .e-accordion-stretch

Opened accordion sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
Disabled content
Closed accordion content
<div class="e-accordion e-accordion-stretch">
  <input type="checkbox" name="accordion-stretch" id="accordion-stretch-0" checked>
  <label for="accordion-stretch-0" class="e-accordion__title">
    Opened Accordion
  </label>
  <div class="e-accordion__content">
    Opened accordion sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <input type="undefined" name="accordion-stretch" id="accordion-stretch-1" disabled>
  <label for="accordion-stretch-1" class="e-accordion__title">
    Disabled Accordion
  </label>
  <div class="e-accordion__content">
    Disabled content
  </div>
  <input type="undefined" name="accordion-stretch" id="accordion-stretch-2">
  <label for="accordion-stretch-2" class="e-accordion__title">
    Closed Accordion
  </label>
  <div class="e-accordion__content">
    Closed accordion content
  </div>
</div>

                          <div class="e-accordion e-accordion-stretch">
                            <input type="checkbox" name="accordion-stretch" id="accordion-stretch-0" checked>
                            <label for="accordion-stretch-0" class="e-accordion__title">Opened Accordion</label>
                            <div class="e-accordion__content">Opened accordion sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
                            <input type="undefined" name="accordion-stretch" id="accordion-stretch-1" disabled>
                            <label for="accordion-stretch-1" class="e-accordion__title">Disabled Accordion</label>
                            <div class="e-accordion__content">Disabled content</div>
                            <input type="undefined" name="accordion-stretch" id="accordion-stretch-2">
                            <label for="accordion-stretch-2" class="e-accordion__title">Closed Accordion</label>
                            <div class="e-accordion__content">Closed accordion content</div>
                          </div>

Without checkbox/radio .e-accordion__title-active, .e-accordion__title-disabled .e-accordion__content-active

Opened Accordion
Opened accordion sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
Disabled Accordion
Disabled content
Closed Accordion
Closed accordion content
<div class="e-accordion">
  <div class="e-accordion__title e-accordion__title-active">
    Opened Accordion
  </div>
  <div class="e-accordion__content e-accordion__content-active">
    Opened accordion sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <div class="e-accordion__title e-accordion__title-disabled">
    Disabled Accordion
  </div>
  <div class="e-accordion__content">
    Disabled content
  </div>
  <div class="e-accordion__title">
    Closed Accordion
  </div>
  <div class="e-accordion__content">
    Closed accordion content
  </div>
</div>

                          <div class="e-accordion">
                            <div class="e-accordion__title e-accordion__title-active">Opened Accordion</div>
                            <div class="e-accordion__content e-accordion__content-active">Opened accordion sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
                            <div class="e-accordion__title e-accordion__title-disabled">Disabled Accordion</div>
                            <div class="e-accordion__content">Disabled content</div>
                            <div class="e-accordion__title">Closed Accordion</div>
                            <div class="e-accordion__content">Closed accordion content</div>
                          </div>

Service specific variations

Automation center sidemenu.e-accordion-sidebar

Form
Data Change
Send Email
Export Contacts
Send SMS

Related components

TabVerticaltabNodeicon

Last update

Message style(scss): stylelint basics
Date:
()
Committer: Tamás Bíró
Component history