Skip to content

Commit 096d4aa

Browse files
gselderslaghsgselderslaghs
committed
updated docs: collapsible content with p tags instead of span, fixes top and bottom content padding #448
1 parent df47e43 commit 096d4aa

1 file changed

Lines changed: 15 additions & 15 deletions

File tree

‎src/collapsible.html‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,13 @@
2222
<div class="collapsible-header-content">First</div>
2323
</div>
2424
<div class="collapsible-body">
25-
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
25+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
2626
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
2727
commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
2828
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
2929
ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
3030
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
31-
ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
31+
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
3232
</div>
3333
</li>
3434
<li>
@@ -37,9 +37,9 @@
3737
<div class="collapsible-header-content">Second</div>
3838
</div>
3939
<div class="collapsible-body">
40-
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
40+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
4141
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
42-
commodo consequat.</span>
42+
commodo consequat.</p>
4343
</div>
4444
</li>
4545
<li>
@@ -48,9 +48,9 @@
4848
<div class="collapsible-header-content">Third</div>
4949
</div>
5050
<div class="collapsible-body">
51-
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
51+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
5252
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
53-
commodo consequat.</span>
53+
commodo consequat.</p>
5454
</div>
5555
</li>
5656
</ul>
@@ -64,15 +64,15 @@
6464
<ul class="collapsible">
6565
<li>
6666
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
67-
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
67+
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
6868
</li>
6969
<li>
7070
<div class="collapsible-header"><i class="material-icons">place</i>Second</div>
71-
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
71+
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
7272
</li>
7373
<li>
7474
<div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
75-
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
75+
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
7676
</li>
7777
</ul>
7878
</xmp>
@@ -104,33 +104,33 @@ <h5>Preselected Section</h5>
104104
<div class="collapsible-header">
105105
<i class="material-icons">filter_drama</i>First</div>
106106
<div class="collapsible-body">
107-
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
107+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
108108
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
109109
consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
110110
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
111111
ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
112112
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
113-
ut aliquip ex ea commodo consequat.</span>
113+
ut aliquip ex ea commodo consequat.</p>
114114
</div>
115115
</li>
116116
<li class="active">
117117
<div class="collapsible-header">
118118
<i class="material-icons">place</i>Second</div>
119119
<div class="collapsible-body">
120-
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
120+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
121121
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
122122
consequat.
123-
</span>
123+
</p>
124124
</div>
125125
</li>
126126
<li>
127127
<div class="collapsible-header">
128128
<i class="material-icons">whatshot</i>Third</div>
129129
<div class="collapsible-body">
130-
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
130+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
131131
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
132132
consequat.
133-
</span>
133+
</p>
134134
</div>
135135
</li>
136136
</ul>

0 commit comments

Comments
 (0)