Accordion Menu 2

CODEPEN:

Accordion Menu 2

---

Github: https://github.com/furkangulsen98/HTML-CSS-JAVASCRIPT/tree/master/Accordion%20Menu%202

---

HTML CODE:

<div class="container">
        <h3>Accordion Menu 2</h3>
        
        <div class="accordion">

            <!-- Menu 1 -->
            <div class="accordion-item">
                <a>What is Angular JS? How to use?</a>
                <div class="info">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit, sed do eiusmod tempor incididunt ut labore et
                        dolore magna aliqua. Elementum sagittis vitae et leo
                        duis ut. Ut tortor pretium viverra suspendisse potenti.
                    </p>
                </div>
            </div>

            <!-- Menu 2 -->
            <div class="accordion-item">
                <a>What is ReactJS? How to use?</a>
                <div class="info">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit, sed do eiusmod tempor incididunt ut labore et
                        dolore magna aliqua. Elementum sagittis vitae et leo
                        duis ut. Ut tortor pretium viverra suspendisse potenti.
                    </p>
                </div>
            </div>

            <!-- Menu 3 -->
            <div class="accordion-item">
                <a>What is Node.js? How to use?</a>
                <div class="info">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit, sed do eiusmod tempor incididunt ut labore et
                        dolore magna aliqua. Elementum sagittis vitae et leo
                        duis ut. Ut tortor pretium viverra suspendisse potenti.
                    </p>
                </div>
            </div>

            <!-- Menu 4 -->
            <div class="accordion-item">
                <a>What is Vue.js? How to use?</a>
                <div class="info">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit, sed do eiusmod tempor incididunt ut labore et
                        dolore magna aliqua. Elementum sagittis vitae et leo
                        duis ut. Ut tortor pretium viverra suspendisse potenti.
                    </p>
                </div>
            </div>

            <!-- Menu 5 -->
            <div class="accordion-item">
                <a>What is jQuery? How to use?</a>
                <div class="info">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit, sed do eiusmod tempor incididunt ut labore et
                        dolore magna aliqua. Elementum sagittis vitae et leo
                        duis ut. Ut tortor pretium viverra suspendisse potenti.
                    </p>
                </div>
            </div>

        </div>
    </div>

---

CSS CODE:

@import url('https://fonts.googleapis.com/css?family=Hind:300,400');

html{
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
    font-family: "Hind" , sans-serif;
    background: #fff;
    color: #4d5974;
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    min-height: 100vh;
}
.container {
    margin: 0 auto;
    padding: 4rem;
    width: 48rem;
}
h3 {
  font-size: 1.75rem;
  color: #373d51;
  padding: 1.3rem;
  margin: 0;
}
.accordion a {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  padding: 1rem 3rem 1rem 1rem;
  color: #7288a2;
  font-size: 1.15rem;
  font-weight: 400;
  border-bottom: 1px solid #e5e5e5;
}
.accordion a::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  content: "\f067";
  position: absolute;
  float: right;
  right: 1rem;
  font-size: 1rem;
  color: #7288a2;
  padding: 5px;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid #7288a2;
  text-align: center;
  
}
.accordion a:hover,
.accordion a:hover::after {
  cursor: pointer;
  color: #03b5d2;
}
.accordion a:hover::after {
  border: 1px solid #03b5d2;
}
.accordion a.active {
  color: #03b5d2;
  border-bottom: 1px solid #03b5d2;
}
.accordion a.active::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  content: "\f068";
  color: #03b5d2;
  border: 1px solid #03b5d2;
}
.accordion .info {
  opacity: 0;
  padding: 0 1rem;
  max-height: 0;
  border-bottom: 1px solid #e5e5e5;
  overflow: hidden;
  clear: both;
  -webkit-transition: all 0.2s ease 0.15s;
  -o-transition: all 0.2s ease 0.15s;
  transition: all 0.2s ease 0.15s;
}

.accordion .info p {
  font-size: 1rem;
  font-weight: 300;
}

.accordion .info.active {
  opacity: 1;
  padding: 1rem;
  max-height: 100%;
  -webkit-transition: all 0.35s ease 0.15s;
  -o-transition: all 0.35s ease 0.15s;
  transition: all 0.35s ease 0.15s;
}

---

JS CODE:

  let items = document.querySelectorAll(".accordion a");
        items.forEach((item) => item.addEventListener('click', toggleAccordion));

        function toggleAccordion() {
            this.classList.toggle('active');
            this.nextElementSibling.classList.toggle('active');
        }