Wie kann ich ein div schalten, um Inhalte mit CSS zu enthüllen

Question

So habe ich ein div, das erweitert werden sollte, um eine Liste beim Umschalten angezeigt werden. Die Vorher-Nachher-Zustände können hier gesehen werden http://reversl.net/box/ aber was muss ich meinem Styling hinzufügen, um dies zu ermöglichen? Ich würde gerne CSS-Übergänge für zusätzlichen Effekt verwenden. Ich mache mir keine Sorgen über die Browser-Kompatibilität, weil es nur für Lernzwecke gedacht ist. Irgendwelche Tipps?

<div class="box"><img src="http://www.placehold.it/250x300" alt="" /> 
     <div class="section progress"> 
      <h4> 
       <a href="#">Div Before</a> 
      </h4> 
      <div class="metrics"> 
       <div class="meter"> 
        <span style="width: 75%"></span> 
       </div><!--.meter--> 
      </div><!--.metrics--> 
     </div><!--.section-progress--> 
</div><!--.box--> 

<div class="box"><img src="http://www.placehold.it/250x300" alt="" /> 
     <div class="section progress"> 
      <h4> 
       <a href="#">Div After</a> 
      </h4> 
      <div class="metrics"> 
       <div class="meter"> 
        <span style="width: 75%"></span> 
       </div><!--.meter--> 
      </div><!--.metrics--> 
     </div><!--.section-progress--> 
     <div class="sub_section"> 
      <ul class="list"> 
       <li>Item 1</li> 
       <li class="last">Item 2</li> 
      </ul> 
     </div><!--.sub_section--> 
</div><!--.box--> 

.boxes { 
width: 100%; 
padding: 1%; 
} 

.box { 
width: 20%; 
padding: 1%; 
background: #fff; 
-moz-box-shadow: 2px 3px 4px 0px #e9e9e9; 
-webkit-box-shadow: 2px 3px 4px 0px #e9e9e9; 
box-shadow: 2px 3px 3px 0px #e9e9e9; 
display: inline-block; 
margin-top: 1em; 
} 

.box img { 
margin-bottom: 1%; 
} 

.progress a { 
margin: 0; 
padding: 0; 
color: #999; 
text-decoration: none; 
} 

.metrics { 
margin: -1em 0 0 0; 
padding: 0; 
background: #c0c0c0; 

} 
.accordion .progress .meter { 
background: #555; 
width: 100%; 
position: relative; 
} 

.meter > span { 
height: 10px; 
display: block; 
background-color: #777; 
position: relative; 
overflow: hidden; 
} 

.sub_section { 
margin-top: 1em; 
border-bottom: none; 
} 

.list { 
padding: 0; 
margin: 0; 
} 

.list li { 
background: #dcdcdc url('http://placehold.it/40x40') no-repeat; 
font-size: 11px; 
color: #999; 
list-style: none; 
padding: 1.3em 1em 1.3em 4.5em; 
margin-bottom: 5px; 
} 

.list .last { 
border-bottom: none; 
} 

Answer 1

Ich fürchte, ich konnte in Ihrem Beispielcode und Bild nicht herausfinden, worauf Sie klicken wollten und was Sie zeigen wollten. Allerdings sind die folgenden Arbeiten mit einem onclick -ähnlichen Ereignis mit reinem CSS:

<div id="wrapper"> 
    <ul id="top"> 
     <li><a href="#one">One</a></li> 
     <li><a href="#two">Two</a></li> 
    </ul> 
    <div class="box" id="one"> 
     <p>One</p> 
     <span><a href="#top">Close</a></span> 
    </div> 
    <div class="box" id="two"> 
     <p>Two</p> 
     <span><a href="#top">Close</a></span> 
    </div> 
</div> 

CSS:

.box { 
    position: absolute; 
    top: 20%; 
    left: 50%; 
    width: 50%; 
    margin-left: -25%; 
    border: 4px solid #000; 
    background-color: #f90; 
    /* the CSS, above, is all for aesthetic purposes, what matters is the following */ 
    opacity: 0; 
    -webkit-transition: all 1s linear; 
    -ms-transition: all 1s linear; 
    -moz-transition: all 1s linear; 
    -0-transition: all 1s linear; 
    transition: all 1s linear; 
} 

