ACCORDION MENU CREATION
An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. It is one of many ways you can expose content to users in a progressive manner. We have put our efforts to publish this code. You will come to know ; How did we write this code with very ease and with simple logic.
PROGRAM SOURCE CODE :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Accordian Desgining</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
}
.first{
width: 100vw;
height: 100vh;
background-color: #000111;
}
.second{
width: 100%;
height: auto;
padding: 2rem 3rem;
}
.first h1{
padding: 1rem 0rem;
font-size: 3rem;
color: red;
text-transform: uppercase;
text-align: center;
text-shadow: 1px 2px #ff0;
letter-spacing: 2px;
}
.option{
width: 100%;
border:2px solid #fff;
background-color: #9932CC ;
position: relative;
}
.content{
background-color: #000 ;
color: #fff;
max-height: 0px;
transition: all 0.4s ease-in-out;
}
.content p{
padding: 2rem;
line-height:2rem;
text-indent: 10%;
font-size: 1.5rem;
}
input{
display: none;
}
label{
cursor: pointer;
}
.a{
position: absolute;
right: 0%;
top: 0%;
transition: transform 0.4s ;
}
h3{
padding: 1rem 3rem;
color: #fff;
font-family: cursive;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 2rem;
}
.option > .m:checked ~ .content{
max-height: 100vh;
}
.option > .m:checked ~ .a{
transform: rotate(-90deg);
}
@media (max-width: 998px){
html{
font-size: 85%;
}
}
@media (max-width:600px){
html{
font-size: 65%;
}
}
</style>
</head>
<body>
<div class="first">
<h1>Accordian Creation</h1>
<div class="second">
<div class="option">
<input type="checkbox" name="a" id="i" class="m">
<label for="i"><h3>HTML</h3></label>
<h3 class="a"><</h3>
<div class="content">
<p>
HTML is a markup language for describing web documents (web pages).
HTML stands for Hyper Text Markup Language.
A markup language is a set of markup tags.
HTML documents are described by HTML tags.
Each HTML tag describes different document content
HTML is a markup language for describing web documents (web pages).
HTML stands for Hyper Text Markup Language.
A markup language is a set of markup tags.
HTML documents are described by HTML tags.
Each HTML tag describes different document content
</p>
</div>
</div>
<div class="option">
<input type="checkbox" name="a" id="j" class="m">
<label for="j"><h3>css</h3></label>
<h3 class="a"><</h3>
<div class="content">
<p>
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once
.External stylesheets are stored in CSS files
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once
.External stylesheets are stored in CSS files.
</p>
</div>
</div>
<div class="option">
<input type="checkbox" name="a" id="k" class="m">
<label for="k"><h3>javascript</h3></label>
<h3 class="a"><</h3>
<div class="content">
<p>
JavaScript is the programming language of HTML and the Web.
Programming makes computers do what you want them to do.
JavaScript is easy to learn.
This tutorial will teach you JavaScript from basic to advanced.
JavaScript is the programming language of HTML and the Web.
Programming makes computers do what you want them to do.
JavaScript is easy to learn.
This tutorial will teach you JavaScript from basic to advanced.
</p>
</div>
</div>
<div class="option">
<input type="checkbox" name="a" id="l" class="m">
<label for="l"><h3>php</h3></label>
<h3 class="a"><</h3>
<div class="content">
<p>
PHP is an acronym for "PHP: Hypertext Preprocessor"
PHP is a widely-used, open source scripting language
PHP scripts are executed on the server
PHP is free to download and use
PHP is an acronym for "PHP: Hypertext Preprocessor"
PHP is a widely-used, open source scripting language
PHP scripts are executed on the server
PHP is free to download and use
</p>
</div>
</div>
</div>
</div>
</body>
</html>
