手順 1：ビューの設定

この手順では、マークアップを追加し、コンテンツをアコーディオンのペインに追加します。以下を実行します。

ソリューションエクスプローラで、 Views | Shared フォルダを展開し、_Layout.cshtml をダブルクリックして、ファイルを開きます。

以下のマークアップをページの <body> タグ内に追加します。このマークアップはアコーディオンのコンテンツをページに追加します。

ソースビュー	コードのコピー
<div id="accordion"> <div> <h3> <a href="#">手順 1</a></h3> <div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac lacus ac nibh viverra faucibus. Mauris non vestibulum dui </p> </div> </div> <div> <h3> <a href="#">手順 2</a></h3> <div> <p> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus. </p> </div> </div> <div> <h3> <a href="#">手順 3</a></h3> <div> <p> Sed facilisis placerat commodo. Nam odio dolor, viverra eu blandit in, hendrerit eu arcu. In hac habitasse platea dictumst. </p> </div> </div> <div> <h3> <a href="#">手順 4</a></h3> <div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac lacus ac nibh viverra faucibus. Mauris non vestibulum dui. </p> </div> </div> </div>

ソースビュー

コードのコピー

<div id="accordion">
                <div>
                    <h3>
    <a href="#">手順 1</a></h3>
<div>
                        <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Proin ac lacus ac nibh viverra faucibus. 
  Mauris non vestibulum dui
</p>
                    </div>
                </div>
                <div>
                    <h3>
                        <a href="#">手順 2</a></h3>
<div>
                        <p>
  Vestibulum ante ipsum primis in faucibus orci luctus et 
  ultrices posuere cubilia Curae; Vestibulum ante ipsum
  primis in faucibus.
</p>
                    </div>
                </div>
                <div>
                    <h3>
                        <a href="#">手順 3</a></h3>
<div>
                        <p>
  Sed facilisis placerat commodo. Nam odio dolor, viverra
  eu blandit in, hendrerit eu arcu. In hac habitasse platea
  dictumst.
</p>
                    </div>
                </div>
                <div>
                    <h3>
                        <a href="#">手順 4</a></h3>
<div>
                        <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Proin ac lacus ac nibh viverra faucibus. Mauris non 
    vestibulum dui.
                        </p>
                    </div>
                </div>
         </div>