OEL-3547: Added collapse/expand buttons in accordion. #632
Conversation
|
🚀 Deployed on https://preview-632--oelibrary.netlify.app |
| static init() { | ||
| if (AccordionToggle.isInitialized) { | ||
| return; | ||
| } | ||
|
|
||
| const toggleButtons = SelectorEngine.find('[data-action][data-target]'); | ||
| toggleButtons.forEach(buttonElement => new AccordionToggle(buttonElement)); | ||
|
|
||
| AccordionToggle.isInitialized = true; | ||
| } | ||
| } | ||
|
|
||
| document.addEventListener("DOMContentLoaded", () => AccordionToggle.init()); |
There was a problem hiding this comment.
there are drupal behaviours for these, I'd rather init using those
[skip chromatic]
[skip chromatic]
tibi2303
force-pushed
the
OEL-3547-#default#
branch
from
37beaeb to
d40a340
Compare
| {%- block content _content -%} | ||
| </div> | ||
| {% endif %} | ||
| <div class="accordion-items-wrapper"> |
There was a problem hiding this comment.
I tested and we can drop this
There was a problem hiding this comment.
this is for the default bootstrap styles
on :first-of-type on accordion items it adds a border, when we have the buttons, it no longer adds the border styles because it is not :first-of-type, so i encaspsulate them in a div to have the styles for border
| {% if not _item.stay_open %} | ||
| data-bs-parent="#accordion-{{ _id }}" | ||
| {% if _items|length > 1 and (_expand_button is not empty or _collapse_button is not empty) %} | ||
| <div class="d-flex justify-content-end gap-3 mb-3"> |
There was a problem hiding this comment.
Can we transfer these to a class?
There was a problem hiding this comment.
i created an attribute for them.
| class="accordion-collapse collapse{{ _open_item ? ' show' }}" | ||
| aria-labelledby="heading-{{ _id }}-{{ loop.index }}" | ||
| role="region" | ||
| {% if not _item.stay_open and _expand_button is empty %} |
There was a problem hiding this comment.
and _expand_button is empty why is this needed?
There was a problem hiding this comment.
because this attribute helps the accordion to close other 'tab' when another is opened. And when expand_button is clicked, the behaviour of the accordion does not know how to open all of them, only one because of this attribute. For the collapse_button i dont care, because it only closses all.
There was a problem hiding this comment.
when this attribute is not present, all the tabs can be opened separately
[skip chromatic]
[skip chromatic]