181018-收合區塊動畫 Accordion Menu animation

Accordion Menu animation

by kingofturnip

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<div class="centered-wrapper">
  <div class="according-div">
    <input type="radio" id="list-1">
    <label for="question">question-1</label>
    <section>
      <p>elementum pharetra nisi sed condimentum. In faucibus neque id elit convallis, non porttitor odio consequat. Mauris ultrices bibendum massa. Aenean venenatis eget nulla in vulputate. Aliquam faucibus feugiat ante, quis eleifend purus semper sit amet.
        Vivamus vel lectus in mi bibendum elementum sagittis at nulla. Cras eget purus tellus. Suspendisse nibh lectus, rutrum vel maximus quis, posuere a nunc. Phasellus at turpis in se</p>
    </section>
  </div>
  <div class="according-div">
    <input type="radio" id="list-2">
    <label for="question">question-2</label>
    <section>
      <p>elementum pharetra nisi sed condimentum. In faucibus neque id elit convallis, non porttitor odio consequat. Mauris ultrices bibendum massa. Aenean venenatis eget nulla in vulputate. Aliquam faucibus feugiat ante, quis eleifend purus semper sit amet.
        Vivamus vel lectus in mi bibendum elementum sagittis at nulla. Cras eget purus tellus. Suspendisse nibh lectus, rutrum vel maximus quis, posuere a nunc. Phasellus at turpis in se</p>
    </section>
  </div>
  <div class="according-div">
    <input type="radio" id="list-3">
    <label for="question">question-3</label>
    <section>
      <p>elementum pharetra nisi sed condimentum. In faucibus neque id elit convallis, non porttitor odio consequat. Mauris ultrices bibendum massa. Aenean venenatis eget nulla in vulputate. Aliquam faucibus feugiat ante, quis eleifend purus semper sit amet.
        Vivamus vel lectus in mi bibendum elementum sagittis at nulla. Cras eget purus tellus. Suspendisse nibh lectus, rutrum vel maximus quis, posuere a nunc. Phasellus at turpis in se</p>
    </section>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(260deg, #ffcb85 20%, #fdf5c9 100%);
  height: 100vh;
}

.centered-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
}

.according-div {
  background: #fff;
  text-indent: 20px;
}

.according-div label {
  padding: 20px 0px;
  display: block;
}

.according-div input {
  position: absolute;
  right: 15px;
  margin:20px 0px 0px 0px;
  /*   display:none;    */
}

.according-div input:checked ~ label::before{
  content: '\e5ce';
}

.according-div label::before{
  font-family: "Material Icons";
  content: '\e5cf';
  display:block;
  position: absolute;
  margin-top:8px;
  right: 8px;
  color:#666666;
  font-size:1.8rem;
}

.according-div section {
  box-shadow: inset 0px 0px 5px #666666;
  height:0;
  overflow:hidden;
}

.according-div input:checked ~ section{
  height:auto;
  padding:20px;
}


.according-div section p {
  padding: 20px 20px;
}

/*overwrite default css*/
p{margin:0;}