css
<style>
.box {
border-radius: 5px;
max-height: 0;
background-color: #f1f1f1;
overflow: hidden;
transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
padding: 0;
}
.box-open {
max-height: 200px; /* 이 값은 내용의 높이에 따라 조정하실 수 있습니다. */
padding: 10px;
}
.toggle-icon {
display: inline-block;
transition: transform 0.3s ease;
}
.rotate {
transform: rotate(180deg);
}
.foldingb {
padding: 5px 10px 5px 10px !important;
border: solid 1px gray !important;
border-radius: 5px !important;
}
</style>
html
<button onclick=”toggleBox(‘box1’, this)” class=”foldingb”>펼치기 접기<span class=”toggle-icon”>▼</span></button>
<div class=”box” id=”box1″>
… 내용 …
</div>
<button onclick=”toggleBox(‘box2’, this)” class=”foldingb”>456564564564564565645기<span class=”toggle-icon”>▼</span></button>
<div class=”box” id=”box2″>
… 다른 내용 …
</div>
<script>
function toggleBox(boxId, buttonElement) {
var box = document.getElementById(boxId);
var toggleIcon = buttonElement.querySelector(“.toggle-icon”);
if (box.classList.contains(“box-open”)) {
box.classList.remove(“box-open”);
toggleIcon.classList.remove(“rotate”);
} else {
box.classList.add(“box-open”);
toggleIcon.classList.add(“rotate”);
}
}
</script>