Divs erweiterbar nach oben auf Klick

Question

Ich habe diese beiden erweiterbaren divs: https://jsfiddle.net/ar0j4508/31/

<div class="container_one"> 
    <div class='header'></div> 
    <div class='container_two'> 
     <div class='title show'>From 4 to 0</div> 
     <div class="text hide"><br>4<br>3<br>2<br>1<br>0<br></div> 
    </div> 
</div> 

ich wissen muss:
1) - Wie automatisch die enthaltenen alle Text auf Klick zeigen;
2) - Wie man ein div erweitert, ohne das andere zu erweitern. Vielen Dank.

Answer 1

Für die erste Wie alle enthaltenen Text auf Klick automatisch angezeigt - Sie es durch eine Erhöhung der Höhe von container_two div durch die Höhe des text div

Für die zweite man tun kann, wie ein div zu erweitern, ohne die Erweiterung andere - Sie können es von Ihrem Skript Teil für die jeweiligen divs, in dem die click Veranstaltung mit `$ (this) Schlüsselwort wie diese

$(document).ready(function() { 
 
    $(".show").click(function() { 
 
    var $par = $(this).parent(".container_two"); 
 
    if ($par.attr('vis') == 'show') return; 
 
    $par.parent(".container_one").find(".header").animate({ 
 
     height: '-=' + $par.find(".text").height() 
 
    }) 
 
    $par.animate({ 
 
     height: '+=' + $par.find(".text").height() 
 
    }); 
 

 
    $par.attr('vis', 'show'); 
 
    }) 
 

 
    $(".hide").click(function() { 
 
    var $par = $(this).parent(".container_two"); 
 
    if ($par.attr('vis') == 'hide') return; 
 
    $par.animate({ 
 
     height: '-=' + $par.find(".text").height() 
 
    }); 
 
    $par.parent(".container_one").find(".header").animate({ 
 
     height: '+=' + $par.find(".text").height() 
 
    }) 
 
    $par.attr('vis', 'hide'); 
 
    }) 
 
})

.header { 
 
    width: 250px; 
 
    height: 400px; 
 
    max-height: 400px; 
 
} 
 

 
.container_one { 
 
    width: 200px; 
 
    border: 2px solid black; 
 
    margin: 0 auto; 
 
    float: left; 
 
} 
 

 
.container_two { 
 
    height: 30px; 
 
    overflow: hidden; 
 
} 
 

 
.title { 
 
    background: #0f0; 
 
    text-align: center; 
 
    font-size: 30px; 
 
} 
 

 
.text { 
 
    background: #0f0; 
 
    text-align: center; 
 
    font-size: 35px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="container_one"> 
 
    <div class='header'></div> 
 
    <div class='container_two'> 
 
    <div class='title show'>From 4 to 0</div> 
 
    <div class="text hide"><br>4<br><br>4<br>3<br>2<br>1<br>0<br></div> 
 
    </div> 
 
</div> 
 

 
<div class="container_one"> 
 
    <div class='header'></div> 
 
    <div class='container_two'> 
 
    <div class='title show'>From 8 to 0</div> 
 
    <div class="text hide"><br>8<br>7<br>6<br>5<br><br>4<br>3<br>2<br>1<br>0<br></div> 
 
    </div> 
 
</div>

ausgelöst ausführen

Warum habe ich max-height:400px; Header-Klasse hinzugefügt - Dies liegt daran, wenn Sie den Inhalt ausblenden, dann erhöhen Sie die Höhe von div von Höhe des Textes und wenn die Höhe des Textes mehr als 400px ist dann auf die Höhe des Headers Verbergen erhöht was dazu führen wird, dass zwei divs nicht aneinandergereiht werden (es wird passieren, wenn du das zweite div zeigst und dann dieses div.Try ohne max-height)