HTML code to replace some Javascript for an accordion

Geovista

Hi

Can anyone please help with HTML code to replace some Javascript for an accordion? I know very little about HTML or anything like this.

I closely followed this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol to build an accordion FAQs page on my site (unpublished). It looks good, however the accordion panels won't open when clicked. I'm told by one of the Smugmug Heroes that it is because there is Javascript in the HTML code, which Smugmug doesn't allow. They advised I seek help here. So I please need HTML code to replace the following Javascript:

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>

Also, does anyone know how to indent only some paragraphs in a panel in the accordion?

Many thanks
Grant

Hikin' Mike

You can check out this: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Create-a-Responsive-Accordion-Menu-for-SmugMug

Hikin' Mike

@Geovista said:
Also, does anyone know how to indent only some paragraphs in a panel in the accordion?

You can add a special class for your indent paragraphs. In this case I added .indent to one of the second paragraph.

HTML

<div class="lorem-ipsum">

    <p><a href="#">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. Aliquam velit est, <em>viverra blandit mollis sed</em>, aliquet nec elit. Quisque fringilla purus non facilisis iaculis. Etiam vel lectus arcu. Nam <strong>varius ut</strong> enim vitae venenatis. Suspendisse nibh ante, scelerisque eu pellentesque eget, commodo at enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam felis justo, interdum congue odio ac, dapibus euismod elit.</p>

    <p class="indent">Sed mattis, <a href="#">quam tempus venenatis</a> mattis, nisi eros vulputate ex, <strong>eu euismod mauris urna sed ligula</strong>. Donec facilisis iaculis mauris sit amet hendrerit. Sed quis bibendum dui, <em>in blandit</em> lorem. Curabitur luctus justo arcu, in interdum nulla egestas eu. Sed suscipit nisl vitae mollis accumsan. Proin suscipit diam et consequat molestie. Pellentesque nec odio commodo, condimentum risus eget, malesuada urna. Vestibulum fermentum pharetra orci. Donec elementum viverra lacus et consequat. Cras sit amet gravida diam. Duis semper diam quam, non pretium tortor imperdiet quis. Curabitur a nulla tellus. Nulla diam libero, tristique vel lacinia eget, molestie ultrices lorem. Donec enim diam, dignissim a faucibus eu, mollis a massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

    <p>Nunc mollis arcu eu elementum rutrum. Ut aliquet arcu quis nisi tincidunt maximus et ut quam. Aliquam laoreet posuere diam, a fermentum tellus iaculis sit amet. Curabitur pellentesque lorem ut nibh placerat tincidunt. Proin sagittis euismod mauris vel pellentesque. Pellentesque eget risus malesuada, vulputate libero eget, dictum felis. Fusce magna nunc, consectetur at ante vel, sodales aliquet sem. Vivamus non urna vestibulum, egestas lorem quis, pharetra purus. Nullam ac nibh sed ipsum pulvinar convallis id vitae nisi. Sed aliquet tincidunt ullamcorper. Donec eu luctus nisl. Nulla volutpat dolor sit amet accumsan fringilla. In consequat enim vitae neque pretium, rhoncus hendrerit velit gravida. Duis congue nibh eros.</p>

</div>

CSS

.indent {
  text-indent: 20px;
  margin-right: 30px;
}

If you don't want to indent the first line, you can remove text-indent: 20px;.

Geovista

Many thanks Mike!

The link and your tip were very helpful. I also found this link useful: https://supfort.com/css-accordion-animation.