This HTML & CSS code snippet helps you to expand and collapse text sections without JavaScript. It utilizes checkboxes and CSS animations. These sections help in organizing and presenting content interactively on webpages.
You can use this code to create collapsible sections in your HTML webpages. It’s beneficial for organizing content and saving space.
How to Create Expand Collapse Text Sections in HTML without JavaScript
1. To use icons for indicating an expand/collapse state, include Font Awesome CSS in the <head> section of your HTML file.
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.2.0/css/all.css'>
2. Structure your HTML code. Each collapsible section will be contained within a <section> tag, and you’ll use checkboxes to control the expanding and collapsing behavior.
<div class="container">
<section class="collapse">
<input type="checkbox" checked>
<h2>I collapse!</h2>
<i class="fa fa-chevron-down"></i>
<p>You can hide text in here</p>
</section>
<section class="collapse">
<input type="checkbox">
<h2>I expand</h2>
<i class="fa fa-chevron-down"></i>
<p>Hi! :D</p>
</section>
<section class="collapse">
<input type="checkbox">
<h2>Click me!</h2>
<i class="fa fa-chevron-down"></i>
<p>Thanks for visiting my pen!</p>
</section>
</div>
3. Now, add CSS styles to control the appearance and behavior of your collapsible sections. This CSS will handle animations, positioning, and toggle functionality.
@import url(https://fonts.googleapis.com/css?family=Roboto);
* {
margin: 0;
padding: 0;
line-height: 1.2em;
}
.container {
background: linear-gradient(45deg, #1e5799 0%, #207cca 51%, #2989d8 100%, #7db9e8 100%, #2989d8 100%);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #bbb;
border-radius: 5px;
overflow: hidden;
color: #fff;
font-family: Roboto;
}
input:checked ~ p {
height: 50px;
padding-top: 10px;
}
input:checked ~ .fa-chevron-down {
transform: rotate(180deg);
}
.collapse {
position: relative;
margin: 0 auto;
cursor: pointer;
padding: 10px 20px;
width: 300px;
border-bottom: 1px solid rgba(0,0,0,0.3);
}
.collapse:hover {
background: rgba(0,0,0,0.2);
}
input {
position: absolute;
height: 100%;
width: 100%;
opacity: 0;
top: 0;
left: 0;
cursor: pointer;
}
.fa-chevron-down {
position: absolute;
right: 20px;
top: 17px;
font-size: 16px;
transition: .2s linear;
}
p {
transition: .2s ease-in;
width: 100%;
height: 0px;
overflow: hidden;
}
Feel free to customize the CSS to match your website’s design and branding. You can adjust colors, fonts, sizes, and animations according to your preference.
That’s it! You’ve successfully created expandable and collapsible sections in HTML without using JavaScript. This technique provides a simple yet effective way to enhance user interaction on your webpages. Experiment with different designs and layouts to find what works best for your website.
