🧾How to Create Accordion🪗

Note: If you are a beginner, this is something you need to know. Scroll the below section or Click here

Button in HTML
difference between nth-child & nth-of-type
addEventListener in JS
previousElementSibling & nextElementSibling & parentElement.

Click the each section and see how it's works

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet odit facere excepturi culpa enim alias tenetur obcaecati? Atque, repellat, beatae recusandae provident necessitatibus perspiciatis animi exercitationem ipsam iste, sed adipisci.

HTML



<div class="accordion">

    <button class="action">Section 1</button>

    <div class="accordionContent">

        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet odit facere excepturi culpa enim alias tenetur obcaecati? Atque, repellat, beatae recusandae provident necessitatibus perspiciatis animi exercitationem ipsam iste, sed adipisci.</p>

    </div>

    <button class="action">Section 2</button>

    <div class="accordionContent">

        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet odit facere excepturi culpa enim alias tenetur obcaecati? Atque, repellat, beatae recusandae provident necessitatibus perspiciatis animi exercitationem ipsam iste, sed adipisci.</p>

    </div>


    <button class="action">Section 3</button>

    <div class="accordionContent">

        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet odit facere excepturi culpa enim alias tenetur obcaecati? Atque, repellat, beatae recusandae provident necessitatibus perspiciatis animi exercitationem ipsam iste, sed adipisci.</p>

    </div>




</div>

JavaScript


var action=document.querySelectorAll(".action");
//console.log(action.length);


for(let i=0;i< action.length;i++){
    action[i].addEventListener("click",function(){
        /*
        console.log(i+1);
        console.log(action[i].nextElementSibling);
        */
        
        let showed=this.nextElementSibling;

        if(showed.style.display=="none"||showed.style.display==""){
            showed.style.display="block";
        }
        else{
            showed.style.display="none";
        }

    });
}

CSS


.accordion button{
    width: 100%;
    padding: 14px 5px;
    border: none;
    text-align: left;
    font-size: 17px;
    cursor: pointer;
}
.accordion button:nth-of-type(odd){
    background-color: #aaa;
}
.accordion button:hover{
    background-color: #ccc;
}
.accordion .accordionContent{
    padding: 6px;
    background-color:rgba(232, 153, 4, 0.851);
    display: none;
    
}

HTML DOM

querySelector: retuns the first element within the document that matches the specified CSS selctor. Example: const sampleElement = document.querySelector('.sample').If there are mutltiple element with the class name 'sample' `querySelector` will return the first matching elements.
You can also use getElementById, getElementByClassName, querySelectorAll etc

String charAt()

The charAt(): method in JavaScript returns the character at a specified index in a string. The index starts from 0. Example: const str = "Hello, World!";
const char = str.charAt(7)

setTimeOut method()

setTimeOut(function-name, millsec): that will execute the provided function after certain millisecond.
clearTimeout(timeoutId) used to cancel time out if needded.

requestAnimationFrame()

requestAnimationFrame(): works by calling the provided callback function before the next repaint, allowing smooth animations.
Example requestAnimationFrame(function_name);

Projects