Skip to content

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');
        }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: