anzeigen/ausblenden Absatz basierend auf div Höhe

Question

I-Code habe folgende und ich versuche, die zweite Ziffer standardmäßig zu verstecken und es zeigt, wenn blauer Kreis angeklickt wird und div erweitert wird, dass Absatz sollte hier

Anzeige ist der Code

$(document).ready(function() { 
 
    // Store inner height in a data property: 
 
    $(".added-msg-inner").removeClass("added-msg-inner").each(function() { 
 
    $(this).data({ 
 
     innerHeight: $(this).height() 
 
    }); 
 
    }).addClass('added-msg-inner'); 
 
    $(".added-msg-inner > p:nth-child(2)").hide(); 
 
    $(".downarrow").click(function() { 
 
    // Get specific divView and innerHeight related to this down arrow 
 
    var $divView = $(this).siblings(".added-msg-inner"); 
 
    var innerHeight = $divView.data("innerHeight"); 
 

 
    $divView.animate({ 
 
     height: $divView.height() == 95 ? innerHeight : "95px" 
 
    }, 500); 
 
    $('i', this).attr("class", 
 
     $divView.height() == 95 ? "fa fa-angle-up" : 
 
     "fa fa-angle-down"); 
 
    return false; 
 

 
    var $minHeight = 95; 
 
    if ($(this).height() > $minHeight) { 
 
     $(".added-msg-inner > p:nth-child(2)").show(); 
 
    } 
 
    }); 
 
});

.added-msg2 { 
 
    padding: 3% 1%; 
 
    float: left; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    font-size: 14px; 
 
    color: #333333; 
 
    position: relative; 
 
    background-color: #e0e0e0; 
 
} 
 

 
.added-msg-inner { 
 
    float: left; 
 
    width: 100%; 
 
    height: 95px; 
 
    overflow: hidden; 
 
} 
 

 
.downarrow { 
 
    position: absolute; 
 
    right: 15px; 
 
    bottom: -12px; 
 
    z-index: 1; 
 
    width: 30px; 
 
    height: 30px; 
 
    line-height: 30px; 
 
    font-size: 18px; 
 
    color: #fff; 
 
    background-color: #003478; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="added-msg2"> 
 
    <div class="added-msg-inner"> 
 
    <p>Message added by agent user on<br> Sat, Jun 24th, 2017 (5:03AM)</p> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
     has survived not only five centuries</p> 
 
    <p><i class="fa fa-paperclip" aria-hidden="true"></i> ABCFileName.pdf</p> 
 
    </div> 
 
    <div class="downarrow"><i class="fa fa-angle-down" aria-hidden="true"></i></div> 
 
</div>

Answer 1

Ich habe Ihren Code geändert, so dass der zweite Absatz (Meldung) auf Last versteckt ist, und auf blauem Kreis klicken, wird der Absatz Dias offen.

Ich war mir nicht sicher über den Zweck von einigen der Styling auf dem Absatz, so dass ich es entfernt habe. Die Höhe des Eltern-Divs wird automatisch erweitert, so dass der Überlauf usw. nicht benötigt wird.

Viele der JS sah aus wie es unnötig sein könnte, das Snippet, das ich unten hinzugefügt habe, ist genug, um den Absatz wie beschrieben zu erweitern. Außerdem habe ich dem HTML einige weitere semantische Klassen hinzugefügt (Absätze).

Hier ist der Code:

$(document).ready(function() { 
 
    $('.downarrow').on("click", function() { 
 
    $('.added-msg-content').slideToggle(); 
 
    }); 
 
});

.added-msg2 { 
 
    padding: 3% 1%; 
 
    float: left; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    font-size: 14px; 
 
    color: #333333; 
 
    position: relative; 
 
    background-color: #e0e0e0; 
 
} 
 

 
.added-msg-inner { 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
.downarrow { 
 
    position: absolute; 
 
    right: 15px; 
 
    bottom: -12px; 
 
    z-index: 1; 
 
    width: 30px; 
 
    height: 30px; 
 
    line-height: 30px; 
 
    font-size: 18px; 
 
    color: #fff; 
 
    background-color: #003478; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
} 
 

 
.added-msg-content { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="added-msg2"> 
 
    <div class="added-msg-inner"> 
 
    <p class="added-msg-author">Message added by agent user on<br> Sat, Jun 24th, 2017 (5:03AM)</p> 
 
    <p class="added-msg-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
     has survived not only five centuries</p> 
 
    <p><i class="fa fa-paperclip" aria-hidden="true"></i> ABCFileName.pdf</p> 
 
    </div> 
 
    <div class="downarrow"><i class="fa fa-angle-down" aria-hidden="true"></i></div> 
 
</div>

Answer 2

entfernen Sie einfach die return Anweisung und verwenden Sie die Callback-Funktion von jQuerys animate() Methode, um die Ziffer zu zeigen, nachdem Animation finishe ist d:

$(document).ready(function() { 
 
    // Store inner height in a data property: 
 
    $(".added-msg-inner").removeClass("added-msg-inner").each(function() { 
 
    $(this).data({ 
 
     innerHeight: $(this).height() 
 
    }); 
 
    }).addClass('added-msg-inner'); 
 
    $(".added-msg-inner > p:nth-child(2)").hide(); 
 
    $(".downarrow").click(function() { 
 
    // Get specific divView and innerHeight related to this down arrow 
 
    var $divView = $(this).siblings(".added-msg-inner"); 
 
    var innerHeight = $divView.data("innerHeight"); 
 

 
    $divView.animate({ 
 
     height: $divView.height() == 95 ? innerHeight : "95px" 
 
    }, 500, function() { 
 
     // Animation complete: 
 
     if ($divView.height() > 95) { 
 
     $(".added-msg-inner > p:nth-child(2)").show(); 
 
     } else { 
 
     $(".added-msg-inner > p:nth-child(2)").hide(); 
 
     } 
 
    }); 
 
    $('i', this).attr("class", $divView.height() == 95 ? "fa fa-angle-up" : "fa fa-angle-down"); 
 
    }); 
 
});

.added-msg2 { 
 
    padding: 3% 1%; 
 
    float: left; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    font-size: 14px; 
 
    color: #333333; 
 
    position: relative; 
 
    background-color: #e0e0e0; 
 
} 
 

 
.added-msg-inner { 
 
    float: left; 
 
    width: 100%; 
 
    height: 95px; 
 
    overflow: hidden; 
 
} 
 

 
.downarrow { 
 
    position: absolute; 
 
    right: 15px; 
 
    bottom: -12px; 
 
    z-index: 1; 
 
    width: 30px; 
 
    height: 30px; 
 
    line-height: 30px; 
 
    font-size: 18px; 
 
    color: #fff; 
 
    background-color: #003478; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="added-msg2"> 
 
    <div class="added-msg-inner"> 
 
    <p>Message added by agent user on<br> Sat, Jun 24th, 2017 (5:03AM)</p> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
     has survived not only five centuries</p> 
 
    <p><i class="fa fa-paperclip" aria-hidden="true"></i> ABCFileName.pdf</p> 
 
    </div> 
 
    <div class="downarrow"><i class="fa fa-angle-down" aria-hidden="true"></i></div> 
 
</div>