아코디언 메뉴

아이콘은 fontawesome 5버전으로 사용

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />

 

<section class="container">
   <ul class="accordion">
      <li class="item">
         <h2 class="accordionTitle">London <i class="fas fa-chevron-down ict"></i></h2>
         <div class="text">London is the capital and largest city of England, the United Kingdom, and the European Union. Standing on the River Thames in southeastern England, at the head of its 50-mile (80 km) estuary leading to the North Sea, London has been a major settlement for two millennia. </div>
      </li>
      <li class="item">
         <h2 class="accordionTitle">Madrid <i class="fas fa-chevron-down ict"></i></h2>
         <div class="text">Madrid is the capital of Spain and the largest municipality in both the Community of Madrid and Spain as a whole. The city has almost 3.2 million inhabitants and a metropolitan area population of approximately 6.5 million.</div>
      </li>
      <li class="item">
         <h2 class="accordionTitle">Paris <i class="fas fa-chevron-down ict"></i></h2>
         <div class="text">Paris is the capital and most populous city of France, with an area of 105 square kilometres (41 square miles) and a population of 2,206,488. Since the 17th century, Paris has been one of Europe's major centres of finance, commerce, fashion, science, and the arts.</div>
      </li>
      <li class="item">
         <h2 class="accordionTitle">Barcelona <i class="fas fa-chevron-down ict"></i></h2>
         <div class="text">Barcelona is a city in Spain. It is the capital and largest city of Catalonia, as well as the second most populous municipality of Spain. With a population of 1.6 million within city limits, its urban area extends to numerous neighbouring municipalities within the Province of Barcelona and is home to around 4.8 million people.</div>
      </li>
      <li class="item">
         <h2 class="accordionTitle">Milan <i class="fas fa-chevron-down ict"></i></h2>
         <div class="text">Milan is a city in northern Italy, capital of Lombardy, and the second-most populous city in Italy after Rome, with the city proper having a population of 1,372,810 while its metropolitan area has a population of 3,242,820.</div>
      </li>
   </ul>
</section>

body {
  margin: 0;
  font-family: sans-serif;
}

.container {
  width: 100%;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.accordionTitle {
  padding: 20px;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  color: #363636;
  cursor: pointer;
  width: 100%;
  max-width: calc(100% - 80px);
  position: relative;
}

.accordionTitle:after {
  content: '';
  display: block;
  width: calc(100% + 80px);
  height: 1px;
  background: #EDEDED;
  position: absolute;
  bottom: 1px;
  left: 0;
}

.accordionTitleActive {
  font-weight: 600;
  color: #222222;
}

.ict {
  opacity: .4;
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
}

.ict.anime {
  transform: rotate(-180deg) translateY(50%);

}

.accordion .item .text {
  opacity: 0;
  height: 0;
  padding: 0px 20px;
  line-height: 24px;
  font-size: 16px;
  font-weight: 400;
  transition: all 0.3s cubic-bezier(0.42, 0.2, 0.08, 1);
  overflow: hidden;
  background-color: #f8f8f8;
  border-bottom: 1px solid #EDEDED;
}

.accordion .item .text p {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: #666666;
}

.accordion .item .text.show {
  opacity: 1;
  height: auto;
  padding: 25px 20px;
}

const accordionBtn = document.querySelectorAll('.accordionTitle');
const allTexts = document.querySelectorAll('.text');
const accIcon = document.querySelectorAll('.ict');

accordionBtn.forEach(function (el) {
  el.addEventListener('click', toggleAccordion)
});

function toggleAccordion(el) {
  const targetText = el.currentTarget.nextElementSibling.classList;
  const targetAccIcon = el.currentTarget.children[0];
  const target = el.currentTarget;

  if (targetText.contains('show')) {
    targetText.remove('show');
    targetAccIcon.classList.remove('anime');
    target.classList.remove('accordionTitleActive');
  } else {
    accordionBtn.forEach(function (el) {
      el.classList.remove('accordionTitleActive');

      allTexts.forEach(function (el) {
        el.classList.remove('show');
      })

      accIcon.forEach(function (el) {
        el.classList.remove('anime');
      })

    })

    targetText.add('show');
    target.classList.add('accordionTitleActive');
    targetAccIcon.classList.add('anime');
  }
}