How to show / hide div on click with strict HTML / CSS
I am working on a sidebar for my personal site and I am looking to show / hide the Facebook button after clicking on the Facebook icon. I'm wondering if this is possible with strict HTML / CSS, and if not, what would be the easiest way to do it with JavaScript. I have seen many jQuery solutions, but I have yet to find purely HTML / CSS.
<div class="sidebar-follow">
<div class="sidebar-follow-icon">
<img src="/follow_facebook.jpg" alt="Follow on Facebook" height="32" width="160">
</div>
<div class="sidebar-follow-button">
This is the follow button.
</div>
</div>
By clicking on the .sidebar-follow-icon you have to open .sidebar-follow-button and click on the .sidebar-follow-icon show hide.sidebar-follow-button again.
source to share
Html
<label for="toggle-1"> Button </label>
<input type="checkbox" id="toggle-1">
<div class="facebook"> Facebook Content</div>
CSS
/* Checkbox Hack */
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
-webkit-appearance: push-button;
-moz-appearance: button;
display: inline-block;
margin: 60px 0 10px 0;
cursor: pointer;
}
/* Default State */
.facebook {
background: green;
width: 400px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ .facebook {
display: none;
}
source to share
Using a checkbox is possible, but I prefer to use javascript for interactivity.
#fbCheck {
display:none;
}
#fbCheck:not(:checked) ~ .sidebar-follow-button
{
display:none;
}
#fbCheck:checked ~ .sidebar-follow-button
{
display:block;
}
<div class="sidebar-follow">
<input type="checkbox" id="fbCheck" />
<label for="fbCheck">
<div class="sidebar-follow-icon">
<img src="/follow_facebook.jpg" alt="Follow on Facebook" height="32" width="160">
</div>
</label>
<div class="sidebar-follow-button">This is the follow button.</div>
</div>
On the other hand, do you really want your users to do something with two clicks when it can be done with one?
source to share
I think you cannot do this without JavaScript .
An easy (but not the best) way is to add an attribute onclick
to the tag <div>
.
For this example use pure JS
Js
function toggleImage(){
var div = document.getElementsByClassName('sidebar-follow-icon')[0];
if (!div.style.display || div.style.display === 'block') div.style.display = 'none';
else div.style.display = 'block';
}
Html
<div class="sidebar-follow">
<div class="sidebar-follow-icon">
<h1>a</h1>
</div>
<div class="sidebar-follow-button" onclick="toggleImage();">
This is the follow button.
</div>
</div>
* It is not a good practice to attach javascript via html, you should instead attach a click event using the addEventListener function .
source to share
This, frankly, is not usually done in HTML
/ CSS
. It is best suited for Javascript
, JQuery
etc.
But it got me thinking ... is it possible.
And here's what I came up with, I think this is the closest you can use a clean one CSS
: http://jsfiddle.net/a92pkeqw/
My reasoning: the only element that can save its "state" is a checkbox. It is therefore the only element that can cause the switching effect. Using a radio button and selector ~
in CSS, it was possible to edit the style of another element, in this case change the visibility property.
HTML:
<input type="checkbox" class="toggle"></input>
<div class="toggled">
Text that be hidden dynamically!
</div>
CSS
input[type='checkbox']:checked ~ .toggled
{
visibility: hidden;
}
input[type='checkbox'] ~ .toggled
{
visibility: visible;
}
source to share
We had a similar need for a CSS-only solution and found it worked with these conditions: (1) the "button" checkbox and the elements to toggle are in the same shared container like body or div or p , and the items to be toggled are not separated while in the sub-container, and (2) a label and checkbox are inserted before the options to be toggled.
source to share