手风琴

默认

演示

代码

HTML

代码

JSX/TSX

手风琴 1

鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础

手风琴 2

鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础

<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>手风琴 1</p>
		</label>
		<div class="content">
			<div class="min-h-0">
				<p>
					鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
				</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>手风琴 2</p>
		</label>
		<div class="content">
			<div class="min-h-0">
				<p>
					鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
				</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>
        手风琴 1
      </p>
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
        </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>
        手风琴 2
      </p>
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
        </p>
      </div>
    </div>
  </div>
</div>

带有边框样式

演示

代码

HTML

代码

JSX/TSX

手风琴 1

鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础

手风琴 2

鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础

<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>手风琴 1</p>
		</label>
		<div class="content">
			<div class="min-h-0">
				<p>
					鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
				</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>手风琴 2</p>
		</label>
		<div class="content">
			<div class="min-h-0">
				<p>
					鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
				</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>
        手风琴 1
      </p>
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
        </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>
        手风琴 2
      </p>
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
        </p>
      </div>
    </div>
  </div>
</div>

专注

演示

代码

HTML

代码

JSX/TSX

手风琴 1

鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础

手风琴 2

鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础

<div class="accordion-group bw">
	<div class="accordion" tabindex="0">
		<label class="title"> 手风琴 1 </label>
		<div class="content">
			<div class="min-h-0">
				<p>
					鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
				</p>
			</div>
		</div>
	</div>
	<div class="accordion" tabindex="0">
		<label class="title"> 手风琴 2 </label>
		<div class="content">
			<div class="min-h-0">
				<p>
					鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
				</p>
			</div>
		</div>
	</div>
</div>

<div className='accordion-group bw'>
  <div className='accordion'
    tabIndex='0'>
    <label className='title'>
      手风琴 1
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
        </p>
      </div>
    </div>
  </div>
  <div className='accordion'
    tabIndex='0'>
    <label className='title'>
      手风琴 2
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
        </p>
      </div>
    </div>
  </div>
</div>

强制打开

演示

代码

HTML

代码

JSX/TSX

手风琴 1

鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础

手风琴 2

鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础

<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>手风琴 1</p>
		</label>
		<div class="content">
			<div class="min-h-0">
				<p>
					鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
				</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>手风琴 2</p>
		</label>
		<div class="content">
			<div class="min-h-0">
				<p>
					鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
				</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>
        手风琴 1
      </p>
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
        </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>
        手风琴 2
      </p>
    </label>
    <div className='content'>
      <div className='min-h-0'>
        <p>
          鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
        </p>
      </div>
    </div>
  </div>
</div>

类名表

类名	描述
accordion-group	用于手风琴组的包装
accordion	用于手风琴项目的包装
bordered	设置带边框样式
toggle	设置手风琴触发器
title	手风琴项目标题
content	手风琴项目隐藏的内容
open	设置手风琴项目默认开启

概览头像