๐ฝHTML ์ฝ๋
<body>
<h3>์๋จ๊ฐ์ด๋ฐ๋ฌธ๊ตฌ</h3>
<div class="container">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Title</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>
<div class="item-container">
<p class="item-title">Mark</p>
<div class="item-content">
<p>์ฌ๊ธฐ์ ์จ๊ฒจ์ง ๋ด์ฉ</p>
<p>์ฌ๋ฌ์ค์ด ๋์ฌ ์ ์์</p>
</div>
</div>
</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>
<div class="item-container">
<p class="item-title">Mark2</p>
<div class="item-content">
<p>์ฌ๊ธฐ์ ์จ๊ฒจ์ง ๋ด์ฉ</p>
<p>์ฌ๋ฌ์ค์ด ๋์ฌ ์ ์์</p>
</div>
</div>
</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>
<div class="item-container">
<p class="item-title">Mark3</p>
<div class="item-content">
<p>์ฌ๊ธฐ์ ์จ๊ฒจ์ง ๋ด์ฉ</p>
<p>์ฌ๋ฌ์ค์ด ๋์ฌ ์ ์์</p>
</div>
</div>
</td>
<td></td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</body>
๐ฝCSS ์ฝ๋
h3{
text-align: center;
}
.container{
width: 600px;
margin: 0 auto;
}
๐ฉํ์ฌ ์ํ
next step) Mark ์๋์ ๋ด์ฉ์ ์จ๊ฒจ๋ณด๋๋ก ํ๊ฒ ๋ค.
๐ฝCSS ์ฝ๋
h3{
text-align: center;
}
.container{
width: 600px;
margin: 0 auto;
}
.item-title{
font-weight: bold;
color: darkblue;
cursor: pointer; /* ๋๋ฅผ ์ ์์ ๊ฒ ๊ฐ์ ํจ๊ณผ*/
}
.item-content{
height: 0px;
overflow: hidden;
/* hidden->height๊ฐ 0์ด๋ผ ๋ฐ์ผ๋ก ์์ ธ๋์จ ๋ถ๋ถ์ ์จ๊ฒจ์ค๋ค! */
}
๐ฉํ์ฌ ์ํ
next step) Mark๋ฅผ ๋๋ฅด๋ฉด ์จ๊ธด ๋ด์ฉ์ ๋ณด์ฌ์ฃผ๋ ๊ธฐ๋ฅ์ ์ถ๊ฐํด๋ณด๊ฒ ๋ค.
๐ฝCSS ์ฝ๋
h3{
text-align: center;
}
.container{
width: 600px;
margin: 0 auto;
}
.item-title{
font-weight: bold;
color: darkblue;
cursor: pointer;
}
.item-content{
height: 0px;
overflow: hidden;
transition-property: all; /* ๋ถ๋๋ฝ๊ฒ ๋ณํ๋ ํจ๊ณผ */
transition-duration: 1s; /* ๋ถ๋๋ฝ๊ฒ ๋ณํ๋ ํจ๊ณผ */
}
๐ฝjs ์ฝ๋
const itemTitles = document.querySelectorAll('.item-title');
console.log(itemTitles);
for(let i=0; i<itemTitles.length; i++){
itemTitles[i].addEventListener('click', function(){
console.log('ํด๋ฆญ๋จ');
console.log(itemTitles[i]);
let itemContents = document.querySelectorAll('.item-content');
console.log(itemContents);
if(itemContents[i].classList.contains('active')){
itemContents[i].classList.remove('active');
} else{
itemContents[i].classList.add('active');
}
});
}
๐ฉํ์ฌ ์ํ
next step) Mark๋ฅผ ๋๋ ์ ๋ ๋ค๋ฅธ ๋ด์ฉ์ด ์ด๋ ค์์ผ๋ฉด ๋ซ๊ณ ํด๋น Mark์ ๋ด์ฉ๋ง ์ด๋ฆฌ๊ฒ ๋ง๋ค์ด๋ณด๊ฒ ๋ค.
๐ฝjs ์ฝ๋
const itemTitles = document.querySelectorAll('.item-title');
console.log(itemTitles);
for(let i=0; i<itemTitles.length; i++){
itemTitles[i].addEventListener('click', function(){
console.log('ํด๋ฆญ๋จ');
console.log(itemTitles[i]);
let itemContents = document.querySelectorAll('.item-content');
console.log(itemContents);
if(itemContents[i].classList.contains('active')){
itemContents[i].classList.remove('active');
} else{
for(let el of itemContents){
el.classList.remove('active');
//for๋ฌธ์ ํตํด ์ด๋ ค์๋ ๋ด์ฉ์ ๋ซ์์ฃผ๊ธฐ
}
itemContents[i].classList.add('active');
}
})
}
๐ฉํ์ฌ ์ํ