• blog
  • Build an Accordion Without JavaScript

October 7,2021

Build an Accordion Without JavaScript

byIsev Team Isev Team

accordion-v2
In the pursuit of web performance, we are all looking to come up with clever solutions to make our websites load faster. One way many of us do this is coming up with and stealing (which in this case, the latter is more appropriate) ways of writing less JavaScript.

Many websites I work on include an FAQ section, and nine times out of ten I end up building some form of accordion. But recently I saw a method of building a mobile menu without the use of JavaScript, and I wondered if I could use the same method to build an accordion.

See the Pen Building an Accordion without JavaScript – Part I by Michael (@mjtweaver) on CodePen.

The above pen really simply demonstrates how we can achieve this. We use the label to use as the question, and we also include a checkbox. The checkbox is hidden from view. When we click on the label, it checks the input and then we can use this to display the answer. You’ll notice here we use the general sibling combinator or ~. I wrote some more information on this here. The above example was very simple, how about a styled up version?

After searching on Google, I know others have also used this solution in the past, so it may not be new to you, but it would interesting to get your thoughts.

As a note on browser compatibility, the only thing you have to really consider is the general sibling selector, information can be found here.

Continue Reading

What is a Marketing CRM?

Have you ever wondered how businesses keep track of their customer relationships, preferences, and interactions so seamlessly? What if there was a tool that could streamline this process, boost sales, and enhance customer satisfaction all at once? Tools like a CRM can help you achieve this. A CRM (Or, a Customer Relationship Management system) is … Continued

Isev Team
Isev Team January 22nd, 2025
Our digital marketing forecast for 2025

Digital marketing in 2024 has witnessed a range of shifts, many of which are rapid advancements and changes to our technology and how we consume media. As businesses strive to connect with their audiences, trends like AI-powered tools, and short-form videos have redefined how brands approach marketing strategies. Now, attention spans are shorter, trust is … Continued

Isev Team
Isev Team December 16th, 2024
What sets our website designs apart?

Website design goes beyond aesthetics; it's about crafting an experience that keeps your audience engaged and encourages them to return to your business.

Leanne November 18th, 2024
What makes isev website development better

Your website is often the first impression potential customers get of your brand. A well-developed website doesn’t just look good; it offers real, measurable benefits. It drives more sales, keeps visitors engaged, and should last over time, but this isn’t always the case.   In this article, we’ll explore what makes quality development essential for … Continued

Isev Team
Isev Team October 15th, 2024