<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Accordion Menu </title>
<style>
h2 {
color: green;
}
body {
width: 40%;
}
/* Hide the buttons */
input[type="checkbox"] {
display: none;
}
/* Style the labels as buttons */
label {
display: block;
padding: 10px 20px;
background-color: #3498db;
color: #fff;
cursor: pointer;
margin-bottom: 8px;
border-radius: 3px;
}
input[type="checkbox"]:checked+label {
background-color: gray;
}
/* Hide the content divs by default */
.content {
display: none;
padding: 10px;
border: 1px solid #ccc;
border-top: none;
border-radius: 0 0 5px 5px;
}
/* Show the content */
input[type="checkbox"]:checked+label+.content {
display: block;
}
</style>
</head>
<body>
<h2> GeeksforGeeks</h2>
<h3>Accorfion menu by using CSS</h3>
<input type="checkbox" id="sec1">
<label for="sec1">HTML</label>
<div class="content">
<p>
HTML stands for HyperText Markup Language.
It is used to design the web pages. With
the help of HTML, you can create a complete
website structure. HTML is the combination
of Hypertext and Markup language.
</p>
</div>
<input type="checkbox" id="sec2">
<label for="sec2">CSS</label>
<div class="content">
<p>
CSS (Cascading Style Sheets) is used to
styles web pages. Cascading Style Sheets
are fondly referred to as CSS. The reason
for using this is to simplify the process
of making web pages presentable.
</p>
</div>
<input type="checkbox" id="sec3">
<label for="sec3">JavaScript</label>
<div class="content">
<p>
JavaScript is a lightweight, cross-platform,
single-threaded, and interpreted compiled
programming language. It is also known as
the scripting language for webpages. It is
well-known for the development of web pages,
and many non-browser environments also use it.
</p>
</div>
</body>
</html>
.gif){kind=small}
