» »

Accordion Dropdown using HTML, CSS and Javascript

  


Hello, I will provide a free code for all of you on my YouTube channel, in learning "Accordion Dropdown using HTML, CSS and Javascript". The learning is very easy, simple and easy to understand for beginners, good luck, good luck, my advice is don't forget to keep learning and repeat until you can, happy coding. have a nice day friend.

this is my post for the previous one, you just have to learn it properly, and I will provide the latest updates about teaching web design quickly and easily

the best way is to always learn and practice directly, don't get hung up on confusing code, if you enter the wrong code, don't panic

This is the code HTML and CSS you need learn :

1. HTML and Javascript

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>choose</title>

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

    <link rel="stylesheet" href="style.css">

</head>

<body>

<section class="q-a">

    <h1 class="heading"> questions and <span>answers</span> </h1>

    <div class="q-a-hero">

        <div class="hero">

            <div class="hero-heading">

                <h3>what your favourite games?</h3>

                <i class="fas fa-angle-down"></i>

            </div>

            <p class="content">

                Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, totam optio? Quod enim veniam libero quasi quae dolor sint quidem! Ea fugiat dicta nam nostrum.

            </p>

        </div>

        <div class="hero">

            <div class="hero-heading">

                <h3>how to play game football and basketball?</h3>

                <i class="fas fa-angle-down"></i>

            </div>

            <p class="content">

                Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, totam optio? Quod enim veniam libero quasi quae dolor sint quidem! Ea fugiat dicta nam nostrum.

            </p>

        </div>

    </div>

</section>

<script>

    document.querySelectorAll('.q-a-hero .hero').forEach(hero =>{

    hero.onclick = () =>{

        hero.classList.toggle('active');

    }

});

</script>

</body>

</html>


2. CSS

* {

  font-family: 'montserrat', sans-serif;

  margin: 0;

  padding: 0;

  text-transform: capitalize;

  transition: all .3s linear;

}


html {

  font-size: 62%;

}

body {

  background: #eee;

}


section {

  padding: 7.5rem 9%;

}


.heading {

  text-align: center;

  margin-bottom: 3rem;

  font-size: 4rem;

  padding-top: 10rem;

  color: #333;

}


.heading span {

  color: #d40051;

}

.q-a .q-a-hero {

  max-width: 70rem;

  margin: 0 auto;

}

.q-a .q-a-hero .hero {

  background: #fff;

  margin-bottom: 1.5rem;

  box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.2);

}

.q-a .q-a-hero .hero:last-child {

  margin-bottom: .5rem;

}


.q-a .q-a-hero .hero.active .hero-heading {

  background: #d40051;

}


.q-a .q-a-hero .hero.active .hero-heading i {

  transform: rotate(180deg);

}

.q-a .q-a-hero .hero.active .content {

  display: block;

}

.q-a .q-a-hero .hero .hero-heading {

  padding: 2rem;

  display: flex;

  align-items: center;

  gap: 1rem;

  justify-content: space-between;

  background: rgb(65, 0, 0);

  cursor: pointer;

}


.q-a .q-a-hero .hero .hero-heading h3 {

  font-size: 2rem;

  color: #fff;

}

.q-a .q-a-hero .hero .hero-heading i {

  font-size: 2rem;

  color: #fff;

}


.q-a .q-a-hero .content {

  padding: 2rem;

  font-size: 1.5rem;

  line-height: 2;

  color: #333;

  display: none;

  animation: fadeIn .2s linear;

}


Watch Video below:


Support my channel. Comment, like and subscribe, success for all of us, happy world hereafter. Amin, Good Luck. 😀

Postingan terkait:

— — Add Comment — ,

Belum ada tanggapan untuk "Accordion Dropdown using HTML, CSS and Javascript"

Post a Comment

Subscribe to: Post Comments (Atom)