tailwind만으로 드롭다운 / 최소화 구현하기

...tailwind 만으로 되는 건 아니고, 자바스크립트를 조금 써야 합니다.

하지만 들어보세요.

 

 

---

핵심 개념은 창의 루트 요소에 minimized 클래스를 추가하고 그 클래스를 찾는 것이다.

<div class="group">
	<button class="minimize">-</button>
	<div class="group-[.minimized]:hidden">Content</div>
</div>

 

group-[.특정클래스]: 접두어를 사용하면 group이 그 클래스를 가지고 있는지를 확인할 수 있다.

 

document.querySelector(".minimize")
	.onClick = () => {
    	this.parentElement.classList.toggle("minimized");
    }

 

뭐 그 다음에 대강 이런 함수를 써서 클래스를 추가하고 없애고 하면 된다.

 

출처

 

https://stackoverflow.com/questions/66349609

Is there a way to show/hide an element based on existence of a parent class in Tailwind?