Skip to content

Instantly share code, notes, and snippets.

@krzysztofjeziorny
Created May 23, 2021 10:54
Show Gist options
  • Save krzysztofjeziorny/7779c93065b6b76fac07898173c6aecc to your computer and use it in GitHub Desktop.
Save krzysztofjeziorny/7779c93065b6b76fac07898173c6aecc to your computer and use it in GitHub Desktop.
Wagtail CMS StreamField collapsing block with Bootstrap accordion
{% load wagtailcore_tags %}
<div id="accordion-{{ forloop.counter }}" role="tablist" aria-multiselectable="false" class="card-collapse">
{% for block in self %}
<div class="card card-plain">
<div class="card-header" role="tab" id="heading-{{ forloop.counter }}">
<a data-toggle="collapse" data-parent="#accordion-{{ forloop.parentloop.counter }}" href="#collapse-{{ forloop.parentloop.counter }}-{{ forloop.counter }}" aria-expanded="false" aria-controls="collapse-{{ forloop.parentloop.counter }}-{{ forloop.counter }}">
{% include_block block.value.question %}
<i class="fa fa-chevron-down"></i>
</a>
</div>
<div id="collapse-{{ forloop.parentloop.counter }}-{{ forloop.counter }}" class="collapse" role="tabpanel" aria-labelledby="heading-{{ forloop.counter }}">
<div class="card-body">{% include_block block.value.answer %}</div>
</div>
</div>
{% endfor %}
</div>
class AccordionStreamBlock(StreamBlock):
"""
Accordion for FAQs
"""
required = True
position = blocks.StructBlock([
('question', blocks.CharBlock(
label='Question',
)),
('answer', blocks.RichTextBlock(
label='Answer',
features=['bold', 'italic', 'link', 'ul'],
)),
])
class Meta:
icon = 'folder-open-1'
template = 'blocks/accordion_block.html'
label = 'Accordion'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment