[HTML,CSS] <details> <summary> JS없이 접기/펼치기 기능구현

결과화면 (▼클릭)

 

클릭해주세요!

목록1

목록2

 

 

HTML

 

<details>
    <summary>클릭해주세요!</summary>
    <div class="list">목록1</div>
     <div class="list">목록2</div>
</details>

 

 

CSS

details {
    margin: 5px 0 10px;
}
details > summary {
    background: #666;
    color: #fff;
    padding: 10px;
    outline: 0;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.5s;
    text-align: left;
    box-shadow: 1px 1px 2px gray;
}
details > summary::-webkit-details-marker {
    transform: rotate3d(0, 0, 1, 90deg);
    transition: transform 0.25s;
}

/* 클릭시효과 */
details[open] > summary::-webkit-details-marker {
    transform: rotate3d(0, 0, 1, 180deg);
}
details[open] > summary {
    background: pink;
}

.list {
    background: #000;
    color: #fff;
    margin: 10px;
    padding: 10px;
    line-height: 25px;
    border-radius: 5px;
}