You’re building a simple website, a good-looking landing page with a “See More” button. Instinctively, you reach for JavaScript to handle the button click event.
But wait — what if I told you that CSS alone could do the job?
Yes. CSS is often underestimated, but it can handle click interactions without JavaScript.
In this guide, you’ll learn how to create CSS-only click handlers using the :target pseudo-class, and explore scenarios where this approach makes perfect sense.
The :target Pseudo-Class
CSS offers several pseudo-classes that let you style elements based on different states (:hover, :focus, :checked).
But there’s one you might not have used before — :target.
The :target pseudo-class applies styles to an element when its ID matches the fragment identifier in the URL (the part after #).
This behavior is commonly seen when clicking an anchor link that jumps to a section on the same page.
Here’s a simple example :
<a href="#contact">Go to Contact</a>
<section id="contact">This is the contact section.</section>
When you click the link, the browser scrolls to the element with the id=”contact”, and that element becomes the :target. You can use this to apply specific styles to that element — such as displaying hidden content.
Building a CSS-Only “See More” Toggle
Let’s create a basic landing page with a “See More” button that reveals additional content using only HTML and CSS.
HTML Structure:
<h1>Welcome to Our Site</h1>
<p>This is a simple landing page.</p>
<a href="#more" class="see-more-btn">See More</a>
<div id="more" class="more-content">
<a href="#" class="close-btn">Close</a>
<p>Here's some more information about our product or service!</p>
</div>
CSS Styling:
.more-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out, padding 0.3s ease-out;
background: #f0f0f0;
padding: 0 1rem;
margin-top: 1rem;
}
/* When the section is targeted, expand it */
#more:target {
max-height: 200px; /* Adjust based on content */
padding: 1rem;
}
.see-more-btn,
.close-btn {
display: inline-block;
margin-top: 1rem;
background-color: #007BFF;
color: white;
padding: 0.5rem 1rem;
text-decoration: none;
border-radius: 4px;
}
.close-btn {
background-color: #dc3545;
}
How It Works
Clicking “See More” adds #more to the URL, targeting the #more div.
The :target pseudo-class applies, and styles change to reveal the content.
Inside that div, the “Close” link points to #, removing the fragment and collapsing the content.
Benefits of This Approach
No JavaScript required: Perfect for static sites, documentation, or minimal setups.
Improved performance: Fewer scripts mean faster loading and better accessibility.
Progressive enhancement: Works even if JavaScript is disabled.
Limitations to Keep in Mind
You can’t toggle back and forth with the same link — you need separate “open” and “close” links.
It relies on the URL’s hash, which could interfere with deep linking or browser history.
More complex UI interactions (like accordions, multiple toggles, or animations based on timing) are better handled with JavaScript.
Real-World Use Cases
Toggle FAQ sections
Show/hide forms
Navigation drawers in static sites
Interactive resumes or portfolios
Final Thoughts
CSS is often seen as just a styling tool, but with features like :target, it can take on roles you might’ve reserved for JavaScript. While it’s not a replacement for full interactivity, it’s a clever, fast, and simple way to build basic interactions without writing a single line of JavaScript.
So next time you’re about to reach for JS, ask yourself — can CSS handle this? You might be surprised!
Let me know if you’d like this turned into a CodePen or GitHub demo!
Comments
Post a Comment