Comment faire pour afficher/cacher la div sur cliquez avec strictement HTML/CSS

Je suis en train de travailler sur une barre latérale pour mon site perso et je suis à la recherche pour afficher/masquer un Facebook suivez bouton lorsque les visiteurs cliquent sur un Facebook icône. Je me demande si c'est possible avec strictement HTML/CSS et si non, quelle serait la façon la plus simple de le faire avec JavaScript. J'ai vu beaucoup de jQuery solutions autour, mais je n'ai pas encore trouvé purement 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>

Cliquant sur .sidebar-suivez-icône devrait révéler .sidebar-suivez-bouton et en cliquant de nouveau sur .sidebar-suivez-icône afficher, de masquer .sidebar-suivez-bouton.

HTML et CSS n'ont pas un gestionnaire de clic. Il pourrait être possible avec certains hacky utilisation de cases à cocher et les étiquettes, mais tou serait préférable d'utiliser javacript. En général HTML = Description du Document, CSS = Mise en page du Document/Look & feel, Javascript = répondre pour le client d'action.
Découvrez ce site où il a été fait: bonrouge.com/br.php?page=cssonclickswitch

OriginalL'auteur LaGuille | 2014-11-13

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

    violon Ici Et plus Sur ce csstricks

    J'ai constaté que lorsque le sommet de la propriété de la case à cocher a été fixé à -9999px chaque fois que j'appuie sur l'étiquette, il faudrait à mon écran, faites défiler la page vers le haut. Pour corriger cela il suffit de retirer le haut de la propriété, mais de garder la gauche.

    OriginalL'auteur Ghostff

  2. 0

    Je pense que vous ne pouvez pas le faire sans JavaScript.

    Le moyen le plus facile (mais pas le meilleur), c'est d'ajouter le onclick attribut à la <div> tag.

    Cet exemple l'utilisation pur 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>

    *N'est pas une bonne pratique joindre par le biais de javascript le html, au lieu que vous devriez joindre à l'événement click à l'aide de la addEventListener fonction.

    OriginalL'auteur ianaya89

  3. 0

    Honnêtement c'est pas habituellement le cas dans HTML /CSS. Il est le mieux adapté pour Javascript, JQuery, et la comme.

    Mais ça m'a fait penser... est-il possible.

    Et voici ce que j'ai trouvé qui je pense est le plus proche que vous pouvez obtenir de l'aide pur CSS: http://jsfiddle.net/a92pkeqw/

    Mon raisonnement: le seul élément qui peut sauver, c'est "l'état" est la case à cocher. C'est, par conséquent, le seul élément qui peut produire un basculement de l'effet. À l'aide de la bascule et de la ~ sélecteur CSS, il était possible de modifier le style d'un autre élément, dans ce cas, changez la propriété de visibilité.

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

    OriginalL'auteur James Taylor

  4. 0

    Nous avons eu un besoin similaire pour une CSS, la seule solution, et a constaté que cela fonctionne avec ces conditions: (1) la case à cocher "bouton", et des articles d'être basculé sont tous dans le même conteneur global, comme le corps ou div ou p, et les éléments à basculé ne sont pas séparés par un sous-conteneur, et (2) l'étiquette et la case d'entrée doit être défini à l'avance des articles afin d'être basculé.

    OriginalL'auteur Ray Bernard