Honey Butter

Building Accordions Without JavaScript: Ensuring Universal Accessibility

Categories

Accordions are a fantastic way to format content, reducing the need for endless scrolling and making a page interactive.

They help users quickly find the information they’re looking for—perfect for FAQs, service descriptions, or any other grouped content. Sure, we could simply present all the content as visible headers and paragraphs, but wouldn’t it be nice to maintain the functionality of an accordion without relying on JavaScript?

In this post, we’ll explore how to create fully functional accordions using only HTML and CSS. This approach ensures your website delivers a great user experience, even for users who browse with JavaScript disabled. For industries like escort services, where privacy, accessibility, and inclusivity are crucial, this solution ensures your site is reliable for everyone.


Why Build Without JavaScript?

Users disable JavaScript for several reasons:

  1. Privacy and Security: To block tracking scripts or avoid vulnerabilities.
  2. Performance: JavaScript can slow down page loads on older devices or slower connections.
  3. Reliability: Some lightweight browsers have limited JavaScript support.

By designing features that don’t rely on JavaScript, you ensure universal accessibility and enhance the usability of your website for all users.


Building a JavaScript-Free Accordion

Here’s how you can create an accordion using only HTML and CSS. This solution is simple, accessible, and functional for all users.

HTML Structure

  <div class="accordions">
    <div class="accordion">
      <input type="checkbox" id="question-1">
      <label for="question-1" class="accordion__header">What is an accordion?</label>
      <div class="accordion__content">
        <p>An accordion is a UI pattern that lets users toggle sections of content, allowing them to expand or collapse information for a more compact and organized display. It’s commonly used for FAQs or grouped content.</p>
      </div>
    </div>

    <div class="accordion">
      <input type="checkbox" id="question-2">
      <label for="question-2" class="accordion__header">How do I implement it?</label>
      <div class="accordion__content">
        <p>You can implement an accordion using a combination of HTML and CSS by utilizing input elements, such as checkboxes, along with labels to control visibility. This approach not only achieves functionality without JavaScript but also enhances accessibility by ensuring proper interaction with screen readers and keyboard navigation.</p>
      </div>
    </div>

    <div class="accordion">
      <input type="checkbox" id="question-3">
      <label for="question-3" class="accordion__header">Do I need JavaScript for this?</label>
      <div class="accordion__content">
        <p>No, you don’t need JavaScript to create a basic accordion. A simple accordion can be built using only HTML and CSS, which provides essential functionality like toggling content visibility. However, if you want to add more advanced features—such as animations, dynamic behavior, or interactive control over multiple sections—JavaScript can be introduced to enhance the user experience and offer greater customization options.</p>
      </div>
    </div>
  </div>


CSS Styling

The following CSS styles the accordion and manages the visibility of its content:

.accordions {
  width: 90%;
  max-width: 60ch;
  margin: 0 auto;
}

.accordion {
    border: 1px solid #ccc;
  margin-bottom: 1rem;
    overflow: hidden;
  transition: border-color .5s ease;
    background-color: #f1f1f1;

}

.accordion:hover {
  border-color: #000;
}

.accordion__header {
  cursor: pointer;
  font-weight: 500;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  position: relative;
  padding: 1rem;
  color: #666;

}
.accordion__header:after, .accordion__header:before {
  content: '';
  position: absolute;
  right: 1.5em;
  width: 2px;
  height: 0.75em;
  background-color: #666;
  transition: all 0.2s;
}
.accordion__header:after {
  transform: rotate(90deg);
}

.accordion:has(input:checked) .accordion__header {
  color: #000;
}

.accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
  * {
        padding: 0 1em 1em;
  }
}

.accordion input {
  display: none;
}

.accordion:has(input:checked) {
  border-color: #000;
  background-color: #fff;
  box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}

.accordion input:checked ~ .accordion__header:before {
    transform: rotate(270deg) !important;
  background-color: #000;
 }

.accordion input:checked ~ .accordion__header:after {
    transform: rotate(270deg) !important;
  background-color: #000;
 }

.accordion input:checked ~ .accordion__content {
    max-height: 1000px; /* Adjust based on content length */
}




How This Works

The functionality of this accordion relies on the interplay between HTML and CSS:

  1. The Checkbox as a Toggle
    • Each accordion section includes an <input type="checkbox">, which acts as the toggle. When the checkbox is checked, it determines whether the corresponding content is visible.
    <input type="checkbox" id="question-1">
  2. The Label for Interaction
    • The <label> is associated with the checkbox, allowing users to click on the label to toggle the content. This ensures the interface is user-friendly and accessible.
    <label for="question-1" class="accordion__header">What is an accordion?</label>
  3. CSS for Visibility
    • The rule .accordion input:checked ~ .accordion__content makes the content visible when the checkbox is checked.
    .accordion input:checked ~ .accordion__content { max-height: 1000px; }
  4. Default Hidden State
    • All content is visually hidden by default with max-height: 0;, ensuring a clean and compact page layout.
    .accordion__content { max-height: 0; overflow: hidden; }

Example


Why This Matters for Escort Websites

Escort websites often cater to a diverse audience, including users who prioritize privacy. Here’s why a JavaScript-free solution like this accordion is ideal:

  1. Privacy-Conscious Users: Many users disable JavaScript to enhance their anonymity. HTML and CSS-based solutions ensure your site remains functional for these users.
  2. Universal Accessibility: With no reliance on JavaScript, your site works on all devices and browsers, including those with limited capabilities.
  3. Improved SEO: Search engines can easily parse the content inside HTML, improving your site’s visibility and search rankings.

Implementing This in WordPress

When implementing this accordion in WordPress, I typically use Advanced Custom Fields (ACF) to capture the FAQ data. ACF makes it simple to create a user-friendly interface in the WordPress admin for managing FAQs or similar content. Once the data is captured, I create a custom template that incorporates the HTML and CSS for the accordion. This approach ensures a clean, structured workflow that’s easy to maintain and update. While it’s technically possible to build this within Gutenberg, the process can become overly complicated and less intuitive for future updates. By using ACF and a custom template, you get a streamlined, reliable solution that works perfectly for clients or content managers.


Conclusion

Accordions are a great way to make your website more interactive and user-friendly, helping users quickly find the information they need. By building them with just HTML and CSS, you create a solution that is accessible, reliable, and functional for all users—even those who disable JavaScript. For websites in sensitive industries like escort services, where privacy and usability are top priorities, this approach ensures your site meets the needs of every visitor.