Accordion

                        
<div id="wrap">
  <div class="accordion">
      <ul>
          <li>
              <div class="head">
                  <p>타이틀</p>
                  <svg width="29" height="14" viewBox="0 0 35.05 21.906" class="arrowDown">
                      <path id="arrow-down" d="M10.381,10.5,23.525,23.644,36.669,10.5l4.381,4.381L23.525,32.406,6,14.881Z" transform="translate(-6 -10.5)" fill-rule="evenodd" />
                  </svg>
                  <svg width="29" height="14" viewBox="0 0 35.05 21.906" class="arrowUp">
                      <path id="arrow-up" d="M6,28.025,23.525,10.5,41.05,28.025l-4.381,4.381L23.525,19.262,10.381,32.406Z" transform="translate(-6 -10.5)" fill-rule="evenodd" />
                  </svg>
              </div>
              <div class="cont">
                  <div class="inner">
                      <div class="txtArea">
                          <p>내용내용내용내용내용내용내용내용내용</p>
                      </div>
                  </div>
              </div>
          </li>
          <li>
              <div class="head">
                  <p>타이틀</p>
                  <svg width="29" height="14" viewBox="0 0 35.05 21.906" class="arrowDown">
                      <path id="arrow-down" d="M10.381,10.5,23.525,23.644,36.669,10.5l4.381,4.381L23.525,32.406,6,14.881Z" transform="translate(-6 -10.5)" fill-rule="evenodd" />
                  </svg>
                  <svg width="29" height="14" viewBox="0 0 35.05 21.906" class="arrowUp">
                      <path id="arrow-up" d="M6,28.025,23.525,10.5,41.05,28.025l-4.381,4.381L23.525,19.262,10.381,32.406Z" transform="translate(-6 -10.5)" fill-rule="evenodd" />
                  </svg>
              </div>
              <div class="cont">
                  <div class="inner">
                      <div class="txtArea">
                          <p>내용내용내용내용내용내용내용내용내용</p>
                      </div>
                  </div>
              </div>
          </li>
          <li>
              <div class="head">
                  <p>타이틀</p>
                  <svg width="29" height="14" viewBox="0 0 35.05 21.906" class="arrowDown">
                      <path id="arrow-down" d="M10.381,10.5,23.525,23.644,36.669,10.5l4.381,4.381L23.525,32.406,6,14.881Z" transform="translate(-6 -10.5)" fill-rule="evenodd" />
                  </svg>
                  <svg width="29" height="14" viewBox="0 0 35.05 21.906" class="arrowUp">
                      <path id="arrow-up" d="M6,28.025,23.525,10.5,41.05,28.025l-4.381,4.381L23.525,19.262,10.381,32.406Z" transform="translate(-6 -10.5)" fill-rule="evenodd" />
                  </svg>
              </div>
              <div class="cont">
                  <div class="inner">
                      <div class="txtArea">
                          <p>내용내용내용내용내용내용내용내용내용</p>
                      </div>
                  </div>
              </div>
          </li>
          <li>
              <div class="head">
                  <p>타이틀</p>
                  <svg width="29" height="14" viewBox="0 0 35.05 21.906" class="arrowDown">
                      <path id="arrow-down" d="M10.381,10.5,23.525,23.644,36.669,10.5l4.381,4.381L23.525,32.406,6,14.881Z" transform="translate(-6 -10.5)" fill-rule="evenodd" />
                  </svg>
                  <svg width="29" height="14" viewBox="0 0 35.05 21.906" class="arrowUp">
                      <path id="arrow-up" d="M6,28.025,23.525,10.5,41.05,28.025l-4.381,4.381L23.525,19.262,10.381,32.406Z" transform="translate(-6 -10.5)" fill-rule="evenodd" />
                  </svg>
              </div>
              <div class="cont">
                  <div class="inner">
                      <div class="txtArea">
                          <p>내용내용내용내용내용내용내용내용내용</p>
                      </div>
                  </div>
              </div>
          </li>
          <li>
              <div class="head">
                  <p>타이틀</p>
                  <svg width="29" height="14" viewBox="0 0 35.05 21.906" class="arrowDown">
                      <path id="arrow-down" d="M10.381,10.5,23.525,23.644,36.669,10.5l4.381,4.381L23.525,32.406,6,14.881Z" transform="translate(-6 -10.5)" fill-rule="evenodd" />
                  </svg>
                  <svg width="29" height="14" viewBox="0 0 35.05 21.906" class="arrowUp">
                      <path id="arrow-up" d="M6,28.025,23.525,10.5,41.05,28.025l-4.381,4.381L23.525,19.262,10.381,32.406Z" transform="translate(-6 -10.5)" fill-rule="evenodd" />
                  </svg>
              </div>
              <div class="cont">
                  <div class="inner">
                      <div class="txtArea">
                          <p>내용내용내용내용내용내용내용내용내용</p>
                      </div>
                  </div>
              </div>
          </li>
      </ul>
  </div>
