Do you want to know how to use CSS to show/hide Div when clicking?
If you’re new to web development and only familiar with HTML and CSS but still want to create a functionality to show and hide a <div> on click, here are four simple methods to achieve this.
AD
Thanks to certain CSS properties, you can now easily show and hide a <div> on click without needing JavaScript.
These methods are great for beginner web developers.
Why Use Only CSS to Show/Hide a <div> Click?
1. No JavaScript Required
If you’re a beginner or want a simple solution, CSS can achieve the effect without writing any JavaScript.
2. Better Performance
If you want better performance, using only CSS can be beneficial since it runs natively in the browser, making it faster and more efficient than JavaScript event listeners.
3. Simpler Code
AD
You can achieve the functionality with just a few lines of CSS, making the code cleaner and easier to maintain.
4. Works Without JavaScript
If JavaScript is disabled in the user’s browser for any reason, CSS-based solutions will still work.
5. Ideal for Basic UI Interactions
If the show/hide functionality is simple (e.g., toggling menus, tooltips, or FAQs), CSS is sufficient.
6. No External Dependencies
You don’t need to load any additional JavaScript libraries, which helps reduce page load time.
Method 1: CSS Show/Hide Toggle Using Checkbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show/Hide Div</title>
<style>
.toggle {
display: none;
}
.toggle + label {
cursor: pointer;
padding: 10px 15px;
background: #0073e6;
color: white;
display: inline-block;
border-radius: 5px;
}
.content {
display: none;
margin-top: 10px;
padding: 10px;
background: #f4f4f4;
border-radius: 5px;
}
.toggle:checked + label + .content {
display: block;
}
</style>
</head>
<body>
<input type="checkbox" id="toggle" class="toggle">
<label for="toggle">Show/Hide Content</label>
<div class="content">
This is the hidden content that appears when you click the button.
</div>
</body>
</html>One of the most common ways to show and hide a div is by using a checkbox—don’t worry, the checkbox will remain hidden with this method.
To make this work, first, add an HTML <input> element with the type attribute set to "checkbox".
AD
Now, assign an id to your input box.
Next, create an HTML <label> element and set its for attribute to match the id of the input box.
Now, create a <div> that you want to show and hide when the button is clicked.
To achieve this, I’ll use the CSS adjacent sibling combinator (+) along with the :checked pseudo-class.
Here’s how the final result will look:
Also See: Javascript Show/Hide Div onClick
Method 2: Using details and summary
<details>
<summary>Show/Hide Content</summary>
<div class="content">
This is the hidden content that appears when you click.
</div>
</details>If you’re looking for a simple solution with minimal CSS, the HTML <summary> element is a great option. It works within the <details> element, allowing users to toggle content visibility without additional JavaScript or complex styling.
Using this method, you can achieve the show/hide div functionality without needing CSS or JavaScript. The <details> and <summary> elements provide built-in toggle behavior, making it a simple and efficient solution.
The default appearance of the <summary> element isn’t very stylish, but you can enhance it using CSS to match your website’s overall theme and design.
Method 3: Using :hover (Only works on hover, not click)
<style>
.content {
display: none;
}
.toggle:hover + .content {
display: block;
}
</style>
<div class="toggle">Hover to Show</div>
<div class="content">This content appears on hover!</div>If you want to toggle a div’s visibility on hover instead of click, you can use this method.
With this method, you can show and hide a div when the user hovers over a button or any other element.
The best part about this method is that it doesn’t require an HTML input element or a summary element.
I’m using a combination of the :hover pseudo-class and the adjacent sibling combinator (+).
Method 4: Using target pseudo-class (Uses anchor links)
<style>
.content {
display: none;
}
#show:target {
display: block;
}
</style>
<a href="#show">Show Content</a>
<div id="show" class="content">This content appears when clicked!</div>If you want the div to be shown only once when clicking a button or link, follow this fourth method.
In this method, most of the functionality is handled by CSS, eliminating the need for JavaScript.
To make this work, first add an HTML anchor (<a>) tag and set the href attribute to a name starting with #.
Now, create a <div> that you want to display when the user clicks on the link.
In the CSS, apply the display: none; property to the <div> element, and use #show:target along with the :target pseudo-class to set display: block;.
Here’s the final outcome:
Conclusion
There are several ways to use CSS to show/hide a div on click. In this blog post, I’ve shared a simple method that’s perfect for beginners.
Let me know in the comments if you know of an even simpler method—I’d be happy to include it in this blog post!
If you enjoyed this post, you might also be interested in JavaScript: Push Object to Array (5 Simple Methods), How to Disable Inspect Element on a Website? (4 Simple Methods), or How to Disable HTML Code Without Deleting It? (6 Methods).
For amazing coding-related videos, subscribe to our SingleSyntax YouTube channel.