続きを読むスクリプトとside-by-side divsが正しく動作しない

Question

this postの後に、テキストセクション用に「read more」を設定する方法と、2つのサイドバイサイドdivを設定するthis postを設定する方法については、左側のフローティングディビジョンがうまく動作する問題 - 「Read More」をクリックすると、divのテキストの残りの部分が表示され、「Less Less」の場合はその逆になります。しかし、2番目のdivは意図したとおりに動作しません。「Read More」をクリックすると2番目のdivのテキストが隠され、最初のdivの省略記号も変更されます。

それをより明確にする：

//Script for Read More/Read Less 
<script> 
    $(document).ready(function() { 
     var showChar = 200; 
     var ellipsestext = "..."; 
     var moretext = "Read More"; 
     var lesstext = "Read Less"; 
     $('.more').each(function() { 
      var content = $(this).html(); 

      if(content.length > showChar) { 

       var c = content.substr(0, showChar); 
       var h = content.substr(showChar-1, content.length - showChar); 

       var html = c + '<span class="moreelipses">'+ellipsestext+'</span><span class="morecontent"><span>' + h + '</span><div class="text-center margin_top_10"><a href="" class="morelink">'+moretext+'</a></div></span>'; 

       $(this).html(html); 
      } 

     }); 

     $(".morelink").click(function(){ 
      if($(this).hasClass("less")) { 
       $(this).removeClass("less"); 
       $(this).html(moretext); 
      } else { 
       $(this).addClass("less"); 
       $(this).html(lesstext); 
      } 
      $(".moreelipses").toggle(); 
      $(this).parent().prev().toggle(); 
      $(this).prev().toggle(); 
      return false; 
     }); 
    }); 
</script> 

<style> 
    .comment { 
     width: 100%; 
     margin: 0 auto; 
    } 
    a.morelink { 
     outline: none; 
     color: #5bc0de !important; 
    } 
    .morecontent span { 
     display: none; 

    } 
</style> 

//First Div 
<div class="container" style="width:620px; float:left;"> 
    <div class="row"> 
     <div class="comment more col-lg-8 col-lg-offset-2 text-center"> 
      <p class="comment more">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
      </p> 
     </div> 
    </div> 
</div> 
//Second Div 
<div class="container" style="width:620px; float:right;"> 
    <div class="row"> 
     <div class="comment more col-lg-8 col-lg-offset-2 text-center"> 
      <p class="comment more">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      </p> 
     </div> 
    </div> 
</div> 
<div style="clear:both"> 
</div> 

結果：

• 両方のdivが展開、両方の罰金を表示していない場合。
• div 1が展開され、div 2がそうでない場合、div 1のテキストは期待どおりに展開されます。 Div 2は同じままです。
• div 2が展開され、div 1がそうでない場合、div 2のテキストは収縮したままになります。両方のdivの省略記号（...）が消えます。
• 両方のdivが展開されている場合、div 1のテキストは予想どおりに展開され、div 2のテキストは収縮したままになります。 Div 1には意味がないときに省略記号が表示されます。

Answer 1

あなただけのコードで片付けに必要な...ここで

はフィドルです：https://jsfiddle.net/bgssveqq/5/

部分JS：

$(".morelink").on("click", function() { 
      if($(this).hasClass("less")) { 
       $(this).removeClass("less"); 
       $(this).html(moretext); 
      } 
      else { 
       $(this).addClass("less"); 
       $(this).html(lesstext); 
      } 
      $(this).parent().parent().children("p").children(".moreelipses").toggle(); 
      $(this).parent().parent().children("p").children(".morecontent").toggle(); 
     });