</div>
                        
                    
                        
.accordion{width: 100%;
    ul{width: inherit;
        li{background-color: #212121; cursor: pointer;
            &:first-of-type{border-top: 1px solid #3a3b3d;}
            .head{height: 60px; padding: 0 20px; display: flex; align-items: center;
            justify-content: space-between; font-size: 20px; font-family: 'Noto Sans'; color: rgba(242, 241, 241, 1);
                svg{fill: currentColor;}
                .arrowUp{display: none;}
            }
            .cont{ border-bottom: 1px solid #3a3b3d; background-color: #1e1f21;
                >.inner{visibility: hidden; height: 0; transition: .5s; overflow: hidden;
                    .txtArea{padding: 20px; box-sizing: border-box;}
                }
                p{color: rgba(242, 241, 241, 1);}
            }
            &.on{
                .arrowDown{display: none;}
                .arrowUp{display: block;}
                .cont>.inner{visibility: visible; height: 200px;}
            }
        }
    }
}
                        
                    
                        
.accordion {
    width: 100%;
}

.accordion ul {
    width: inherit;
}

.accordion ul li {
    background-color: #212121;
    cursor: pointer;
}

.accordion ul li:first-of-type {
    border-top: 1px solid #3a3b3d;
}

.accordion ul li .head {
    height: 60px;
    padding: 0 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    font-size: 20px;
    font-family: 'Noto Sans';
    color: rgba(242, 241, 241, 1);
}

.accordion ul li .head svg {
  fill: currentColor;
}

.accordion ul li .head .arrowUp {
    display: none;
}

.accordion ul li .cont {
    border-bottom: 1px solid #3a3b3d;
    background-color: #1e1f21;
}

.accordion ul li .cont > .inner {
    visibility: hidden;
    height: 0;
    -webkit-transition: .5s;
    transition: .5s;
    overflow: hidden;
}

.accordion ul li .cont > .inner .txtArea {
    padding: 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.accordion ul li .cont p {
    color: rgba(242, 241, 241, 1);
}

.accordion ul li.on .arrowDown {
    display: none;
}

.accordion ul li.on .arrowUp {
    display: block;
}

.accordion ul li.on .cont > .inner {
    visibility: visible;
    height: 200px;
}
                        
                    
                        
$(function(){
    $('.accordion ul li').on({
        "click": function () {
            $(this).toggleClass('on').siblings('li').removeClass('on');
        }
    });
});
다운로드
Esc 혹은 우측 상단 X 버튼을 눌러 결과창을 닫을 수 있습니다.

  • 타이틀

    내용내용내용내용내용내용내용내용내용

  • 타이틀

    내용내용내용내용내용내용내용내용내용

  • 타이틀

    내용내용내용내용내용내용내용내용내용

  • 타이틀

    내용내용내용내용내용내용내용내용내용

  • 타이틀

    내용내용내용내용내용내용내용내용내용

아래 주소를 복사하여 다른 곳에 붙여넣으세요.

결과를 보기 전에 잠깐!

모바일 환경에서는 코드 결과가 gif로 표시됩니다.

그래도 결과를 볼까요?

(제대로 된 결과를 보려면 노트북 또는 데스크탑에서 실행해주세요.)