[Web][HTML] 토글(toggle)을 사용한 게시판을 만들고 싶다면? (feat. details, summary (toggle)+ <c:foreach>)

 

 

details, summary (toggle)+ <c:foreach> 적용 코드

1.반복하기 위해 가장 바깥 테두리에 <c:foreach>를 위치시킴

2.detail태그 기능을 사용할려면 처음과 끝이 detail태그로 덮어야하므로 처음과 끝은 detail태그로

3.summary가 접혀져있고 요약부분을 보여주는 부분이기에 접혀져있는 상태에서 보여주고 싶은 부분을 summary 안에 집어넣고 펼쳐있을 때(open) 보여주고 싶은 부분은 <p>,<ul,li>태그 같은 걸로 처리해야한다

4.summary부분을 하나로 묶고 css 하기위해 div로 한번 감싸고 그 안에 게시판 번호,타이틀,작성날짜 등을 넣었다

5.펼쳐지는 부분(open)을 하나로 관리하기 위해 <div class="QnaToggleOpen"> 만들고 그 안에 <ul>과 <li>로 펼쳐지는 부분을 구현