Membuat Menu Accordion Menggunakan Vanila Javascript - hapidzfadli.id
News Update
Loading...

Selasa, 17 November 2020

Membuat Menu Accordion Menggunakan Vanila Javascript



Para front-end developer sering membuat accordion untuk project yang mereka buat. Accordion sengat lah bermanfaat untuk tampilan aplikasi yang kita buat contoh dalam ketika memiliki pertanyaan yang sering di ajukan dan kami akan menampilkan jawabnaya di dalam website. Kami bisa hanya menampilkan pentanyaan saja terlebih dahulu lalu jika user mengklik sebuah icon jawabanya muncul. Singkatnya accordion adalah proses beralih antara menyembunyikan dan menampilkan konten dalam jumlah besar. Untuk membuat accordion kita dapat menggunkan bahasa pemrograman javascript.

Sebelum mencoba membuat projek, kalian harus memiliki pemahaman terlebih dahulu mengenai HTML, CSS dan tentunya javascript. Berikut di bawah demo aplikasi yang akan coba kita buat

This Is Demo Project




Seperti yang Anda lihat pada contoh di atas, ide proyek ini sangat sederhana. Anda memiliki beberapa elemen yang mengandung pertanyaan. Ketika Anda mengklik ikon tersebut, jawaban atas pertanyaan itu akan ditampilkan. Tampaknya lebih mudah, tetapi banyak logika yang terjadi di sana.

Mulai Menggunakan HTML


Pertama, kita akan membuat div bernama container yang akan berisi tiga div (3 elemen kita). Setiap elemen berisi pertanyaan dan jawabannya yang memiliki kelas untuk menyembunyikan teks. Anda dapat melihat HTML di bawah ini untuk memahaminya.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Changer</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/e391ce7786.js" crossorigin="anonymous"></script>
    <script src="script.js" defer></script>
</head>
<body>
    <div class="container">
      
        <div class="element">
            <div class="question">
                <h3>dolor sit amet consectetur adipisicing elit. Alias, reiciendis ?</h3>
                <button><i class="fas fa-plus-circle"></i></button>
            </div>
            <div class="answer hideText">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae fugiat 
                   debitis voluptatibus in, rem nihil itaque deserunt facere porro laborum.</p>
            </div>
        </div>

        <div class="element">
            <div class="question">
                <h3>dolor sit amet consectetur adipisicing elit. Alias, reiciendis ?</h3>
                <button><i class="fas fa-plus-circle"></i></button>
            </div>
            <div class="answer hideText">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae fugiat 
                   debitis voluptatibus in, rem nihil itaque deserunt facere porro laborum.</p>
            </div>
        </div>

        <div class="element">
            <div class="question">
                <h3>dolor sit amet consectetur adipisicing elit. Alias, reiciendis ?</h3>
                <button><i class="fas fa-plus-circle"></i></button>
            </div>
            <div class="answer hideText">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae fugiat 
                   debitis voluptatibus in, rem nihil itaque deserunt facere porro laborum.</p>
            </div>
        </div>


    </div>

Menata Elemen Kita

Jadi sekarang, kita akan memberi style pada elemen kita menggunakan CSS. Anda dapat membaca kode di bawah ini untuk melihat stylesheet kami.
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    height: 100Vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container{
    width: 600px;
    max-width: 600px;
    height: auto;
    padding: 10px;
}
.element{
    padding: 10px;
    background: crimson;
    color: white;
    margin: 10px 0;
    border-radius: 5px;
}
.element .question{
    display: flex;
    justify-content: space-between;
    padding: 10px;
}
.question h3{
    font-family: sans-serif;
    font-weight: bold;
    text-transform: capitalize;
    font-size: 17px;
    text-align: center;
}
.question button{
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
}
.question i{
    color: white;
    font-size: 20px;
}
.element .answer{
    padding: 10px 20px;
    animation: animate .7s;
}
p{
    font-family: sans-serif;
}
.hideText{
    display: none;
}
@keyframes animate{
    from{
        opacity: 0;
        transform: scale(0.6);
    }
    to{
        opacity: 1;
        transform: scale(1);
    }
}

Bagian JavaScript

Sekarang, ini adalah bagian menarik yang akan membuat akordeon kami berfungsi. Dalam logika JavaScript kami, kami telah memilih semua div (elemen) kemudian kami menggunakan metode forEach untuk menambahkan event klik untuk setiap pertanyaan.

Kami juga mengubah kelas hideText yang telah kami tambahkan di HTML dan CSS, lalu kami mengubah ikon (plus-minus) berdasarkan kelas itu. Sulit untuk menjelaskan kode Anda, itulah mengapa saya mendorong Anda untuk membaca kode JavaScript di bawah ini untuk memahaminya.
const elements = document.querySelectorAll('.element');

elements.forEach(element =>{
    let btn = element.querySelector('.question button');
    let icon = element.querySelector('.question button i');
    var answer = element.lastElementChild;
    var answers = document.querySelectorAll('.element .answer');
    
    btn.addEventListener('click', ()=>{
        answers.forEach(ans =>{
            let ansIcon = ans.parentElement.querySelector('button i');
            if(answer !== ans){
                ans.classList.add('hideText');
                ansIcon.className = 'fas fa-plus-circle';
            }
        });
        
        answer.classList.toggle('hideText');
        icon.className === 'fas fa-plus-circle' ? icon.className = 'fas fa-minus-circle' 
        : icon.className ='fas fa-plus-circle';
    });
});

Sekarang Selamat, Anda telah dengan mudah membuat Accordion sederhana dengan Vanilla JavaScript.

Kesimpulan 


Cara terbaik untuk menjadi pengembang yang baik adalah dengan mempraktikkan apa yang telah Anda pelajari. Latihan membuat sempurna. membangun proyek JavaScript akan membantu Anda berlatih dan meningkatkan keterampilan pengkodean Anda secara umum. Terimakasih telah membaca artikel ini.



Share with your friends

Give us your opinion

Notification
This is just an example, you can fill it later with your own note.
Done