“Réductible” <div>

Je vais avoir des difficultés avec une que j'essaie de la garder cachée, jusqu'à ce que l'utilisateur clique sur un élément.

Le code HTML ressemble à:

<h3 class="filter-type">BRAND</h3>
<div class="sidebarlistscroll">
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</div>

Et voici le CSS:

.filter-type {
    border-bottom: 1px dotted #666;
}

.sidebarlistscroll {
    width: 220px;
    height: 200px;
    margin-bottom: 15px;
    overflow-y: scroll;
    border: none;
    visibility: hidden;
}

.filter-type:active .sidebarlistscroll {
    visibility: visible;
}

J'ai aussi essayé d'utiliser :focus et :hover sous-classes, mais encore il ne fonctionne pas, le div reste caché n'importe quoi.

Je suis en train de réaliser cela sans l'aide de javascript, si possible.

Ce que je fais mal?

Merci, j'espère que quelqu'un peut aider.

OriginalL'auteur Faryus | 2013-01-25

  1. 8

    Votre sidebarlistscroll DIV venir après le H3 pas à l'intérieur de H3. Écrire comme ceci:

    .filter-type:active + .sidebarlistscroll {
    visibility: visible;
}

    Si vous voulez la div pour rester visible après quand vous avez arrêté en cliquant sur elle. Ensuite, vous devez faire quelques changements dans votre code. Écrire comme ceci :

    <label class="filter-type" for="filter">BRAND</label>
<input type="checkbox" id="filter">
<div class="sidebarlistscroll">
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</div>

    CSS

    .filter-type {
    border-bottom: 1px dotted #666;
}

.sidebarlistscroll {
    width: 220px;
    height: 200px;
    margin-bottom: 15px;
    overflow-y: scroll;
    border: none;
    visibility: hidden;
}
#filter{display:none}
#filter:checked + .sidebarlistscroll{
    visibility: visible;
}

    Cochez cette http://jsfiddle.net/BU4Qt/

    Merci, ça a marché... Mais je vois maintenant que mon code ne fait pas ce que j'en ai besoin. J'ai besoin de la div qui doit rester visible après que j'ai cessé cliquant sur elle. Tous les conseils sur comment je pourrais parvenir?
    Je vous remercie. Qu'il a fait.
    +1 pour le violon

    OriginalL'auteur sandeep

  2. 1

    Est-ce que vous souhaitez...?

    Style: 

    .filter-type {
  border-bottom: 1px dotted #666;
 }

    HTML :

     <h3 class="filter-type">BRAND</h3>
 <p onclick="this.innerHTML='<div><ul><li>item 1</li><li>item 2</li><li>item 3</li></ul></div>'">Click Here</p>

    OriginalL'auteur Krishna Raj Salim