How to make accordion on clear css without bootstrap and html?

Question

I can't build accordion on clear css

I have tried a lot of things, but I still can't do it

Answer 1

You can't.

In fact, you can't make pretty much anything without HTML (As for Bootstrap is 'just' a wrapper for HTML, CSS and JS.). HTML says where what element is, aka. places the content. CSS defines how it looks and behaves (for the latter, you also may need JavaScript).

An accordion in fact needs all three (See this question/answer.)

Update

As the other question is no longer available, here are the contents of my answer to that question for non 2k reputation user:

---

There isn't any specific HTML tag for that.

You need to build these "accordions" yourself. The easiest way would be this W3Schools tutorial.

There are three parts to it:

HTML

Here you need a button and another div the "dropdown"-content. W3Schools calls it a panel. Preferably, you give both a distinct class. This will make your work easier further down the line.

CSS

Most CSS just makes it look nice, but there are two CSS rules you actually need:

For the button

width: 100%;

You need the full width, so no other elements are next to it and destroy the "dropdown" effect when you open the panel.

For the panel

display: none;

You want to show the panel only when the button is clicked on, so you need to hide it initially.

JavaScript

You will need to add an event listener (more about events here in the MDN documentation) for the click action for each button that has a panel.

If you have a specific class for all button that have a panel, you can just iterate though all of them. For the event listener you define to toggle the active attribute. Then you get the panel next to the button.

let panel = this.nextElementSibling;

For that you switch the CSS rule we defined earlier:

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

Here is a shortened 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>