小さな折り畳み三角形：ウェブページに折り畳み可能なセクションを作成するにはどうすればよいですか？

Question

一部のWebページには、サブメニューを折りたたむことができる「回転する」三角形のコントロールがあります。私は同じ種類の振る舞いが必要ですが、フォーム内のセクションについては同じです。

私は、貸し手、氏名、住所、市区町村の入力があったフォームがありました。私のサイトのユーザーの中には、これらのフィールドの2番目のセットが必要なものもあります。大多数のユーザーのために余分なフィールドを隠したいと思っています。余分なフィールドを必要とするものはワンクリックでアクセスできるはずです。どうすればいい？

Answer 1

ああ、フォームに折りたたみ可能なセクションがあることを意味していると思います。要するに

：

1. あなたがのCSSプロパティで、独自のDIVに崩壊しないようにしたいコンテンツを入れて「表示：none」を最初
2. ラップで三角形の周りのリンク（タグ）表示プロパティを切り替えるためにJavaScriptを実行する画像（または「非表示/表示」などのテキスト）を使用します。
3. セクションが展開/表示されているときに三角形を「回転」させたい場合は、JavaScriptスワップを同時に行うことができます。

ここでは、より良い説明です：How to Create a Collapsible DIV with Javascript and CSS [アップデート2013年1月27日記事はWeb上で入手できなくなっている、あなたはこの記事に触発適用例えばthe source of this HTML pageを参照することはできません]

か「CSSを折りたたむ」のような言葉でGoogleを検索したり、スーパーファンシーなもの（例えばhttp://xtractpro.com/articles/Animated-Collapsible-Panel.aspx）を含む多くのチュートリアルがあります。

Answer 2

JavaScriptを使用して要素を非表示/表示する最も基本的な方法は、要素のvisibilityプロパティを設定することです。

あなたの例では、次のフォームがページ上に定義されていた想像を考える：入力フィールドの

1. 第2のグループが最初に使用して隠されている。ここで注意すべき二つのものがあります

   <form id="form1"> 
       <fieldset id="lenderInfo"> 
        <legend>Primary Lender</legend> 
        <label for="lenderName">Name</label> 
        <input id="lenderName" type="text" /> 
        <br /> 
        <label for="lenderAddress">Address</label> 
        <input id="lenderAddress" type="text" /> 
       </fieldset> 
       <a href="#" onclick="showElement('secondaryLenderInfo');">Add Lender</a> 
       <fieldset id="secondaryLenderInfo" style="visibility:hidden;"> 
        <legend>Secondary Lender</legend> 
        <label for="secondaryLenderName">Name</label> 
        <input id="secondaryLenderName" type="text" /> 
        <br /> 
        <label for="secondaryLenderAddress">Address</label> 
        <input id="secondaryLenderAddress" type="text" /> 
       </fieldset> 
   </form> 
   

   小さなインラインCSS。

2. [リンクを追加]リンクでは、すべての作業を行うJavaScriptメソッドが呼び出されています。そのリンクをクリックすると、その要素の表示スタイルが動的に設定され、画面上に表示されます。

showElement()は、パラメータとして要素IDをとり、次のようになります。

function showElement(strElem) { 
    var oElem = document.getElementById(strElem); 

    oElem.style.visibility = "visible"; 

    return false; 
} 

ほぼすべてのJavaScriptのアプローチは、ボンネットの下にこれを行うことになるだろうが、私はそのフレームワークを使用することをお勧めします実装の詳細があなたから離れています。 JQueryとJQuery UIを見て、あなたの要素を隠したり表示したりするときに、はるかに洗練された遷移を得ることができます。ここで

Answer 3

は、単純なCSSは、チェックボックスを使用する唯一のソリューションです：

.hideNext:not(:checked)+div { 
 
    max-height: 0; 
 
    overflow: hidden; 
 
}

<label for="ch1">More Options</label><input id="ch1" type="checkbox" class="hideNext" /> 
 
<div>Whatever you want to hide.</div> 
 
and then more stuff below..