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


Tags: html,css,hide,show

Problem :

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 :

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


    CSS Howto..

    How to modify multiple elements of a block with BEM CSS

    How to override a part of the style in the site.master page?

    how to draw the # of likes bubble like what is on the right side of the facebook like button

    How to split multiple string using jQuery or javascript?

    How can I achieve the mouseover effect like on wikipedia?

    How to break text in a line in a div by css?

    How come half the triangle is missing

    How to access the physical Bundled and Minified js / css created by BundleConfig class

    How to display visual rows and cols in textarea using css

    How to make pure CSS dropdown menu appear with a fade in/slowly

    CSS: how to center a list with image

    how to center two div in xs

    How to expire cached pages when only the CSS url changes

    How to Write CSS Code for Mozilla Firefox Browser

    How to remove a class as each image is loaded

    How to make an equal distance between elements footer?

    How to style multiples of 3 li elements [duplicate]

    How to dynamically create CSS class in JavaScript and apply?

    how to add/remove a class from a link

    How do I change the text inside a button?

    how to disable the highlighting view on selection either in html or css?

    How do I remove the last border on my nav bar?

    how to center a div between another two (left and right) divs?

    how do I customize header color in jquery mobile?

    How can you grab elements in dom and apply different css without id?

    HTML/CSS - How do I fix width:100% cutting off when the content creates a horizontal scroll bar?

    How to make link change the css in the following page [closed]

    How do I alter this HTML/CSS to make the container expand horizontally to the floated children?

    HTML5 / CSS| How do I disable responsivity when a scroll bar appears?

    How to get block to change width if text is longer then the width in a multilevel listless drop down navigation menu