同一页面中有多个 CSS collapse/expand

Question

我已经 CSS collapse/expand 引用了 @ https://codepen.io/peternguyen/pen/hICga/ 的代码。但是我的代码的问题是它们不能在同一页面中工作。我打算在 Wordpress 页面上使用它。看看我的代码。谢谢。

input {
    display: none;
    visibility: hidden;
}

label {
    font-weight: bold;
    font-size: 15px;
    display: block;
    color: #666;
    text-decoration: underline;
}

label:hover {
    color: #000;
}

#expand {
    height: 0px;
    overflow: hidden;
    transition: height 0.5s;
    color: #000;
}

section {
    padding: 0 20px;
}

#toggle:checked ~ #expand {
    height: auto;
}

<input id="toggle" type="checkbox">
<label for="toggle">Hidden Kitten</label>
<div id="expand">
    <section>
        <p>mew</p>
    </section>
</div>
<input id="toggle" type="checkbox">
<label for="toggle">Hidden Kitten</label>
<div id="expand">
    <section>
        <p>mew</p>
    </section>
</div>

Answer 1

我将所有特定于 id 的部分独立化，并将 ~ 更改为 +。

工作codepen

代码：

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
  font-family: "Open Sans", Arial;
  background: #CCC;
}

main {
  background: #EEE;
  width: 600px;
  margin: 20px auto;
  padding: 10px 0;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

h2 {
  text-align: center;
}

p {
  font-size: 13px;
}

input {
  display: none;
  visibility: hidden;
}

label {
  display: block;
  padding: 0.5em;
  text-align: center;
  border-bottom: 1px solid #CCC;
  color: #666;
}

label:hover {
  color: #000;
}

label::before {
  font-family: Consolas, monaco, monospace;
  font-weight: bold;
  font-size: 15px;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;
  background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);
}

.expand {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
  background: url(http://placekitten.com/g/600/300);
  color: #FFF;
}

section {
  padding: 0 20px;
}

.toggle:checked+label+.expand {
  height: 250px;
}

.toggle:checked+label::before {
  content: "-";
}

<main>
  <h2>CSS Expand/Collapse Section</h2>
  <input id="toggle" type="checkbox" checked class="toggle">
  <label for="toggle">Hidden Kitten</label>
  <div class="expand">
    <section>
      <p>mew</p>
    </section>
  </div>
  <section>
    <h3>Other content</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta non turpis faucibus lobortis. Curabitur non eros rutrum, gravida felis non, luctus velit. Ut commodo congue velit feugiat lobortis. Etiam nec dolor quis nulla bibendum blandit
      vitae nec enim. Maecenas id dignissim erat. Aenean ac mi nec ante venenatis interdum quis vel lacus.
    </p>
    <p>Aliquam ligula est, aliquet et semper vitae, elementum eget dolor. In ut dui id leo tristique iaculis eget a dui. Vestibulum cursus, dolor sit amet lacinia feugiat, turpis odio auctor nisi, quis pretium dui elit at est. Pellentesque lacus risus, vulputate
      sed gravida eleifend, accumsan ac ante. Donec accumsan, augue eu congue condimentum, erat magna luctus diam, adipiscing bibendum sem sem non elit.</p>
  </section>
  <input id="toggle2" type="checkbox" checked class="toggle">
  <label for="toggle2">Hidden Kitten 2</label>
  <section class="expand">
    test
  </section>
</main>

同一页面中有多个 CSS collapse/expand

Multiple CSS collapse/expand in same page

html

css

expand

collapse