Arden  Keebler

Arden Keebler

1652151840

How to Build Accordion using Css and Javascript

In this video tutorial, We'll show you How to Build Accordion using Css and Javascript With Step by Step. Let's explore it with us now!

 #ui  #css #javascript 

What is GEEK

Buddha Community

How to Build Accordion using Css and Javascript
Raja Tamil

Raja Tamil

1652413050

Create A Simple Accordion Menu Using Vanilla JavaScript

By the end of this tutorial, you’re going to be building a simple accordion menu, just using Vanilla JavaScript of course, with the combination of HTML and CSS.

What are we building?

Accordion Menu HTML Structure

The HTML code of the Accordion Menu is pretty straightforward.

I have a simple section element with an id called #accordion-container.

Inside that, add three divs with the class name .menu and each contains two HTML elements: .header and .content.

Header element also contains .title and .icon elements.

<section id="accordion">

    <div class="menu">
        <div class="header">
            <div class="title">Title 1</div>
            <span class="icon">+</span>
        </div>
        <div class="content">
            Content 1
        </div>
    </div>

    <div class="menu">
        <div class="header">
            <div class="title">Title 2</div>
            <span class="icon">+</span>
        </div>
        <div class="content">
            Content 2
        </div>
    </div>

    <div class="menu">
        <div class="header">
            <div class="title">Title 3</div>
            <span class="icon">+</span>
        </div>
        <div class="content">
            Content 3
        </div>
    </div>

</section>

Accordion Menu CSS

Let’s add some CSS to make to match the final result.

Define a CSS rule for #accordion with a max-width to 500px and make it center to the screen horizontally using margin: 0 auto property.

After that, add borders all-around to each .menu item which is the clickable area of the accordion menu.

#accordion {
  max-width: 500px;
  margin:0 auto;
}

.menu {
  border:1px solid #008080;
  border-bottom:none;
}

 .menu:last-child {
  border-bottom:1px solid #808080;
}

Using flexbox, lets move the “+” icon to the right and keep the title on the left.

Recommended
Must-Know CSS Flexbox Responsive Multi-Column Layout Explained


.header {
  display:flex;
  padding:10px; 
  cursor: pointer;
}

.title {
  flex:1;
}

.icon {
  width:20px;
} 

 .content {
  padding:10px;
} 

Finally, hide the .content by default and I’ll show you how to toggle it’s visibility using JavaScript in just a moment.

.content {
  display:none;
  padding:10px;
} 

That looks much better.

Now let’s move into the fun part.

Accordion Menu JavaScript

The first step is to get all the DOM references of the header as well as the content and assign them to the constant arrays called headers and contents respectively.

const headers = document.getElementsByClassName("header"),
      contents = document.getElementsByClassName("content");

Secondly, iterate through the headers array using for loop and attach a click event to each header inside with a callback arrow function.

Recommended
JavaScript For Loop Click Event ← Issues & Solutions Explained

for (let i = 0; i < headers.length; i++) {
     headers[i].addEventListener("click", () => {
     });
}

Finally, toggle the content visibility by using the display CSS property on it. I used the ternary operator here to achieve this but you can also use the regular if statement.

Continue Reading…

#HTML #css #JavaScript 

CSS Boss

CSS Boss

1606912089

How to create a calculator using javascript - Pure JS tutorials |Web Tutorials

In this video I will tell you How to create a calculator using javascript very easily.

#how to build a simple calculator in javascript #how to create simple calculator using javascript #javascript calculator tutorial #javascript birthday calculator #calculator using javascript and html

code savvy

code savvy

1630506330

Product landing page using HTML CSS & JavaScript | web design

Knowledge

This video is about the product landing page using HTML CSS And JavaScript, in which we created a simple product landing page using HTML CSS and in order to perform  those powerful animations we use the GSAP a JavaScript animation library for work done.

In this video we broadly cover the concepts of CSS Flex box and CSS Grid system and Some CSS Properties such as nth child selector, ::before & ::after much more.

Don't forget to join the channel for more videos like this. Code Savvy

📁 Assets 
Icons : https://fontawesome.com/
Fonts : https://fonts.google.com/
GitHub : https://github.com/ananikets18
GSAP : https://greensock.com/gsap/

Outline ⏱

0:00 - Intro
0:10 - Result
0:38 - Project Setup
01:35 – Reset HTML
02:21 – Left Container HTML
03:41 – Wrapper
14:58 – Bottom Shoe Nav
26:23 – Right Container HTML
33:10 – Product Size
35:49 – Reviews
41:11 – GSAP Animations

Click to Watch Full tutorial on YOUTUBE

#html  #css  #javascript  #web-development #html5 

#html #css #tailwindcss #javascript 

anita maity

anita maity

1618667723

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.

Demo

#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css

Nandini roy

Nandini roy

1618667097

Responsive Personal Portfolio Website Using HTML CSS and JavaScript

Tutorial: https://youtu.be/9DDiorNZiyw

#create a portfolio website with html css javascript #personal portfolio complete website using only html css javascript #responsive portfolio website html css javascript #responsive personal portfolio website #portfolio website #responsive website