Custom Elementor Accordions

Elementor Accordion widget does not let you put a nice image inside the headers, but we can create custom accordions with other Elementor widgets:

Add Your Heading Text Here

Dr Samir Saran is the President of the Observer Research Foundation (ORF), India’s premier think tank, headquartered in New Delhi. His research focuses on issues of global governance, climate change and energy policy, technology and media, and India’s foreign policy. Samir completed his doctoral studies at the Global Sustainability Institute, UK. He holds a Masters degree in Media Studies from the London School of Economics and Political Science, UK, and a Bachelors in Electrical and Electronics Engineering from Manipal Institute of Technology, India. As ORF’s President and member of the Foundation’s Board, he provides strategic direction and leadership to the foundation’s multiple centres on fundraising, research projects, platform design and outreach initiatives including stakeholder engagement. He curates the Raisina Dialogue, India’s annual flagship platform on geopolitics and geo-economics, and is the founder of CyFy, India’s annual conference on cybersecurity and internet governance. He spearheads the foundation’s efforts to foster new international partnerships and incubate young leaders networks and youth led conversations globally.

We do need to add the JavaScript to the page in some way:

				
					<script>
	/* jshint esversion: 6 */
    document.addEventListener("DOMContentLoaded", function() {
        const acc = document.getElementsByClassName("custom-accordion-heading");

        for (let i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function() {
                this.parentElement.classList.toggle("c-a-active");
            });
        }
    });
</script>

And this CSS:

				
					.custom-accordion .custom-accordion-heading {
    cursor: pointer;
}
.custom-accordion .custom-accordion-heading .accordion-minus {
    display: none;
    transition: 0.5s;
}

.custom-accordion .custom-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: 0.5s;
}

.c-a-active .custom-accordion-heading .accordion-minus {
    display: inline;
    transition: 0.5s;
}

.c-a-active .custom-accordion-heading .accordion-plus {
    display: none;
    transition: 0.5s;
}


.c-a-active .custom-accordion-content {
    max-height: 100vh;
    transition: 0.5s;
}

There’s a lot we can do here to optimise this, but this is the core of it.