You can create an accordion using HTML, CSS, and JavaScript. Here is an example code for creating an accordion:

HTML Code:

html
 
 
Copy code
<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">
      Item 1
      <span class="icon">&#x25B6;</span>
    </div>
    <div class="accordion-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan neque condimentum leo interdum, et gravida orci porttitor. 
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">
      Item 2
      <span class="icon">&#x25B6;</span>
    </div>
    <div class="accordion-content">
      Aliquam erat volutpat. In a odio eu lacus varius malesuada. Nulla eu facilisis felis. Integer eu magna vel risus tincidunt aliquet. 
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">
      Item 3
      <span class="icon">&#x25B6;</span>
    </div>
    <div class="accordion-content">
      Curabitur varius magna in mauris mattis, ut sagittis orci sagittis. In vitae elementum tellus. Fusce sed venenatis ipsum, in congue quam. 
    </div>
  </div>
</div>

CSS Code:

css
 
 
Copy code
.accordion {
  width: 100%;
}

.accordion-item {
  background-color: #fff;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}

.accordion-header {
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-content {
  display: none;
  padding: 10px;
}

.icon {
  font-size: 20px;
  margin-left: auto;
  transform: rotate(90deg);
  transition: all 0.2s ease;
}

.open .icon {
  transform: rotate(0);
}

JavaScript Code:

javascript
 
 
Copy code
const accordionItems = document.querySelectorAll(".accordion-item");

accordionItems.forEach(item =>
  item.addEventListener("click", () => {
    const isItemOpen = item.classList.contains("open");
    accordionItems.forEach(item => item.classList.remove("open"));
    if (!isItemOpen) {
      item.classList.toggle("open");
    }
  })
);

Explanation:

1. The first step is to create a container div with a class of 'accordion'.
2. Add an accordion item div for each item in the accordion.
3. Each accordion item consists of a header and content.
4. The header contains text and a span element with a class of 'icon'.
5. The 'icon' class contains an arrow symbol that is rotated when the accordion item is clicked.
6. The content is hidden by default.
7. The CSS styles for the accordion and its contents are defined in the styles.
8. The JavaScript code adds a click event listener to each accordion item.
9. When an accordion item is clicked, the script checks if it is already open.
10. If the accordion item is open, the script removes the 'open' class.
11. If the accordion item is closed, the script toggles the 'open' class, which opens its content.

Yes, you can build an accordion without using JavaScript. For example, you can use CSS to create the accordion without needing to use any JavaScript code. See the example here.

css
 
 
Copy code
/* Style the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.5s;
}