Hi, I’m Hanona

I compiled all w3schools HowTo code snippets with their practical steps.

Using Open-source♥ illustrations from unDraw
Summary is based on w3schools How-tos

Icon Barusing Font Awesome icons

icon bar
Link Font Awesome CDN inside the <head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Add the <i>element</i> inside your anchor links
<div class="icon-bar">
    <a class="active" href="#"><i class="fa fa-home"></i></a> 
    <a href="#"><i class="fa fa-search"></i></a> 
    <a href="#"><i class="fa fa-envelope"></i></a> 
    <a href="#"><i class="fa fa-globe"></i></a>
    <a href="#"><i class="fa fa-trash"></i></a> 
</div>
Style your Icon Bar in the CSS
.icon-bar {
    width: 90px;
    background-color: #555;
}
                          
.icon-bar a {
    display: block;
    text-align: center;
    padding: 16px;
    transition: all 0.3s ease;
    color: white;
    font-size: 36px;
}
                          
.icon-bar a:hover {
    background-color: #000;
}
                          
.active {
    background-color: #04AA6D;
}

AccordionCollapsible accordion , with separate action for each section

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

accordion
for each section of the accordion add a button(with .accordion class) and a panel div (will be nextSibling to the button) 
<div class="accordion-wrapper">

    <button class="accordion">Section 1</button>
    <div class="panel">
        <p>Lorem ipsum</p>
    </div>
                
    <button class="accordion">Section 2</button>
    <div class="panel">
        <p>Lorem ipsum</p>
    </div>
                
    <button class="accordion">Section 3</button>
    <div class="panel">
        <p>Lorem ipsum</p>
    </div>
</div>
ddd
query sellect all accordion sections buttons (using .accordion class), then loop through the accordion sections (using for) to: add Event Listener for mouse clicks to toggle the .active class, and if condition to open/close the corresponding next sibling (panel) 
let accordions = document.querySelectorAll("#accordion .accordion-wrapper .accordion");

for (let i = 0; i < accordions.length; i++) {
    
    accordions[i].addEventListener("click", function () {
    this.classList.toggle("active");
    
    let panel = this.nextElementSibling;
    if (panel.style.display === "block") {
        panel.style.display = "none";
        } else { panel.style.display = "block";
        }
    });
}