<결과화면>
<01-acco.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<title>pure js accordian</title>
<style>
/* :root {
--mb-1: 1rem;
--mb-1-5: 1.5rem;
} */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
color: inherit;
text-decoration: none;
}
ul {
list-style: none;
}
#skill {
/* border: 1px solid #000; */
margin-top: 10rem;
}
.accordian {
width: 500px;
margin: 0 auto;
background:#02343F;
color: #F0EDCC;
position: relative;
}
.accordian__item {
}
.accoridan__title {
display: flex;
justify-content: space-between;
padding: 1rem;
cursor: pointer;
}
/* 초기 접혀진 상태 */
.accordian__desc {
color:#02343F;
background: #F0EDCC;
/* padding: 1rem; */
height: 0;
overflow: hidden;
transition: 400ms;
}
/* click하면 보여지는 상태 */
.accoridan__title.open + .accordian__desc {
padding: 1rem;
height: 260px;
overflow: hidden;
}
.accoridan__title i {
transition: 400ms;
}
.accoridan__title.open i {
background:#02343F;
color: #F0EDCC;
transform: rotate(180deg);
}
#closeAll {
position: absolute;
right: 0;
bottom: 100%;
padding: 1rem;
background:#02343F;
color: #F0EDCC;
border: none;
/* root(browser 기본 폰트) em(font) */
border-radius: .5rem .5rem 0 0;
cursor: pointer;
}
</style>
</head>
<body>
<!--
ul > li > a : nested 방식
accordian__anhcor : BEM(Block - Element - Modified)
장점 : 클래스 바로 접근 가능
단점 : 클래스명이 길다, 이름 짓기가 힘들다
-->
<!-- 열고 닫고하는 부분이 아코디언같애서 아코디언이라고 이름을 지었다(실제로도 그렇게 부른다) -->
<section id="skill">
<ul class="accordian">
<button id="closeAll">
close all
</button>
<li class="accordian__item">
<div class="accoridan__title">
<a href="#">About</a>
<i class="fas fa-arrow-up"></i>
</div>
<p class="accordian__desc">
Lorem ipsum dolor sit amet consectetur adipisicing elit. In deleniti nostrum magni ex aspernatur. Modi mollitia in aliquid earum, placeat, odio voluptas perspiciatis alias nihil commodi quos praesentium sint officiis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. In deleniti nostrum magni ex aspernatur. Modi mollitia in aliquid earum, placeat, odio voluptas perspiciatis alias nihil commodi quos praesentium sint officiis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. In deleniti nostrum magni ex aspernatur. Modi mollitia in aliquid earum, placeat, odio voluptas perspiciatis alias nihil commodi quos praesentium sint officiis!
</p>
</li>
<li class="accordian__item">
<div class="accoridan__title">
<a href="#">Skills</a>
<i class="fas fa-arrow-up"></i>
</div>
<p class="accordian__desc">
Lorem ipsum dolor sit amet consectetur adipisicing elit. In deleniti nostrum magni ex aspernatur. Modi mollitia in aliquid earum, placeat, odio voluptas perspiciatis alias nihil commodi quos praesentium sint officiis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. In deleniti nostrum magni ex aspernatur. Modi mollitia in aliquid earum, placeat, odio voluptas perspiciatis alias nihil commodi quos praesentium sint officiis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. In deleniti nostrum magni ex aspernatur. Modi mollitia in aliquid earum, placeat, odio voluptas perspiciatis alias nihil commodi quos praesentium sint officiis!
</p>
</li>
<li class="accordian__item">
<div class="accoridan__title">
<a href="#">Info</a>
<i class="fas fa-arrow-up"></i>
</div>
<p class="accordian__desc">
Lorem ipsum dolor sit amet consectetur adipisicing elit. In deleniti nostrum magni ex aspernatur. Modi mollitia in aliquid earum, placeat, odio voluptas perspiciatis alias nihil commodi quos praesentium sint officiis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. In deleniti nostrum magni ex aspernatur. Modi mollitia in aliquid earum, placeat, odio voluptas perspiciatis alias nihil commodi quos praesentium sint officiis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. In deleniti nostrum magni ex aspernatur. Modi mollitia in aliquid earum, placeat, odio voluptas perspiciatis alias nihil commodi quos praesentium sint officiis!
</p>
</li>
</ul>
</section>
<!--
1. 타이틀을 클릭했을때
2. class명 open을 title에다가 붙여준다
-->
<script>
// 반복문
/* title[0].addEventListener('click', function(){
title[0].classList.toggle('open');
});
title[1].addEventListener('click', function(){
title[1].classList.toggle('open');
});
title[2].addEventListener('click', function(){
title[2].classList.toggle('open');
}); */
// this 전역 변수
// 특수한 변수
// window - this 같은 레벨
// this
var title = document.querySelectorAll('.accoridan__title');
for(var i = 0; i < title.length; i++){
title[i].addEventListener('click', function(){
funcCloseAll();
// click이 되었을때 this(자기자신에) classList에 toggle을 해라
this.classList.toggle('open');
});
}
// 전체 닫기
var closeAll = document.getElementById("closeAll");
closeAll.addEventListener('click', function(){
funcCloseAll();
});
function funcCloseAll(){
for(var i = 0; i < title.length; i++){
title[i].classList.remove('open');
// ele.classList
}
};
// title[0].classList.remove('open');
// title[1].classList.remove('open');
// title[2].classList.remove('open');
</script>
</body>
</html>
'웹 > JAVA SCRIPT' 카테고리의 다른 글
| [코딩 공부_104] js, 이벤트 종류! (0) | 2021.07.11 |
|---|---|
| [코딩 공부_102] drag 이벤트 사용하기 (0) | 2021.07.02 |
| [코딩 공부_90] DOM (0) | 2021.06.07 |
| [코딩 공부_89] for in 반복문, 배열(Array) (0) | 2021.06.04 |
| [코딩 공부_88] 객체(object), 프로퍼티(property), 메소드(method) (0) | 2021.06.03 |
댓글