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 do I horizontally extend the clickable area of an inline span?

    How to show foreground image and then hide on hover?

    How to set jQuery draggable min/max-left and min/max-right

    VERY BASIC: How to inline social media logos on a header

    How to make images stay on one long line?

    How to apply inline and/or external CSS loaded dynamically with jQuery

    How to catch this nth-child() with css

    How to style CSS role

    jQuery hide() method do show element with display:none !important

    How to stylize second level dropdown menu list

    How can I make it so the first element in a DIV has a different CSS to others?

    How to properly align something that resizes in a specific location

    How to hightlight non editable backgrid cells?

    How can I dynamically change element's width related with parent width using only CSS? [closed]

    how to scale an image disproportionally via css?

    CSS : how to center a input inside a div

    How to remove space after a colon in CSS with Sublime Text 3?

    How to put inline circles made in CSS under each other when screen scales?

    Not floating on same line, how to fix css

    CSS: how to set the width of form control so they all have the same width?

    asp.net+css+jQuery - how does it all work together?

    How to be able to preload jquery contents into hidden tabs for ie browser

    How can I set different background images for different li with same class

    How to change ListView cell's text color in JavaFX using css

    How can I create div with an opposite-curved bottom

    how to select all list items except for the first and last using CSS only?

    How to underline the hyper-link spreaded on two lines. CSS-HTML geeks?

    how to give margin between li using css?

    How to add padding between options in select input?

    How do I keep an element scaled in CSS3 in-till mouseleave? Then on mouseleave scale the element back to it's original size