.box:target { 
    opacity: 1; 
    -webkit-transition: all 1s linear; 
    -ms-transition: all 1s linear; 
    -moz-transition: all 1s linear; 
    -0-transition: all 1s linear; 
    transition: all 1s linear; 
} 

JS Fiddle demo.

Leider scheint es (in Chromium 17/Ubuntu 11.04) unmöglich display: none;-display: block; Ebenso einen Übergang height: 0-height: auto zu animieren reißt auch (entweder führt zu einem plötzlichen Auftauchen versucht eher als ein Übergang. So des Inhalts in der Demo ist immer "da", aber einfach versteckt (mit Deckkraft) und wird dann angezeigt, sobald der entsprechende Link angeklickt ist.

jedoch für eine Dia-Toggle-ähnlichen Effekt:

.box { 
    /* aesthetic stuff excised for brevity */ 
    opacity: 0; 
    height: 0; 
    overflow: hidden; 
    -webkit-transition: all 1s linear; 
    -ms-transition: all 1s linear; 
    -moz-transition: all 1s linear; 
    -0-transition: all 1s linear; 
    transition: all 1s linear; 
} 

.box:target { 
    opacity: 1; 
    height: 3em; 
    -webkit-transition: all 1s linear; 
    -ms-transition: all 1s linear; 
    -moz-transition: all 1s linear; 
    -0-transition: all 1s linear; 
    transition: all 1s linear; 
} 

JS Fiddle demo.

Answer 2

Sie können die "Checkbox Hack" verwenden: http://css-tricks.com/the-checkbox-hack/

Answer 3

Dies kann nicht mit reinem CSS erreicht werden, mit Hilfe von JavaScript oder jQuery versuchen

Diese example bekommt man in der Nähe, aber es ist nicht aktiv bleiben einmal geklickt.

Answer 4

Durch diese Änderungen an Ihrem Code erhalten Sie einen CSS-Übergang.

In Ihrem <div class="box">, fügen Sie einen Container <div class="trans"> um den Inhalt, etwa so:

<div class="box"> 
    <div class="trans"> 
    <img src="http://www.placehold.it/250x300" alt="" /> 
     <div class="section progress"> 
      <h4> 
       <a href="#">Div After</a> 
      </h4> 
      <div class="metrics"> 
       <div class="meter"> 
        <span style="width: 75%"></span> 
       </div><!--.meter--> 
      </div><!--.metrics--> 
     </div><!--.section-progress--> 
     <div class="sub_section"> 
      <ul class="list"> 
       <li>Item 1</li> 
       <li class="last">Item 2</li> 
      </ul> 
     </div><!--.sub_section--> 
    </div><!--.trans--> 
</div><!--.box--> 

Dann in Ihrem CSS hinzu:

.box > .trans { 
    height:365px; 
    overflow:hidden; 
    } 

.box > .trans:hover{ 
    height: 500px; 
    -webkit-transition: height .25s linear; 
    transition: height .25s linear; 
    } 

Dies gibt Ihnen einen MouseEnter-/mouseleave Typ bewirken. Ich glaube nicht, dass Sie einen "onclick" -Effekt erzielen könnten, der es nur mit CSS offen hält.

Answer 5

Sie müssen JavaScript verwenden, um auf das Ereignis zu warten, das den Übergang auslöst, es sei denn, Sie möchten, dass es auf Hover angewendet wird. so können Sie mit so etwas wie folgen beginnen:

$('.box').click(function(){ 
    $(this).toggleClass('show'); 
}); 

dann in der CSS, müssen Sie die Klasse mit der neuen Größe haben und den Übergang angewandt:

.show 
{ 
height: 300px; 
-webkit-transition: height .25s ease-in-out; 
transition: height .25s linear; 
} 

Wenn Sie ein rein CSS wollen Lösung, dann müssen Sie damit umgehen, indem Sie die Pseudo-Klasse ': hover' verwenden, wie redlena sagte. Der einzige Unterschied, den ich machen würde, ist, dass Sie kein zusätzliches div (.trans) benötigen und Sie müssen auch nicht den untergeordneten Selektor in Ihrem CSS angeben (.box> .trans).