accordion.html 1.89 KB
Newer Older
tron's avatar
tron committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<style>
ul.jekyllcodex_accordion {position: relative; margin: 1.4rem 0!important; padding-bottom: 0;}
ul.jekyllcodex_accordion > li {border-bottom: 1px solid rgba(0,0,0,0.25); list-style: none; margin-left: 0;}
ul.jekyllcodex_accordion > li > input {display: none;}
ul.jekyllcodex_accordion > li > label {display: block; cursor: pointer; padding: 0.75rem 2.4rem 0.75rem 0; margin: 0;}
ul.jekyllcodex_accordion > li > div {display: none; padding-bottom: 1.2rem;}
ul.jekyllcodex_accordion > li > input:checked + label {font-weight: bold;}
ul.jekyllcodex_accordion > li > input:checked + label + div {display: block;}
ul.jekyllcodex_accordion > li > label::before {content: "\e802"; font-weight: normal; position: absolute; right: 1rem; margin: 1rem 1rem 0 0; font-family: "fontello";}
ul.jekyllcodex_accordion > li > input:checked + label::before {transform: rotate(90deg);}
ul.jekyllcodex_accordion > li > div > ul > li {list-style: disc;}

</style>
<ul class="jekyllcodex_accordion">
    {% for item in include.accordion %}
     {% if item.checked %}
        <li><input id="accordion{{ include.id | append: forloop.index }}" type="checkbox" checked=checked/><label for="accordion{{ include.id | append: forloop.index }}"><h2>{{ item.title }}</h2></label>
        	<div>
        	{% if item.img %}
        		{% include image src=item.img style=item.style %}
            {% else %}
        		{{ item.content | markdownify }}
        	 {% endif %}
        	</div>
        </li>
     {% else %}
        <li><input id="accordion{{ include.id | append: forloop.index  }}" type="checkbox" /><label for="accordion{{ include.id | append: forloop.index  }}"><h2>{{ item.title }}</h2></label>
        	<div>
        	{% if item.img %}
        		{% include image src=item.img style=item.style %}
            {% else %}
        		{{ item.content | markdownify }}
        	 {% endif %}
        	</div>
        </li>
    {% endif %}
    {% endfor %}
</ul>