Frequently asked questions
This is the first answer that I would have.
This is the second answer. This is the second answer. This is the second answer. This is the second answer. This is the second answer. This is the second answer. This is the second answer. This is the second answer. This is the second answer. This is the second answer.
This is the second answer. This is the second answer. This is the second answer. This is the second answer. This is the second answer. This is the second answer. This is the second answer. This is the second answer. This is the second answer. This is the second answer. This is the second answer. This is the second answer. This is the second answer.
This is the second answer. This is the second answer. This is the second answer.
Inline/Manual ways
There are a couple of other ways that accordions can be added using tools provided by the WYSIWYG and tools in our CSS. These are shown below.
"DETAILS" html elements:
Text Above. This is another example of WYSI not quite WYG. The headers will not be all caps.
This is a header
This is the details of whatever the heading is above. It's maybe slightly finicky as WYSIWYG are wont to be.
More than one can be added
Use the Arrow buttons to move above and below the details, once you have clicked outisde of the details box?
The "header" does not allow HTML like H1 tags -- aka block tags. It's probably easiest to add or the like manually. If you want them larger
Bootstrap Accordion Code:
Use the Accordion template. But you will need to edit in "Source" view.
Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item’s accordion body.
Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item’s accordion body. Let’s imagine this being filled with some actual content.
Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item’s accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.
If more than one accordion is added, then some changes need to be made.
- References to the overall accordion need to change. In the main div there is an ID: AccordionFlushExample, if multiples are added, this would need to be changed to something else. Easiest would be to add a number afterwards "Accordion2" or something similar.
- Secondly, each item refers to this parent. This is an element called data-bs-parent.
- There are three references to collapseName, which in this page is all collapseOne, collapseTwo, etc. Here below I changed all those references to higher numbers. There are 2 in the header: the data-bs-target and aria-controls properties; and one in the body: the id property. If you don't make these changes, then clicking on one header will impact another.
Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item’s accordion body.
Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item’s accordion body. Let’s imagine this being filled with some actual content.
Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item’s accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.
<div class="accordion accordion-flush" id="accordionFlushExampleTwo">
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
Accordion Item #4
</button>
</h3>
<div class="accordion-collapse collapse" id="flush-collapseFour" data-bs-parent="#accordionFlushExampleTwo">
<div class="accordion-body">
<p>
Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item’s accordion body.
</p>
</div>
</div>
</div>
do this for each accordion-item
</div>