How to show/hide div on click with stricly HTML/CSS

Question

I'm working on a sidebar for my personal website and I'm looking to show/hide a Facebook follow button when visitors click on a Facebook icon. I am wondering if it is possible with stricly HTML/CSS and if not, what would be the easiest way to do it with JavaScript. I've seen many jQuery solutions around but I have yet to find a purely HTML/CSS one.

<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>

Clicking on .sidebar-follow-icon should reveal .sidebar-follow-button and clicking again on .sidebar-follow-icon show hide .sidebar-follow-button.

Solution 1

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;
}

fiddle Here And more About this csstricks

Solution 2

We had a similar need for a CSS-only solution, and found that this works with these conditions: (1) the checkbox "button" and items to be toggled are all within the same overall container, such as body or div or p, and items to be toggled are not separated by being in a sub-container, and (2) the label and checkbox input must be defined ahead of the items to be toggled.

Solution 3

Using a check box it 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 a side note, do you really want your users to be doing something with two clicks when it can be done with one?

Solution 4

This is honestly not typically done in HTML / CSS. It's best suited for Javascript, JQuery, and the like.

But it got me thinking... is it possible.

And here's what I came up with that I think is the closest that you can get using pure CSS: http://jsfiddle.net/a92pkeqw/

My reasoning: the only element that can save it's 'state' is the checkbox. This is, therefore, the only element that can produce a toggling effect. Using the toggle and the ~ selector in CSS, it was possible to edit the styling 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;
}

View more solutions

Comments

[LaGuille]

The default follow button by Facebook isn't super pretty and cannot be modified. I'll probably add a Twitter and a YouTube subscribe button as well to the side bar and I'd rather hide them behind big buttons that I designed.

[LaGuille]

With regards with your code, could you modify it in order to always keep the sidebar-follow-icon visible?

[Callum Watkins]

I found that when the 'top' property of the checkbox was set to -9999px whenever I would press the label, it would make my screen scroll up to the top. To fix this just remove the top property but keep the left one.