보통의 경우 접기, 펼치기 폴딩기능을 적용할려면 js를 사용해서 많이 구현합니다.
근데 js없이 Html과 Css만으로 간단하게 구현되는 코드가 있습니다.
바로 <details> 와 <summary> 코드인데요.
<details>코드만 적용해도 아래와 같이 적용됩니다.
<details> <p>details코드만 적용</p> </details>
details코드만 적용
<details> 와 <summary> 코드를 같이 적용하면
<details> <summary>Click Me!</summary> <p>details, summary 같이 적용</p> </details>
Click Me!
details, summary 같이 적용
근데 위와 같이 보이지는 않고 상단의 세부정보 같이 보입니다.
아래의 css가 적용되어져 그렇습니다.
자! 그럼 css까지 같이 구현해 볼까요.
<details>
<summary>Click Me!!!</summary>
<div class="tpt">details 과 summary 그리고 css까지 적용</div>
</details>
<style>
details { margin:5px 0 10px; }
details > summary { background:#444; 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 { background:#444; color:#fff; background-size:contain; 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:#444;}
details[open] > summary ~ * { animation:reveal 0.5s;}
.tpt { background:#444; color:#fff; margin:5px 0 10px; padding:5px 10px; line-height:25px; border-radius:5px; box-shadow: 1px 1px 2px gray;}
@keyframes reveal {
from { opacity:0; transform:translate3d(0, -30px, 0); }
to { opacity:1; transform:translate3d(0, 0, 0); }
}
</style>
Click Me!!!
details 과 summary 그리고 css까지 적용
간단하죠 근데 아쉽게도 익스플로러에서는 작동하지 않습니다.
익스에서는 그냥 펼쳐저 보입니다.
처음 부터 펼쳐져 보이게 하는 옵션도 간단합니다.
<details open>
<p>details에 open만 적용</p>
</details>
details에 open만 적용
익스만 신경 쓰이지 않는다면 접고, 펼치는 폴딩기능을 구현하는데는 정말 유용한 코드입니다.
그리고 게시판에서도 소스만 적용하면 간단히 구현됩니다.
[ 추가 Tip ]
익스가 사라진 지금은 매우 유용한 팁이 되었네요.
폴딩전,후 마커(불릿)모양 & 문자 변경하는 방법으로 더욱 유용하게 사용하세요.
<details>
<summary class="cvb">[{$document->getCommentCount()}]</summary>
~ 댓글 코드 ~
</details>
<style> summary::marker{ content: "+ 댓글 Open "; } details[open] summary::marker { content: "️▲ 댓글 Close "; } .cvb { text-decoration:none; color:#967d09; font-weight:bold; float:right; text-align:right; cursor:pointer; border:1px solid #c9ae34; border-radius:3px; padding:2px 5px; margin:5px; background-color:#fce374; background-image:linear-gradient(to bottom, #fce374, #fcdf5b); box-shadow:inset 0 1px 0 #fff6ce, inset 0 -1px 0 #e3c852, inset 0 0 0 1px #fce88d, 0 2px 4px rgba(0, 0, 0, 0.2); color:#967d09; text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);} .cvb:hover, .cvb:focus { color:#967d09; background:#fcdf5b; border-color:#967d09; box-shadow:inset 0 1px 0 #fff6ce, inset 0 -1px 0 #e3c852, inset 0 0 0 1px #fce88d; } .cvb:active { color:#967d09; background:#fcdf5b; box-shadow:inset 0 2px 3px rgba(0, 0, 0, 0.2); } </style>
[디테일한 사용 방법 예시]
https://moonhouse.co.kr/xetip/588063
평가 참여 :
테두리(border) 상자에 화살표 모양 css로 ...
스크롤 바(Scrollbar) 스타일링
자료가 도움이 되었다면 댓글과 평가 부탁합니다. 
