How to create an accordion menu using only pure css
Please subscribe our channel and support me.
Please like and 1 comment this video.
If you are visiting my channel for the first time then please subscribe
Go to my Youtube channel : https://www.youtube.com
Html Code
<div class="container">
<div class="tab">
<input type="checkbox" id="id1">
<label class="tab-label" for="id1">What is CSS web design?</label>
<div class="tab-content">What is CSS? CSS is the language for describing the presentation of Web pages,
including colors, layout, and fonts. It allows one to adapt the presentation to different types of
devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used
with any XML-based markup language.</div>
</div>
<div class="tab">
<input type="checkbox" id="id2">
<label class="tab-label" for="id2">Which is better HTML or CSS?</label>
<div class="tab-content">Since HTML is a markup language to define the web pages structure or organization,
the same format and syntax cannot be used in CSS sheets. On the other hand CSS is independent of HTML
and will be usable with many of the markup languages which are XML-based.</div>
</div>
<div class="tab">
<input type="checkbox" id="id3">
<label class="tab-label" for="id3">What language is CSS written in?</label>
<div class="tab-content">Cascading Style Sheets (CSS) is a stylesheet language used to describe the
presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML)
</div>
</div>
<div class="tab">
<input type="checkbox" id="id4">
<label class="tab-label" for="id4">How CSS is used in HTML?</label>
<div class="tab-content">With CSS, you can control the color, font, the size of text, the spacing between
elements, how elements are positioned and laid out, what background images or background colors are to
be used, different displays for different devices and screen sizes, and much more!</div>
</div>
</div>
CSS Code
body {
display: block;
box-sizing: border-box;
background: #fbfbfb;
font-family: roboto;
}
.container {
border-radius: 8px;
overflow: hidden;
max-width: 780px;
margin: 0 auto;
margin-top: 10%;
box-shadow: 0 4px 4px -2px #00000080;
}
.tab {
width: 100%;
color: white;
overflow: hidden;
}
.tab-label {
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
padding: 1em;
background: #293138;
font-weight: bold;
cursor: pointer;
}
.tab-label:hover {
background: #1a252f;
}
.tab-label::after {
content: "\276F";
width: 1em;
height: 1em;
text-align: center;
transition: all .35s;
}
.tab-content {
max-height: 0;
padding: 0 1em;
line-height: 1.8;
color: #2c3e50;
background: #fff;
transition: all .35s;
}
input:checked+.tab-label {
background: #1a252f;
}
input:checked+.tab-label::after {
transform: rotate(90deg);
}
input:checked~.tab-content {
max-height: 100vh;
padding: 1em;
}
input {
position: absolute;
opacity: 0;
z-index: -1;
}
blogger theme design : https://youtu.be/DAIJTjRzxLk
Login Form : https://youtu.be/HWbAr1XN3Lc
Forms design : https://youtu.be/M2ERkDXjEuw
Responsive CSS card : https://youtu.be/Ol9_5cYtAaw
Navigation design : https://youtu.be/LNEgZBdWPGM
Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use .
Thanks..
Copyright © 2021-2023 | WsCoder | All Right Reserved
