如何使按钮更像手风琴按钮？答案

【问题标题】：How can I make buttons be more like accordion buttons?如何使按钮更像手风琴按钮？
【发布时间】：2019-09-19 11:51:12
【问题描述】：

我正在尝试在我的代码中创建手风琴按钮，因为我有很长的按钮列表。不过，我似乎无法弄清楚如何使代码起作用。

<p>
	<button data-toggle="collapse" data-target="#acne" class="collapsed unique">Acne</button>
</p>
<div id="acne" class="collapse unique">
	<ul>
		<li>Blackheads</li>
		<li>Whiteheads</li>
		<li>Pimples</li>
		<li>Nodules or cysts</li>
		<li>Redness or flushing</li>
	</ul>
</div>
<p>
	<button data-toggle="collapse" data-target="#backpain" class="collapsed unique">Back Pain</button>
</p>
<div id="backpain" class="collapse unique">
	<ul>
		<li>Pain in the lower back</li>
		<li>Pain, numbness, or tingling on one side of the buttocks or leg</li>
		<li>Weakness of the muscles in one leg</li>
	</ul>
</div>
<p>
	<button data-toggle="collapse" data-target="#utim" class="collapsed unique">Bladder Infection (Male)</button>
</p>
<div id="utim" class="collapse unique">
	<p>
		 Although we're unable to treat bladder infections in men, we can gather information about your symptoms. Then we'll give you a call to schedule an appointment. You won't be charged for this interview.
	</p>
</div>

这是我的按钮的 CSS

/*Collapsible buttons*/
button.unique.collapsed{
    height:40px;
    border-radius: 25px;
    outline: none;
}
button.unique{
    height: 40px;
    border-radius: 25px;
    outline: none;
}
.unique {
    padding: 0;
  width: 100%;
  font: Lato,sans-serif;
  color: #ffffff;
  background-color: #32BDCC;
  font-size: 20px;
}
.unique:hover {
    color: #32BDCC;
    border-color: #32BDCC;
    background-color: white;
  }
.unique ul{
    background-color: #ffffff;
}

.collapse{
    background-color: #ffffff
}

如果能提供任何帮助，我将不胜感激。

【问题讨论】：

我刚刚添加了它。谢谢！
您要在没有任何 JavaScript 的情况下执行此操作？
@jacobrust 我更新了我的答案（包括你的内容等）

标签： html button accordion

【解决方案1】：

这是对您的代码的一点修改，但它是我拥有的一段旧代码，可以满足您的目的。隐藏时，“关于”部分被隐藏；这以“阅读更多”的方式工作。我对按钮进行了一些设计，但您可以使用蓝色文本等重新调整内容。

我希望这会有所帮助。

html {
  background: white;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  max-width: 480px;
  width: 90%;
  margin: 3em auto;
  font-size: 75%;
  line-height: 1.3rem;
  font-family: sans-serif;
  position: relative;
  *zoom: 1;
}

body:before,
body:after {
  content: "";
  display: table;
}

body:after {
  clear: both
}

article p,
section p,
section ul {
  margin-bottom: 1.3rem;
  text-align: left;
}

section ul {
  list-style-type: disc;
  margin: 0 auto 1.3rem 30px;
}

article {
  margin-top: 2rem;
  position: relative;
  *zoom: 1;
}

article:before,
article:after {
  content: "";
  display: table;
}

article:after {
  clear: both;
}

article section:first-of-type {
  float: right;
  width: 99%;
}

article section:last-of-type {
  display: none;
  visibility: hidden;
}

section {
  -webkit-transition: .125s linear;
  -moz-transition: .125s linear;
  -ms-transition: .125s linear;
  -o-transition: .125s linear;
  transition: .125s linear;
  padding-bottom: .5rem;
}

input[type=checkbox] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

article label {
  position: absolute;
  bottom: -2rem;
  margin-bottom: 1rem;
  left: 0;
  width: 100%;
  border-radius: 25px;
  background-color: #32BDCC;
  text-align: center;
  padding: .65rem;
  box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1);
}

input[type=checkbox]:checked~section {
  display: block;
  visibility: visible;
  width: 100%;
}

label:hover {
  background-color: #ffffff;
  border: 2px solid #32BDCC;
}

label span:last-of-type {
  display: none;
  visibility: hidden;
}

input[type=checkbox]:checked~label span:first-of-type {
  display: none;
  visibility: hidden;
}

input[type=checkbox]:checked~label span:last-of-type {
  display: block;
  visibility: visible;
}

<body>
  <article>
    <input type="checkbox" id="read_more1" role="button">
    <label for="read_more1" onclick=""><span>Show</span><span>Hide</span>

        </label>

    <section>
      <p>Acne</p>
    </section>
    <section>
      <ul>
        <li>Blackheads</li>
        <li>Whiteheads</li>
        <li>Pimples</li>
        <li>Nodules or cysts</li>
        <li>Redness or flushing</li>
      </ul>
    </section>
  </article>
  <article>
    <input type="checkbox" id="read_more2" role="button">
    <label for="read_more2" onclick=""><span>Show</span><span>Hide</span>

        </label>

    <section>
      <p>Back Pain</p>
    </section>
    <section>
      <ul>
        <li>Pain in the lower back</li>
        <li>Pain, numbness, or tingling on one side of the buttocks or leg</li>
        <li>Weakness of the muscles in one leg</li>
      </ul>
    </section>
  </article>
  <article>
    <input type="checkbox" id="read_more3" role="button">
    <label for="read_more3" onclick=""><span>Show</span><span>Hide</span>

        </label>

    <section>
      <p>Bladder Infections</p>
    </section>
    <section>
      <p>
        Although we're unable to treat bladder infections in men, we can gather information about your symptoms. Then we'll give you a call to schedule an appointment. You won't be charged for this interview.
      </p>

    </section>
  </article>
</body>

【讨论】：