JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

<div id="wrapper">
	<div class="panel-menu-container">
		<div class="panel-menu-title">대한민국</div>
		<div class="panel-menu-answer">
			<div>서울</div>
			<div>부산</div>
		</div>	
	</div>
	<div class="panel-menu-container">
		<div class="panel-menu-title">미국</div>
		<div class="panel-menu-answer">
			<div>시카고</div>
			<div>디트로이트</div>
		</div>
	</div>
	<div class="panel-menu-container">
		<div class="panel-menu-title">일본</div>
		<div class="panel-menu-answer">
			<div>도쿄</div>
			<div>오사카</div>
		</div>
	</div>
</div>

CSS

.panel-menu-container {
	background:skyblue;
}
.panel-menu-answer {
	display:none;
	background:blue;
	color:white;
}
.active {
	display:block;
}

JavaScript

window.onload = () => {
	const panelmenuContainer = document.querySelectorAll('.panel-menu-container');
    const panelmenuAnswer = document.querySelectorAll('.panel-menu-answer');
    //반복문 순회하면서 해당 메뉴 클릭시 콜백 처리
    for (let i = 0; i < panelmenuContainer.length; i++) {
	    	panelmenuContainer[i].addEventListener('click', function () {
	    	  
		        if (this.querySelector('.panel-menu-answer').classList.contains('active')) {
		        	this.querySelector('.panel-menu-answer').classList.remove('active');
		        } else {
		        	close_all();
		        	this.querySelector('.panel-menu-answer').classList.add('active');
		        }
		
    		});
    }
    
    var close_all = function() {
    	for (let i = 0; i < panelmenuAnswer.length; i++) {
        	panelmenuAnswer[i].classList.remove('active');
      	}	
    }
}