Bloggerインターフェイスのテキストをクリックするとコンテンツを展開するにはどうすればよいですか？

Question

私はブロガーを使って自分の考えを整理しています。私は、多くの考えが関連する見出しの下に置かれているページに生の思考を並べています。思考リストが増えているので、私が行っている探査や決定のために、進展を概観することはできません。

私はこれをどこでも検索し、特定のコードを含めることを試みましたが、結果を得ることができませんでした。私はウェブデザイン言語について何も知らないので、この柔軟性を持つことは困難になってきました。ブロガーではどうすればいいですか？このコードを表示するには、どのコードを配置する必要がありますか？

Answer 1

まず、このコードを追加します（これはすでに<script>タグでラップされています）。

<script type="text/javascript" language="JavaScript"> 
    function HideContent(d) { 
     document.getElementById(d).style.display = "none"; 
    } 
    function ShowContent(d) { 
     document.getElementById(d).style.display = "block"; 
    } 
    function ReverseDisplay(d) { 
     if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; } 
     else { document.getElementById(d).style.display = "none"; } 
    } 
</script> 

次に、（何を選択することはあなた次第です、ちょうどコード全体を通して同じIDを保持する）が一意のIDを<div>を追加します。このように：

<div id="uniquename" style="display:none;"> 
    <p>Content goes here.</p> 
</div> 

最後に、<a>要素追加（属性のショートを、基本的にクリック可能なテキストを意味します）。これにより、 "Read More"というテキストが（デフォルトでは青色で）作成されます。これをクリックすると、divが展開されます。

<a href="javascript:HideContent('uniquename')">Show less</a> 

とのdivをトグルコード用：divの隠しテキストについては

<a href="javascript:ShowContent('uniquename')">Read more</a> 

リンクの色を変更するには

<a href="javascript:ReverseDisplay('uniquename')">Read more/less</a> 

を（これは最善の方法ではありませんが）、これを実行してください：

<a href="javascript:ReverseDisplay('uniquename')" style="color:green;">Read more/less</a> 

"緑色"はほとんどの色や16進コードに置き換えることができます。