Schalten Sie den Inhalt eines div und ändern Sie die Höhe eines anderen div in Jquery

Question

Ich versuche, die Höhe wechseln und zwei verschiedene divs auf dem gleichen onclick Ereignis mit jquery anzuzeigen. Ich habe das Gefühl, dass mir etwas Kleines fehlt oder eine Regel in der JQuery, die ich nicht kenne. Beim ersten Klick wird alles wie geplant angezeigt und geändert, aber die Sekunde minimiert den Inhalt nicht.

JS

jQuery(document).ready(function(){ 
    jQuery('.readmore').on('click', function(event) {   
     if (jQuery("#content").height() == 500) { 
      jQuery("#content").animate(
       {height: "750px"}); 
      jQuery('#hidden').toggle('show'); 
     } 
     else { 
      $("#content").animate({height: "500px"}); 
      jQuery('#hidden').toggle('hide'); 
     } 
    }); 
}); 

Die div beginnt als 500px hoch ab und will, dass sie zwischen diesem und 750px wechseln, während zwischen der Anzeige des Inhalts in #hidden wechseln.

hier ist mein HTML

<div id="content"> 
<p></p> 
<div id="hidden" style="font-size:18px"> 
<p></p> 
</div> 
</div> 
<div class="content3"> 
<p><a class="readmore" href="javascript://">Read More </a></div> 

Answer 1

Sie können nur die in show() und hide() Funktionen mit jQuery gebaut verwenden.

Wie haben Sie es, diese:

jQuery('#hidden').toggle('show'); 

und diese

jQuery('#hidden').toggle('hide'); 

Makeln die Klassen.show und .hide. Wenn sich Ihre Klassen vom Standarddesign unterscheiden, können sie daher die erwartete Funktionalität ändern. Sie benötigen die Klasse .hide, um die Objekte zunächst zu verbergen, aber danach müssen Sie diese Klasse nicht mehr umschalten.

Die jQuery auch davon ausgehen, dass die ursprüngliche div ist immer 500px groß. Also, wenn die #content div weniger als 500px groß ist, dauert es 2 Klicks, um es wieder zu minimieren. Sie können die Funktion anpassen, um Fälle zu berücksichtigen, in denen das div weniger als 500 px groß ist und alles wie erwartet funktionieren sollte.

jQuery(document).ready(function(){ 
 
    jQuery('.readmore').on('click', function(event) {   
 
     if (jQuery("#content").height() <= 500) { 
 
      jQuery("#content").animate(
 
       {height: "750px"}); 
 
      jQuery('#hidden').show(); 
 
     } 
 
     else { 
 
      $("#content").animate({height: "500px"}); 
 
      jQuery('#hidden').hide(); 
 
     } 
 
    }); 
 
});

.hide { display: none; } 
 
div { padding: 20px; } 
 
#content { background: #aaa;} 
 
#hidden { background: #eee;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content"> 
 
<p>displayed text</p> 
 
<div id="hidden" class="hide" style="font-size:18px"> 
 
<p>hidden text</p> 
 
</div> 
 
</div> 
 
<div class="content3"> 
 
<p><a class="readmore" href="javascript://">Read More </a></div>

Dies wird die Höhe auf 750px unabhängig von der Ausgangshöhe erweitern ... dann 500px auf dem zweiten Klick zu minimieren.

Answer 2

Es wird sehr nützlich sein, wenn Sie benutzerdefinierte CSS Klassen verwenden Stil DOM Elemente und Animieren Elemente mit css Übergänge anstatt zu viel Code von Schreiben jQuery zu ändern.Hier

ist die Schnipsel

jQuery(document).ready(function(){ 
 
    jQuery('.readmore').on('click', function(event) {   
 
     jQuery("#content").toggleClass("expand"); 
 
    }); 
 
});

#content{ 
 
    height:100px; 
 
    background-color:#f0f0f0; 
 
    border:1px solid #E5EAF2; 
 
    -webkit-transition:height 0.6s linear; 
 
    transition:height 0.6s linear; 
 
} 
 

 
.expand{ 
 
    height: 750px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content"> 
 
<p></p> 
 
<div id="hidden" style="font-size:18px"> 
 
<p> 
 
</p> 
 
</div> 
 
</div> 
 
<div class="content3"> 
 
<p><a class="readmore" href="javascript://">Read More </a></div>

In dem obigen Schnipsel ich eine CSS-Klasse erstellt haben expand und nur diese Klasse mit jquery Makeln, damit die Höhe als Gut. Und für Übergänge habe ich css transitions bis #content verwendet.

Ich hoffe, es hilft.