Building Responsive Accordion Interfaces

Introduction

In this project, you will learn how to create a simple folding accordion using HTML, CSS, and JavaScript. The folding accordion is a common UI element that allows users to expand and collapse content sections, making it a useful feature for displaying information in a compact and organized manner.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to set up the HTML structure for the folding accordion
• How to style the accordion using CSS
• How to add interactivity to the accordion using JavaScript

🏆 Achievements

After completing this project, you will be able to:

• Create a responsive and visually appealing accordion interface
• Use JavaScript to add interactivity and dynamic behavior to web elements
• Integrate HTML, CSS, and JavaScript to build a functional and user-friendly web component

Set Up the Project Structure

In this step, you will set up the project by opening the provided files in the editor.

1. Open the editor and you should see the following files: index.html, style.css, index.js, and jquery-3.6.0.min.js.
2. Click on Go Live button in the bottom right corner of WebIDE, to run the project.
3. Open "Web 8080" on the top of the VM and manually refresh it to see the page. Clicking on an image on a page that is collapsed does not expand it. You can see it as follows:

Add Interactivity with jQuery

In this step, you will add interactivity to the accordion using jQuery.

1. Open the index.js file in your editor.
2. Add the following code:

$(".option").click(function () {
  $(".option").removeClass("active");
  $(this).addClass("active");
});

This code adds a click event listener to each .option element. When an .option is clicked, the code removes the active class from all .option elements and adds the active class to the clicked .option element. This will collapse or expand the accordion as needed.

3. Save the index.js file.
4. Refresh the browser to see the finished result.
5. Click on the different accordion options to see them expand and collapse.

The effect looks like this:

Congratulations! You have completed the folding accordion project.

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.