複数のdivのクリック時にdivを展開/折りたたむ

Question

単一のコンテンツがある場合、expand/collapse divとそのうまくいった罰金を作成しましたdiv私は複数の展開/折りたたみをしているときに、個々のコンテンツdiv ？あなたは、セレクタをクリックアイテムと同じ部分に属している要素をキャッチようにする必要があります

$(document).ready(function() { 
 
var $divView = $(".added-msg-inner"); 
 
var innerHeight = $divView.removeClass("added-msg-inner").height(); 
 
$divView.addClass('added-msg-inner'); 
 
$(".downarrow").click(function() { 
 
     $(".added-msg-inner").animate({ 
 
      height: (($divView.height() == 75)? innerHeight : "75px") 
 
     }, 500); 
 
\t \t if($(".added-msg-inner").height() == 75){ 
 
    $('.downarrow > i').attr("class","fa fa-angle-up"); 
 
    } 
 
    else{ 
 
\t $('.downarrow > i').attr("class","fa fa-angle-down"); 
 
    } 
 
     return false; 
 
    }); 
 
});

.added-msg2 { 
 
\t padding: 3% 1%; 
 
\t float: left; 
 
\t width: 100%; 
 
\t box-sizing: border-box; 
 
\t font-size: 14px; 
 
\t color: #333333; 
 
\t position: relative; 
 
\t background-color: #e0e0e0; 
 
} 
 
.added-msg-inner { 
 
\t float: left; 
 
\t width: 100%; 
 
\t height: 75px; 
 
\t overflow: hidden; 
 
    margin-bottom:15px; 
 
} 
 
.downarrow { 
 
\t position: absolute; 
 
\t right: 15px; 
 
\t bottom: -12px; 
 
\t z-index: 1; 
 
\t width: 30px; 
 
\t height: 30px; 
 
\t line-height: 30px; 
 
\t font-size: 18px; 
 
\t color: #fff; 
 
\t background-color: #003478; 
 
\t border-radius: 50%; 
 
\t text-align: center; 
 
\t font-weight: bold; 
 
\t cursor: pointer; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/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="col-xs-12 lt-grey-bg mar-bot-25"> 
 
     <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> 
 
    </div> 
 
    <div class="col-xs-12 lt-grey-bg mar-bot-25"> 
 
     <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> 
 
    </div>

Answer 1

：

以下はコードです。また、innerHeightと$divViewはもはや単一の値ではありません。計算されたinnerHeightsを関連する$divView要素のデータプロパティに格納することをお勧めします。

$(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'); 

    $(".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() == 75 ? innerHeight : "75px" 
     }, 500); 
     $('i', this).attr("class", 
      $divView.height() == 75 ? "fa fa-angle-up" 
            : "fa fa-angle-down"); 
     return false; 
    }); 
});