Skip to main content

CSS only Click-handlers You Might not be using, but you should

 


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

Popular posts from this blog

Exploring Google’s New Gemini CLI: The Ultimate Open-Source Dev Tool

  Google quietly released a local AI agent that builds apps, debugs code, parses your repo, and fetches real-time data, right inside your terminal. And it’s completely free. This year, the most revolutionary developer tools I’ve used didn’t come with a splashy launch or billion-dollar hype. It came as a simple CLI: Gemini CLI, a terminal-based AI agent built on top of Google’s Gemini 2.5 Pro model . At first glance, it looks like a lightweight alternative to Claude Code. But after just 10 minutes of use, it became clear: this isn’t just a convenient utility. It’s a powerful local AI development assistant that can analyze, automate, and accelerate almost every part of your software workflow. And best of all? It’s fully open-source under the Apache 2.0 license It gives you up to 1,000 free requests per day It integrates with your local filesystem, IDE, and the web And it runs entirely in your terminal , no browser needed In this guide, I’ll show you what Gemini CLI is, how it works...
Post a Comment
Read more

Difference Between Three.js and Babylon.js: What Actually Should You Choose?

You don’t have to be just a graphic designer to create interactive designs. You can be a coder and still create visually appealing and eye-catching games. All thanks to JavaScript. The first cross-browser JavaScript library–three.js–that can create 3D computer graphics was first released on 24 April 2010 by Ricardo Cabello. He first wrote the code in ActionScript language, which was then used by Adobe Flash. But then in 2009, he ported the code to JavaScript. Previously, people used WebGL. But the problem was its limitation: it can create only simple pointers and lines. Ricardo, instead of abandoning WebGL as something that is futile, used it to his own advantage. He built three.js on top of WebGL. This renders three.js to create 3D graphics in the browser. Even a 3D scene can be created easily using Canvas and WebGL now. But then in 2013, Babylon.js was created. But why? Why did its creators, Microsoft and David Catuhe, make something that another JavaScript library–three.js –was alre...
Post a Comment
Read more

React Native vs React JS — Key Difference, Advantages-Disadvantages, Limitations

  React Native vs React JS — Key Difference, Advantages-Disadvantages, Limitations React JS It is a JavaScript library that supports each face and server-side. It’s a popularly used library that focuses on developing user interfaces for mobile and internet-primarily based applications. React Native It is a cross-platform mobile framework that uses the ReactJS framework. It’s primarily used for developing native mobile applications like Windows, iOS and mechanical man. The major advantage provided by React Native is that it permits the developers to form mobile applications on varied platforms while not compromising the tip user’s expertise. Components of React JS Components of React Native Basic parts View — it is the essential building block of internet applications. Text — It helps to point out the text. The text element contains nesting, styling, and bit handling. Image — this is often a React element for showing multiple footages like network pictures and static resources. Text...
Post a Comment
Read more