UI Kit

Overview
Principles
Icons
Colors
Flex grid
Functions
Grid
Media
Mixins
Typography
Utility
Button
Checkbox
Emoji
Field
Input
Multiselect
Numberinput
Radio
Select
Switch
Textarea
Tokeninput
Upload
Box
Emptystate
Field
Fullheight
Header
Infolayer
Phone
Separator
Fixed
Deprecated Flex Grid
Grid
Accordion
Navigation bar
Pagination
Steps
Tab
Verticalnav
Alert
Notice
Progress
Spinner
Validator
Button
Button group
Button radio
Calendar
Card
Carousel
Chart
Colorpicker
Compare
Criteria
Datepicker
Daterange
Datetimepicker
Dialog
Dropdown
Fieldset
Inplaceeditor
Label
List
Overlay
Ring
Snackbar
Table
Tooltip

Accordion

Last update:
()
Message doc(search): new tags and hidden components --skip-ci
Committer: Tamás Bíró
Version history

Single

Copy Jade
Copy HTML
Show code
Hide code
<input type="radio"> 

<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>
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

Multiple

Copy Jade
Copy HTML
Show code
Hide code
<input type="checkbox"> 

<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>
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

Variations

Stretched
Copy Jade
Copy HTML
Show code
Hide code
.e-accordion-stretch 

<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>
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

Without checkbox/radio
Copy Jade
Copy HTML
Show code
Hide code
.e-accordion__title-active, .e-accordion__title-disabled .e-accordion__content-active 

<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>
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

Service specific variations

Automation center sidemenu.e-accordion-sidebar

Form
Data Change
Send Email
Export Contacts
Send SMS

Related components

TabNodeicon