일단 이거 보다가 <details>, <summary> 태그란걸 첨 접해봄.
실무에 실제로 적용해보고싶어서 한 번 사용해봤음.

📋 Html, SCSS

확실히 코드가 줄긴 했음. 아 글고 저 Mark는 ::mark 선택해서 display: none; 줄 바에 차라리 <summary>에 display: block; 주면 알아서 없어짐

원래 사용하던 아코디언 토글 Html

<div class="accordion">
	<ul class="accordion-ul">
		<li class="accordion-li" onclick="classList.toggle('on')">
			<div class="toggle-ttl">
				<h3>제목</h3>
			</div>
			<div class="toggle-inner">
				<p>답변이 등록됩니다.</p>
			</div>
		</li>
	</ul>
</div>

🎨 제이쿼리 넣기

토글 애니메이션을 넣으면 배보다 배꼽이 더 커짐. 과연 실용성이 있을까 싶음. 앤드 첫 클릭에 애니메이션 적용도 안되고 있슴. 이건 내 코드가 잘못 됐겠지? 버벅임도 심하고 여러모로 ㅂㄹ

원래 사용하던 아코디언 토글 제이쿼리

$(document).ready(function(){
    $('.toggle-inner').hide(); 
    $(".accordion-li").click(function(){
    $(this).children('.toggle-inner').slideToggle("100");
	});
});

나의 총점은 1