Texte coulissant avec div

Question

J'ai donc un menu déroulant. Vous cliquez sur le texte "Click Me" et il s'affichera. Voici une démo http://jsfiddle.net/QzLst/

Maintenant, voici le problème. Le texte bleu sur la droite, montre même lorsque je l'ai placé dans le div qui glisse de haut en bas. Je ne suis pas vraiment sûr de savoir où aller à partir d'ici. Voici mon balisage

<div class="search"> 
    <div class="text"> 
    Some text 
</div> 
</div> 
<div class="click">Click me</div> 

Et le CSS

.search{ 
    width: 100%; 
    background: #000; 
    box-shadow: 0 1px 1px rgba(0,0,0,.1); 
    z-index: 200; 
    height:0; 
    transition: 0.5s; 
} 
.toggle{ 
    height:100px; 
} 
.text{ 
    color: #009dff; 
    float: right; 
} 

La démo vous aidera à comprendre ce que je veux dire. Tout ce que je veux, c'est le texte à glisser avec le div nommé search. Donc, quand search se ferme, fondamentalement je suppose que text se fermerait également

Answer 1

Ajouter overflow: hidden à .search.

Answer 2

Cela permet de résoudre ce problème:

[mise à jour à votre violon] [http://jsfiddle.net/QzLst/1/]1

Nous pouvons simplement cacher la classe .text avec ce CSS:

.text { 
    display: none; 
} 

Ensuite, nous basculer la classe .text :

$(".click").click(function(){ 
    $(".search").toggleClass("toggle"); 
    $(".text").toggle() 
});