How to implement a simple accordion layout using HTML and CSS-HTML Tutorial-php.cn

How to implement a simple accordion layout using HTML and CSS

王林

Release： 2023-10-18 12:21:16

Original

2216 people have browsed it

How to implement a simple accordion layout using HTML and CSS

How to use HTML and CSS to implement a simple folding panel layout

The folding panel is one of the commonly used layouts in web design. It can fold a large amount of content The form is presented on the page, making the page structure clearer and more compact. This article will introduce in detail how to use HTML and CSS to implement a simple accordion panel layout, and provide specific code examples.

HTML structure design

First of all, we need to design a suitable HTML structure to implement the folding panel layout. The basic structure consists of a container that wraps the entire accordion panel, and multiple accordion items. Each accordion includes a title and a content section. The following is a basic HTML structure example:

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">折叠项1</div>
    <div class="accordion-content">折叠内容1</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">折叠项2</div>
    <div class="accordion-content">折叠内容2</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">折叠项3</div>
    <div class="accordion-content">折叠内容3</div>
  </div>
</div>

Copy after login

CSS style design

Next, we need to design the CSS style to achieve the effect of the folding panel. First define the container style of the entire folding panel:

.accordion {
  width: 100%;
}

Copy after login

Then define the style of the folding item, including the title and content part:

.accordion-item {
  margin-bottom: 10px;
}

.accordion-header {
  padding: 10px;
  background-color: #f0f0f0;
  cursor: pointer;
}

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

Copy after login

Add a click event on the title of the folding item to implement Folding and unfolding effects. When clicking on the title, you need to switch the display and hidden state of the content part:

.accordion-header {
  /* ... */
}

.accordion-header.active {
  background-color: #ccc;
}

.accordion-content {
  /* ... */
}

.accordion-content.active {
  display: block;
}

Copy after login

JavaScript Interaction Design

In order to achieve the dynamic effect of folding and expanding, we need to use some JavaScript code to handle click events. Here is a simple sample code:

var accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach(function(header) {
  header.addEventListener('click', function() {
    var accordionContent = this.nextElementSibling;
    this.classList.toggle('active');
    accordionContent.classList.toggle('active');
  });
});

Copy after login

With the above code, we add a click event listener to the title of each folded item. When the title is clicked, we use the classList.toggle method to switch the active class name of the title and content part, thereby achieving the effect of switching between display and hiding.

Integrate the code and test

Finally, integrate the HTML, CSS and JavaScript code together and test the effect in the browser. Make sure the HTML header includes CSS and JavaScript files.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>
<body>
  <!-- HTML结构代码 -->
</body>
</html>

Copy after login

The above is a detailed introduction and code example on how to use HTML and CSS to implement a simple folding panel layout. You can adjust the style and interaction design according to your own needs to create a folding panel layout that is more in line with your personalized requirements.

The above is the detailed content of How to implement a simple accordion layout using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!