段落内に展開する

Question

私はJavaScriptにはかなり新しく、折りたたみ可能な段落に10以上のstackoverflowソリューションで遊んでいますが、それらのどれも私が望むものには当てはまりません。それらのほとんどはリスト、ボタン、テーブルCSS（私はブラウザサポートの問題のために躊躇している）のみを使用します。リンクをどのようなタイプのボタンにもしたくないのですが、私はそれをテキストリンクにしたいだけです。拡張された文章もシームレスに継続し、次の行または何かで始まらなければなりません。

私が望むのは、一度クリックすれば拡大できるテキストリンクが付いた簡単な段落です。イラスト： 「これは文章です」 - >「これは文章であり、展開されました」

そして、拡大文で再度クリックすると元に戻す必要があります。

現在、私はこのコードを使用していますが、divを扱うので、シームレスな段落を達成する問題があります。 （私はそれがないブレークまたは次の行で、文を続けて見えるように展開されたテキストを必要とする。）

スクリプト

$(document).ready(function(){ 
$("#button-1").click(function(){ 
     $("#special1").toggle() 
}) 
}) 
</script> 

とhtml

<h2>This is a sentence<div id="button-1">[more]</h2> 
<p id="special1">blah 
blah </p> 
</div> 

とCSS

#special1{ display: none;} 

Answer 1

ここにチェックしてください。 「スパンは、新しい行を作成しない ない、とJSで私が定義した、メッセージ表示後、クリック可能なテキストは「少ない」に変更される場合は代わりのために、私は<span>と<div>、<p>タグを交換した

もっと"。 "ダブルクリックテキスト選択"を無効にするには、私はいくつかのCSSを追加しました。再びそれをクリック以来

$(document).ready(function(){ 
 
    $("#button-1").click(function(){ 
 
     $("#special1").toggle() 
 
     var isVisible = $("#special1").is(":visible"); 
 
     if(isVisible){ 
 
     $("#button-1").html("[less]"); 
 
     }else{ 
 
     $("#button-1").html(" [more]"); 
 
     } 
 
    
 
    }) 
 
})

#special1{ display: none;} 
 
#button-1{ 
 
    cursor:pointer; 
 
    -moz-user-select: none; 
 
    -webkit-user-select: none; 
 
    -ms-user-select: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</script> 
 

 
<p>This is a sentence <span id="special1">blah 
 
blah </span><span id="button-1"> [more]</span></p>

Answer 2

<script type='text/javascript' 
src='https://code.jquery.com/jquery-1.12.4.min.js'> 
</script> 

<script> 
function ShowFull(x) 
{ 
$('#full').toggle(x); 
$('#short').toggle(!x); 
} 
</script> 

This is a sentence <span id='short' onclick='ShowFull(1)'>[more]</span> 
<span id='full' onclick='ShowFull(0)' style='display:none'>and expanded.</span>