I'v been looking for a solution but nothing came up. I'm trying to apply a javascript code where each post is an accordion. I'm using a elementor widget as a shortcode to render it (maybe it is helpful to know this).You can see it in action at https://www.grafflove.com/
The code for one of the posts is as follows:
(function(){
var accgraffititv110hest = document.getElementsByClassName("accordiongraffititv110hest"), l = accgraffititv110hest.length;
for (let i = 0; i < l; i++) {
accgraffititv110hest[i].firstChild.nextSibling.onclick = function () {
this.classList.toggle("active");
var panel = this.nextSibling.nextSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
}());/* Accordion element */
.accordiongraffititv110hest > div {
display: inline-block;
color: inherit;
width: 100%;
text-align: left;
background: transparent;
border: 0;
border-bottom: 1px solid #eee;
font-size: 1.2em;
line-height: 1em;
outline: none;
padding: 0.55em;
}
.accordiongraffititv110hest > div::before {
vertical-align: super;
content: "+";
cursor: pointer;
margin: 0 0.5em 0 0;
display: inline-block;
transition: transform 0.4s ease-in-out 0s;
transform-origin: 50% 50%;
will-change: transform;
cursor: pointer;
}
.accordiongraffititv110hest > div.active::before {
vertical-align: super;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.accordiongraffititv110hest > section {
padding: 0 1em;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
border-bottom: 1px solid #eee;
will-change: auto;
}<div class="accordiongraffititv110hest" role="tablist">
<div role="tab"><div style="display:inline-block; width:90%;">Graffiti TV #110: Hest</div></div>
<section role="tabpanel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</section>
</div> In each post css class names and variables change to fit the slug of the post... and everything seems to be correct but for some reason the javascript is blocked on the browser at the time of showing it.
Any clue will be welcome.
