クリック後に長いテキストを表示するにはどうすればいいですか？

Question

私はブログの長いコメントにアコーディオンパネルを使用しています。今私は短いテキストに長いテキストを追加し、これで全文を表示したいが、問題がある。表示ボタンをクリックすると、改行で表示されます。

jsfiddle snippet

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default text-left" > 
    <div> 
     <div style="color:#000;" class="panel-body text-left"><br>This is short comment for my stack...</div> 
    </div> 
    </div> 
    <div class="panel" > 
    <div id="collapse2" class="clearfix panel-collapse collapse"> 
     <div class="panel-body" style="color:#000;">overflow post and i hope i can find a good solution for this 
     </div> 
    </div> 
    <div class="panel-heading">'. 
     <h5><a class="btn btn-block" data-toggle="collapse" data-parent="#accordion" href="#collapse2">Show/Hide</a> 
     </h5> 
    </div> 
    </div> 
</div> 

私は改行せずに短いテキストに別の部品を追加したいです。

Answer 1

その後、JSでそれを公開し、スパンであなたのテキストの第二部を追加し、それを隠す：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
<script> 

function showMore() 
{ 
    if ($('#threedots').css('display')=='none') 
    { 
     //already showing, we hide 
      $('#threedots').show(); 
      $('#full_desc').hide(); 
    } 
    else 
    { 
      //show more 
      $('#threedots').hide(); 
      $('#full_desc').show(); 

    } 


}//end function 

</script> 

<div style="color:#000;" class="panel-body text-left"><br>This is short comment for my stack<span id="threedots">...</span><span id="full_desc" style="display:none">overflow post and i hope i can find a good solution for this</span></div> 
    <a class="btn btn-block" data-toggle="collapse" data-parent="#accordion" href="javascript:showMore()">Show/Hide</a>