Howto

How To Create Accordion Using JavaScript, HTML, and CSS

How to create accordion using JavaScript, HTML, and CSS

Accordion are useful when you want to toggle between hiding and showing large amount of content. we can hereby create an accordion using JavaScript, HTML and CSS. But lets look on how to create accordion using JavaScript, HTML, and CSS

 

JavaScript (JS) is a lighImage result for javascript official logotweight, interpreted, programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as node.js and Apache CouchDB. JS is aprototype-based, multi-paradigm, dynamic scripting language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. Read more about JavaScript.

HyperText Markup LanguImage result for HTMLage (HTML) is the standard markup language for creating web pages and web applications. WithCascading Style Sheets (CSS), and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web.[1] Web browsersreceive HTML documents from a webserver or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.

Cascading Style ShImage result for CSSeets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.

Steps on how to create accordion using JavaScript, HTML, and CSS

Step 1Add HTML:

<button class=”accordion”>Section 1</button>

<div class=”accord”>

<p>Look up</p>

</div>

<button class=”accordion”>Section 2</button>

<div class=”accord”>

<p>Look up</p>

</div>

<button class=”accordion”>Section 3</button>

<div class=”accord”>

<p>Look up</p>

</div>

Step 2 Add CSS:

Style the accordion:

/* Style the buttons that are used to open and close the accordion */

button.accordion {

background-color: green;

color: #fff;

cursor: pointer;

padding: 19px;

width: 100%;

text-align: left;

border: none;

outline: none;

transition: 0.5s;

}

/* Add a background color to the button if it is clicked on, and when you move the mouse over it */

button.accordion.active, button.accordion:hover {

background-color: blue;

}

div.accord {

padding: 0 18px;

background-color: yellow;

display: none;

}

div.panel.show {

display: block;

}

Step 3 Add JavaScript:

var accrd = document.getElementsByClassName(“accordion”);

var i;

for (i = 0; i < accrd.length; i++) {

accrd[i].onclick = function(){

this.classList.toggle(“active”);

this.nextElementSibling.classList.toggle(“show”);

}

}

 


P.S. Thanks for reading this far! If you found value in this, we’d really appreciate it if you recommend this post (by clicking the share buttons) so other people can learn!

Found this Howto helpful? Subscribe for more!

You may also learn:

Comments
To Top