n行分の段落を非表示・表示

見出しの■をクリックすると全て表示・非表示

<div class="toggle-all">
  <h3><span class="toggle-button">■</span> 5行表示 デフォルト</h3>
  <p class="toggle-content">
    ○○○○○○○○○○<br>
    ○○○○○○○○○○<br>
    ○○○○○○○○○○<br>
    △△△△△△△△△△<br>
    ●●●●●●●●●●<br>
    ●●●●●●●●●●<br>
    ●●●●●●●●●●<br>
    ●●●●●●●●●●
  </p>
</div>
<div class="toggle-all" data-lines="3">
  <h3><span class="toggle-button">■</span> 3行表示</h3>
  <p class="toggle-content">
    ○○○○○○○○○○<br>
    ○○○○○○○○○○<br>
    ○○○○○○○○○○<br>
    △△△△△△△△△△<br>
    ●●●●●●●●●●<br>
    ●●●●●●●●●●<br>
    ●●●●●●●●●●<br>
    ●●●●●●●●●●
  </p>
</div>
<div class="toggle-all" data-lines="7">
  <h3><span class="toggle-button">■</span> 7行表示</h3>
  <p class="toggle-content">
    ○○○○○○○○○○<br>
    ○○○○○○○○○○<br>
    ○○○○○○○○○○<br>
    △△△△△△△△△△<br>
    ●●●●●●●●●●<br>
    ●●●●●●●●●●<br>
    ●●●●●●●●●●<br>
    ●●●●●●●●●●
  </p>
</div>

---

見出しの■をクリックすると個別に表示・非表示

<div class="toggle-individual">
  <h3><span class="toggle-button">■</span> 5行表示 デフォルト</h3>
  <p class="toggle-content">
    ○○○○○○○○○○<br>
    ○○○○○○○○○○<br>
    ○○○○○○○○○○<br>
    △△△△△△△△△△<br>
    ●●●●●●●●●●<br>
    ●●●●●●●●●●<br>
    ●●●●●●●●●●<br>
    ●●●●●●●●●●
  </p>
</div>
<div class="toggle-individual" data-lines="3">
  <h3><span class="toggle-button">■</span> 3行表示</h3>
  <p class="toggle-content">
    ○○○○○○○○○○<br>
    ○○○○○○○○○○<br>
    ○○○○○○○○○○<br>
    △△△△△△△△△△<br>
    ●●●●●●●●●●<br>
    ●●●●●●●●●●<br>
    ●●●●●●●●●●<br>
    ●●●●●●●●●●
  </p>
</div>
<div class="toggle-individual" data-lines="7">
  <h3><span class="toggle-button">■</span> 7行表示</h3>
  <p class="toggle-content">
    ○○○○○○○○○○<br>
    ○○○○○○○○○○<br>
    ○○○○○○○○○○<br>
    △△△△△△△△△△<br>
    ●●●●●●●●●●<br>
    ●●●●●●●●●●<br>
    ●●●●●●●●●●<br>
    ●●●●●●●●●●
  </p>
</div>

---

<div class="toggle-all" data-lines="7">
	<h3><span class="toggle-button">■</span> div内に段落とリスト入れてみる<br>表示行数は7行</h3>
	<div class="toggle-content">
		<p>
		○○○○○○○○○○<br>
		○○○○○○○○○○<br>
		○○○○○○○○○○<br>
		△△△△△△△△△△<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●
		</p>
		<ol>
		<li>1個目</li>
		<li>2個目</li>
		<li>3個目</li>
		<li>4個目</li>
		<li>5個目</li>
		</ol>
		<p>
		○○○○○○○○○○<br>
		○○○○○○○○○○<br>
		○○○○○○○○○○<br>
		△△△△△△△△△△<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●
		</p>
	</div>
</div>

---

<div class="toggle-individual" data-lines="7">
	<h3><span class="toggle-button">■</span> div内に段落とリスト入れてみる<br>表示行数は7行</h3>
	<div class="toggle-content">
		<p>
		○○○○○○○○○○<br>
		○○○○○○○○○○<br>
		○○○○○○○○○○<br>
		△△△△△△△△△△<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●
		</p>
		<ol>
		<li>1個目</li>
		<li>2個目</li>
		<li>3個目</li>
		<li>4個目</li>
		<li>5個目</li>
		</ol>
		<p>
		○○○○○○○○○○<br>
		○○○○○○○○○○<br>
		○○○○○○○○○○<br>
		△△△△△△△△△△<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●<br>
		●●●●●●●●●●
		</p>
	</div>
</div>