[html/css] js 코드 없는 아코디언 "클릭하면 스르륵 답변창이 나오는 게시판?"

결과

See the Pen Untitled by youngwan2 (@youngwan2) on CodePen.

HTML

    <div class="accrodion">
      <input type="checkbox" id="answer01" />
      <label for="answer01">제목<em>▽</em></label>
      <div class="response">
        <p>
          accrodionaccrodionaccrodionaccrodionaccrodionaccrodi
          onaccrodionaccrodionaccrodionaccrodionaccrodionaccrod
          ionaccrodionaccrodionaccrodionaccrodionaccrodionaccro
          dionaccrodionaccrodionaccrodionaccrodionaccrodionaccrod ionaccrodion
        </p>
      </div>
      <input type="checkbox" id="answer02" />
      <label for="answer02">제목<em>▽</em></label>
      <div class="response"><p>여기에 추가되는 답변 영역</p></div>
      <input type="checkbox" id="answer03" />
      <label for="answer03">제목<em>▽</em></label>
      <div class="response"><p>여기에 추가되는 답변 영역</p></div>
      <input type="checkbox" id="answer04" />
      <label for="answer04">제목<em>▽</em></label>
      <div class="response"><p>여기에 추가되는 답변 영역</p></div>
    </div>

 

CSS

body {
    width: 100vw;
}


/* id *= "" 은 input 요소의 속성인 id의 값으로
   answer 를 포함하고 있는 모든 요소에 css 를 적용한다. */
input[id *="answer"] {
    display: none;
}

input[id *="answer"]+label {
    display: block;
    position: relative;
    padding: 20px;
    border: 1px transparent;
    border-bottom: 0;
    background-color: blueviolet;
    cursor: pointer;
}

input[id *="answer"]+label em {
    position: absolute;
    right: 50px;
}

.accrodion {
    transition: 1s;
    width: 70%;
    min-width: 400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    position: relative;
}

/*  + 를 사용하면 인접한 바로 뒤의 형제요소에 효과가 적용된다. */
.accrodion input+label+.response {
    transition: 1s;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    z-index: -1;
    max-height: 0;

}

/* 인풋이 체크된 상태라면 효과를 적용한다. */
.accrodion input:checked+label+.response {
    opacity: 1;
    visibility: visible;
    max-height: 200px;
    transform: translate(0);
}