Accordion

Default

Preview

Code

HTML

Code

JSX/TSX

Toggle Accordion 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod

Toggle Accordion 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo

<div class="accordion-group danger">
	<div class="accordion">
		<input class="toggle" id="accordion-color-danger-1" type="checkbox" />
		<label class="title" for="accordion-color-danger-1">
			<p>Toggle Accordion 1</p>
		</label>
		<div class="content">
			<div class="min-h-0">
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
					necessitatibus iusto laborum autem placeat aspernatur inventore eius
					deleniti reprehenderit? Numquam commodi totam mollitia quod
				</p>
			</div>
		</div>
	</div>
	<div class="accordion">
		<input class="toggle" id="accordion-color-danger-2" type="checkbox" />
		<label class="title" for="accordion-color-danger-2">
			<p>Toggle Accordion 2</p>
		</label>
		<div class="content">
			<div class="min-h-0">
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
					necessitatibus iusto laborum autem placeat aspernatur inventore eius
					deleniti reprehenderit? Numquam commodi totam mollitia quo
				</p>
			</div>
		</div>
	</div>
</div>

<div className='accordion-group danger'>
  <div className='accordion'>
    <input className='toggle'
      id='accordion-color-danger-1'
      type='checkbox' />
    <label className='title'
      htmlFor='accordion-color-danger-1'>
      <p>
        Toggle Accordion 1
      </p>
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
        </p>
      </div>
    </div>
  </div>
  <div className='accordion'>
    <input className='toggle'
      id='accordion-color-danger-2'
      type='checkbox' />
    <label className='title'
      htmlFor='accordion-color-danger-2'>
      <p>
        Toggle Accordion 2
      </p>
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo
        </p>
      </div>
    </div>
  </div>
</div>

Bordered

Preview

Code

HTML

Code

JSX/TSX

Toggle Accordion 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod

Toggle Accordion 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo

<div class="accordion-group bordered bw">
	<div class="accordion">
		<input class="toggle" id="accordion-bordered-bw-1" type="checkbox" />
		<label class="title" for="accordion-bordered-bw-1">
			<p>Toggle Accordion 1</p>
		</label>
		<div class="content">
			<div class="min-h-0">
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
					necessitatibus iusto laborum autem placeat aspernatur inventore eius
					deleniti reprehenderit? Numquam commodi totam mollitia quod
				</p>
			</div>
		</div>
	</div>
	<div class="accordion">
		<input class="toggle" id="accordion-bordered-bw-2" type="checkbox" />
		<label class="title" for="accordion-bordered-bw-2">
			<p>Toggle Accordion 2</p>
		</label>
		<div class="content">
			<div class="min-h-0">
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
					necessitatibus iusto laborum autem placeat aspernatur inventore eius
					deleniti reprehenderit? Numquam commodi totam mollitia quo
				</p>
			</div>
		</div>
	</div>
</div>

<div className='accordion-group bordered bw'>
  <div className='accordion'>
    <input className='toggle'
      id='accordion-bordered-bw-1'
      type='checkbox' />
    <label className='title'
      htmlFor='accordion-bordered-bw-1'>
      <p>
        Toggle Accordion 1
      </p>
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
        </p>
      </div>
    </div>
  </div>
  <div className='accordion'>
    <input className='toggle'
      id='accordion-bordered-bw-2'
      type='checkbox' />
    <label className='title'
      htmlFor='accordion-bordered-bw-2'>
      <p>
        Toggle Accordion 2
      </p>
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo
        </p>
      </div>
    </div>
  </div>
</div>

Focusable

Preview

Code

HTML

Code

JSX/TSX

Toggle Accordion 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod

Toggle Accordion 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo

<div class="accordion-group bw">
	<div class="accordion" tabindex="0">
		<label class="title"> Toggle Accordion 1 </label>
		<div class="content">
			<div class="min-h-0">
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
					necessitatibus iusto laborum autem placeat aspernatur inventore eius
					deleniti reprehenderit? Numquam commodi totam mollitia quod
				</p>
			</div>
		</div>
	</div>
	<div class="accordion" tabindex="0">
		<label class="title"> Toggle Accordion 2 </label>
		<div class="content">
			<div class="min-h-0">
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
					necessitatibus iusto laborum autem placeat aspernatur inventore eius
					deleniti reprehenderit? Numquam commodi totam mollitia quo
				</p>
			</div>
		</div>
	</div>
</div>

<div className='accordion-group bw'>
  <div className='accordion'
    tabIndex='0'>
    <label className='title'>
      Toggle Accordion 1
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
        </p>
      </div>
    </div>
  </div>
  <div className='accordion'
    tabIndex='0'>
    <label className='title'>
      Toggle Accordion 2
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo
        </p>
      </div>
    </div>
  </div>
</div>

Force open

Preview

Code

HTML

Code

JSX/TSX

Toggle Accordion 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod

Toggle Accordion 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo

<div class="accordion-group bw">
	<div class="accordion open">
		<input class="toggle" id="accordion-fo-bw-1" type="checkbox" />
		<label class="title" for="accordion-fo-bw-1">
			<p>Toggle Accordion 1</p>
		</label>
		<div class="content">
			<div class="min-h-0">
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
					necessitatibus iusto laborum autem placeat aspernatur inventore eius
					deleniti reprehenderit? Numquam commodi totam mollitia quod
				</p>
			</div>
		</div>
	</div>
	<div class="accordion">
		<input class="toggle" id="accordion-fo-bw-2" type="checkbox" />
		<label class="title" for="accordion-fo-bw-2">
			<p>Toggle Accordion 2</p>
		</label>
		<div class="content">
			<div class="min-h-0">
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
					necessitatibus iusto laborum autem placeat aspernatur inventore eius
					deleniti reprehenderit? Numquam commodi totam mollitia quo
				</p>
			</div>
		</div>
	</div>
</div>

<div className='accordion-group bw'>
  <div className='accordion open'>
    <input className='toggle'
      id='accordion-fo-bw-1'
      type='checkbox' />
    <label className='title'
      htmlFor='accordion-fo-bw-1'>
      <p>
        Toggle Accordion 1
      </p>
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
        </p>
      </div>
    </div>
  </div>
  <div className='accordion'>
    <input className='toggle'
      id='accordion-fo-bw-2'
      type='checkbox' />
    <label className='title'
      htmlFor='accordion-fo-bw-2'>
      <p>
        Toggle Accordion 2
      </p>
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo
        </p>
      </div>
    </div>
  </div>
</div>

Classes

Class Name	Description
accordion-group	Wrapper htmlFor accordion group
accordion	Wrapper htmlFor the title and content
bordered	Set Bordered Style
toggle	Toggle htmlFor accordion
title	Title section of the accordion
content	Content section of the accordion
open	The accordion will be opened by default

Overview Avatar