CODEWITHSUNDEEP
htmlcsshideshow
LaGuille
LaGuille

Reputation: 1728

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

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.

Upvotes: 4

Views: 28814

Answers (5)

Ray Bernard
Ray Bernard

Reputation: 31

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.

Upvotes: 1

Jon P
Jon P

Reputation: 19772

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?

Upvotes: 1

Ghostff
Ghostff

Reputation: 1458

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

Upvotes: 2

James Taylor
James Taylor

Reputation: 6258

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

Upvotes: 1

ianaya89
ianaya89

Reputation: 4233

I think you can't do it without JavaScript.

The easy way (but not the best) is add the onclick attribute to the <div> tag.

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>

*Is not a good practice attach javascript through the html, instead that you should attach the click event using the addEventListener function.

Upvotes: -2

Related Questions