Hi there 🖐️

Collapsible FAQ

Table of Contents

1. General Information
2. Code Explanation
3. Video
4. FAQs
5. Contact

General Information


This project is an expandable FAQ (Frequently Asked Questions) web page that includes two HTML files, one in Spanish and one in English, and a JavaScript file called app.js. The web page has a header with a title "FAQs" and a language change function, allowing users to select their preferred language. The main content of the page consists of a series of questions and answers organized in an FAQ format.

The app.js file is responsible for the functionality of the page, allowing users to expand and contract the answers of each question through a button with an arrow icon. Additionally, the CSS file, generated from an SCSS file, provides the visual design of the page.

In summary, this project is a functional and expandable FAQ web page that allows users to select their preferred language and access information in an organized and accessible way.

DEMO (click aqui)


Code Explanation


The code for the collapsible FAQ project is a combination of HTML, CSS, and JavaScript that allows for creating a frequently asked questions section with hidden answers. When the user clicks on a question, the corresponding answer expands and is displayed in a collapsible block.

The HTML code provides the basic structure of the page, where the question titles and corresponding answers are located.

CSS is used to style the page, including the design of the question and answer blocks, font size, colors, etc.

Finally, JavaScript makes the collapsible effect work. When a question title is clicked, the JavaScript code takes the corresponding action and shows or hides the corresponding answer.


Video


collapsible-faq.mp4

FAQs


Frequently Asked Questions

1. What is the collapsible FAQ project?

- The collapsible FAQ project is a question and answer system where answers can be hidden or shown by clicking on the corresponding question.

2. What technologies were used to develop the project?

- HTML, CSS, and JavaScript were used to develop the project.

3. How does the collapse system work in the collapsible FAQ project?

- When a user clicks on a question, the corresponding answer is displayed or hidden through a change in the CSS class of the answer.

4. How can I customize the design of the questions and answers in the collapsible FAQ project?

- You can modify the CSS file to customize the design of the questions and answers.

5. How can I add more questions and answers to the collapsible FAQ project?

- You can add more questions and answers to the HTML file, following the format established in the existing questions and answers.


Contact


kevincastellanos

LinkedIn Github

Mas proyectos en:

Github