자바스크립트 탭 버튼을 아코디언 처럼 접었다 폈다 하는 기능
관련링크
본문
위 이미지처럼 쇼핑몰 필터에 사용할 아코디언 같은 탭을 만드려고 하는데요.
자바스크립트 너무 초짜라 조합을 하려하니, 너무 어렵네요.
이 싸이트에 있는 예제처럼 탭 기능에서 버튼 클릭하면 아코디언처럼 내용이 접었다 폈다 할 수 있는 방법이 있을까요??
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs_close
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
답변 2
<div class="tab">
<button class="tablinks" onclick="openCity(London)">London</button>
<button class="tablinks" onclick="openCity(Paris)">Paris</button>
<button class="tablinks" onclick="openCity(Tokyo)">Tokyo</button>
<button id=ocBtn class="tablinks" onclick="closeOpen()">닫기</button>
</div>
<div id=ocDiv>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</div>
<script>
function openCity(city) {
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) tabcontent[i].style.display = "none";
city.style.display = ocDiv.style.display = "block";
ocBtn.innerText = "닫기";
}
function closeOpen() {
if (ocBtn.innerText == "닫기") {
ocDiv.style.display = "none";
ocBtn.innerText = "열기";
}
else {
ocDiv.style.display = "block";
ocBtn.innerText = "닫기";
}
}
openCity(London);
</script>
id 를 줄때는 첫글자를 소문자로 사용하세요. 자바스크립트에서는 관례적으로...
1. 변수나 힘수 아이디 등은 첫글자가 소문자 + 카멜
2. 클래스(이 클래스는 스타일이 아니라 new Object 를 의미하는 클래스)는 첫글자만 대문자 + 카멜
3. 상수는 모두 대문자
이렇게 이름을 줍니다.
소중한 답변 감사합니다. 자바스크립트를 너무 몰라서 관례적인 내용도 모르고 있었네요. ㅎㅎ
혹, 위 작성해 주신 코드처럼 "닫기" 버튼을 따로 만들어 닫고 여는게 아닌, 각각의 버튼을 클릭하면 열리고 한번더 클릭하면 닫히는 기능도 가능할까요??
A버튼을 클릭하면 A내용이 열리고 다시 클릭하면 닫히고 B버튼을 클릭하면 똑같이 A버튼 내용이 사라지고 B버튼 내용이 나오고 들어가는 아코디언 처럼요 ㅠㅠ
<div>
<button id=btn_1 style=cursor:pointer>London</button>
<button id=btn_2 style=cursor:pointer>Paris</button>
<button id=btn_3 style=cursor:pointer>Tokyo</button>
</div>
<div id=div_1>
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id=div_2>
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id=div_3>
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<script>
for (i = 1; i <= 3; i++) {
this["div_" + i].style.display = "none";
this["btn_" + i].num = i;
this["btn_" + i].onclick = function() {
for (j = 1; j <= 3; j++) {
if (parent["div_" + this.num].style.display == "block") parent["div_" + j].style.display = "none";
else parent["div_" + j].style.display = j == this.num ? "block" : "none";
}
}
}
btn_1.onclick();
</script>
css 는 재주껏 붙여 쓰세요.
답변을 작성하시기 전에 로그인 해주세요.
