initial commit
This commit is contained in:
@@ -0,0 +1,27 @@
|
||||
if (!customElements.get('show-more-button')) {
|
||||
customElements.define(
|
||||
'show-more-button',
|
||||
class ShowMoreButton extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
const button = this.querySelector('button');
|
||||
button.addEventListener('click', (event) => {
|
||||
this.expandShowMore(event);
|
||||
const nextElementToFocus = event.target.closest('.parent-display').querySelector('.show-more-item');
|
||||
if (nextElementToFocus && !nextElementToFocus.classList.contains('hidden') && nextElementToFocus.querySelector('input')) {
|
||||
nextElementToFocus.querySelector('input').focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
expandShowMore(event) {
|
||||
const parentDisplay = event.target.closest('[id^="Show-More-"]').closest('.parent-display');
|
||||
const parentWrap = parentDisplay.querySelector('.parent-wrap');
|
||||
this.querySelectorAll('.label-text').forEach((element) => element.classList.toggle('hidden'));
|
||||
parentDisplay.querySelectorAll('.show-more-item').forEach((item) => item.classList.toggle('hidden'));
|
||||
if (!this.querySelector('.label-show-less')) {
|
||||
this.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user