Creating a custom accordion with pure CSS, no need for Bootstrap or HTML

Question

Creating a custom accordion with pure CSS, no need for Bootstrap or HTML

Struggling to create an accordion using pure CSS

Despite numerous attempts, I have been unsuccessful in achieving the desired outcome.

javascript html css bootstrap-4 accordion

Answer 1

Answer №1

It's impossible to create anything without utilizing HTML. Bootstrap is essentially a tool that enhances the functionality of HTML, CSS, and JS. HTML dictates the structure of elements, while CSS determines the appearance and behavior (JavaScript may also be necessary for certain functionalities).

An accordion, for instance, necessitates all three components (Refer to this question/answer.)

Update

Since the other question is inaccessible, here is the gist of my response for non-2k reputation users:

There isn't a specific HTML tag dedicated to creating accordions.

You have to construct these "accordions" on your own. The simplest method would be to follow this W3Schools tutorial.

It involves three key elements:

HTML

You'll require a button and another div for the "dropdown" content. W3Schools refers to it as a panel. Assign unique classes to both elements to simplify future tasks.

CSS

While most CSS attributes are focused on aesthetics, there are two critical rules you must include:

For the button

width: 100%;

The button should occupy the entire width to prevent adjacent elements from disrupting the "dropdown" effect when the panel is opened.

For the panel

display: none;

Initially, the panel should remain hidden until triggered by clicking the button.

JavaScript

You need to set up an event listener (find more about events here in the MDN documentation) to respond to clicks on buttons with associated panels.

If all buttons with panels share a common class, you can iterate through them effortlessly. Within the event listener, toggle the active attribute and access the relevant panel.

let panel = this.nextElementSibling;

To adjust the visual state based on user actions:

  if (panel.style.display === "none") {
    panel.style.display = "block"; // Make it visible
  }
  else {
    panel.style.display = "none"; // Hide it again
  }
});

Additionally, you could modify the value of the aria-hidden attribute if needed (though omit it when employing display:none).

  if (panel.style.aria-hidden === "true") {
    panel.ariaHidden = "false"; // Make it visible for assistive technologies
  }
  else {
    panel.ariaHidden = "true"; // Conceal content from assistive technologies
  }
});

Here's a condensed version of the W3Schools tutorial code:

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.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

.accordion {
  width: 100%;
}

.panel {
  display: none;
}

<button class="accordion">Section 1</button>
<div class="panel">
  <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>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <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>
</div>

Answer 2

It's impossible to create anything without utilizing HTML. Bootstrap is essentially a tool that enhances the functionality of HTML, CSS, and JS. HTML dictates the structure of elements, while CSS determines the appearance and behavior (JavaScript may also be necessary for certain functionalities).

An accordion, for instance, necessitates all three components (Refer to this question/answer.)

Update

Since the other question is inaccessible, here is the gist of my response for non-2k reputation users:

There isn't a specific HTML tag dedicated to creating accordions.

You have to construct these "accordions" on your own. The simplest method would be to follow this W3Schools tutorial.

It involves three key elements:

HTML

You'll require a button and another div for the "dropdown" content. W3Schools refers to it as a panel. Assign unique classes to both elements to simplify future tasks.

CSS

While most CSS attributes are focused on aesthetics, there are two critical rules you must include:

For the button

width: 100%;

The button should occupy the entire width to prevent adjacent elements from disrupting the "dropdown" effect when the panel is opened.

For the panel

display: none;

Initially, the panel should remain hidden until triggered by clicking the button.

JavaScript

You need to set up an event listener (find more about events here in the MDN documentation) to respond to clicks on buttons with associated panels.

If all buttons with panels share a common class, you can iterate through them effortlessly. Within the event listener, toggle the active attribute and access the relevant panel.

let panel = this.nextElementSibling;

To adjust the visual state based on user actions:

  if (panel.style.display === "none") {
    panel.style.display = "block"; // Make it visible
  }
  else {
    panel.style.display = "none"; // Hide it again
  }
});

Additionally, you could modify the value of the aria-hidden attribute if needed (though omit it when employing display:none).

  if (panel.style.aria-hidden === "true") {
    panel.ariaHidden = "false"; // Make it visible for assistive technologies
  }
  else {
    panel.ariaHidden = "true"; // Conceal content from assistive technologies
  }
});

Here's a condensed version of the W3Schools tutorial code:

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.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

.accordion {
  width: 100%;
}

.panel {
  display: none;
}

<button class="accordion">Section 1</button>
<div class="panel">
  <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>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <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>
</div>

Creating a custom accordion with pure CSS, no need for Bootstrap or HTML

Answer №1

Update

HTML

CSS

JavaScript

Similar questions

Unable to use saved images with jQuery Slider

How to Retrieve the Absolute Index of the Parent Column Using jQuery Datatables

What are the different techniques for implementing React-Redux? Comparing Redux-thunk and Redux-Saga

Having trouble locating the correct JSON array syntax for Highcharts

Leveraging the wheelDelta property in the onmousewheel event handler with Script#

What is the correct way to load a column of images without affecting the readability of the text alongside them? (see image below)

Utilizing Ajax to send IP addresses and obtain location data

Using Angular JS for Traditional Multi-page Websites

"Uncovering the mystery of the missing element in Jquery's open

Change the React timer back to its original constant value

What is the best sequence for loading angularjs, bootstrap, sp js libraries, and jquery?

Is there a way to show uppercase values in Angular's tooltip as capital letters?

Having challenges retrieving information from MySQL in AngularJS

I'm struggling to understand the reasoning behind the 'undefined' error occurring in the Google Maps distance service

Generating and Importing Graphics through Iterations in Javascript

Ways to capture targeted requests

What is the best method for assigning a default value to the file input tag in HTML?

There seems to be an issue with the functionality of MongoDB's $where clause

Develop a responsive shopping cart using PHP and JavaScript

Error Message: Unable to Load User Profile Pictures from Microsoft Graph