[Thymeleaf/Bootstrap5] 게시판 댓글 조회 및 수정 화면 구현 - 실패

실행 결과:

 

소스 코드:

<div class="card">
        <div class="card-header bi bi-chat-dots"> <span th:text="${comments.size()}"></span> Comments </div>
        <div th:each="comment, index : ${comments}" class="border border-secondary">
            <ul class="list-group-flush">
                <li class="list-group-item">
                    <div class="row">
                        <span class="col-1">이름</span>
                        <span class="col-1">작성시간</span>
                        <!-- 수정버튼 -->
                        <a class="col-1" role="button" data-bs-toggle="collapse" aria-expanded="false" th:attr="data-bs-target='.multi-collapse-'+${comment.id}">
                            <i class="bi bi-pencil-square"></i>수정
                        </a>
                    </div>
                    <!-- 조회 -->
                    <div th:classappend="'multi-collapse-'+${comment.id}" class="collapse multi-collapse show">
                        <input type="hidden" th:value="${comment.id}"/>
                        <span th:text="${comment.content}"></span>
                    </div>
                    <!-- 수정 -->
                    <div th:classappend="'multi-collapse-'+${comment.id}" class="collapse multi-collapse">
                        <form th:action="@{'/board2/'+${boardDto.id}+'/comment'}" method="post" th:object="${commentDto}">
                            <input type="hidden" th:value="${comment.id}" name="id"/>
                            <textarea class="form-control" th:text="${comment.content}" name="content"></textarea>
                        </form>
                    </div>
                </li>
            </ul>
        </div>
<div>

 

Bootstrap5 의 Collapse 를 활용하였습니다

https://getbootstrap.com/docs/5.0/components/collapse/

 

 

코드 설명:

data-bs-target='.multi-collapse-'+${comment.id}

 

th:classappend="'multi-collapse-'+${comment.id}"

 

버튼 제어 대상이 한개 이상이기 때문에 id가 아닌 class로 설정하였습니다.

 

 

aria-expanded="false"

 

class="collapse show"

 

버튼에 aria-expanded="false" 속성을 적용하여

요소가 열려있는지 접혀있는지 여부를 버튼에서 설정하지 않고,

기본적으로 열려있어야 하는 요소에 직접 show 클래스를 지정하였습니다.

 

 

참고 사이트:

https://dev-coco.tistory.com/134?category=1032063 

 

 

================

 

 

하지만, 동작이 매끄럽기는 하나 원하는 결과가 아니었기 때문에

위 기능을 사용하지 않고, 기존 방식대로 div를 보여주고 숨기는 기능으로 변경할 예정입니다.

 

그래도 이 과정에서 bootstrap multiCollapse 기능이 있다는 것을 알게 되었습니다.

나중에 충분히 사용할 수 있는 기능이라는 생각이 들고, 그때는 더 발전된 방식으로 활용할 수 있을 것이라고 생각합니다.