FAQ component
Submit a solution
Connect your GitHub account to submit a solution
Community solutions
FAQ component
Create a re-usable "Frequently Asked Questions" component
React Solution using <dl>
A custom <details> component that allows for granular control over default open and close states while mapping over an array of FAQs. It also has animations when opening and closing said FAQs.
FAQ Component through JS
Made a component in JS without much touching the html.
basic solution
quick
FAQ Component - Vanilla JS
FAQ Component using Vanilla JS
FAQ component built using React
Code Link : https://codesandbox.io/p/sandbox/faq-component-yxsg32
FAQ Component
I work with HTML, CSS and JS.
FAQ component - React template
Helps in building logic.
FAQ Component | React | Multiple Component | Easy to Understand
Built in react with basic css, a FAQ (Accordion component).
Vanilla JS
Accessible vanilla JS solution.
FAQ Component
FAQ Component in React
FAQ Component
FAQ Component in React
React FAQ Component
The FAQ component you're asking about is designed to display a list of frequently asked questions (FAQs), where each question can be clicked to reveal or hide the associated answer. The component has interactive features, such as toggling the visibility of the answer and rotating an arrow icon to in
FAQ component
FAQ Component by React
FAQ Component
React FAQ Component
FAQ component
React
Roee FAQ component
Simple
FAQ - Vanilla JS Solution
A simple ES6 solution for a FAQ component.
faq
This is what is develped
FAQ component using React
This component created using React completing all the mentioned challenges. This does not have the chevron.
FAQ Accordion
Reusable FAQ Accordion along with all challenges
FAQ
check
FAQ component (vanilla JS)
Simple FAQ accordion using Bootstrap and vanilla JS
Simple FAQ Question
Simple FAQ Question
FAQComponent implementation
Straightforward execution of the FAQComponent with toggle functionality
FAQ component with react.js
This is a simple Faq component made with react and using simple css to understand react and enhance my react.js skills
FAQComponent
I have implemented the solution but at the useState import it is giving some unknown error that I could not resolve. But I checked the code in VS code it is working
FAQ COMPONENT (Vanilla JS)
FAQ COMPONENT in Vanilla JS https://aniketsinha2002.github.io/Javascript-and-API-practices/faq-component/
FAQ component
this solution is not properly styled but the functionalities asked are completed
no library used
This is done in quickly and do I tried not to check anything from the internet
FAQ Component
Vanilla JS
FAQ Component using Vanilla JS
Simple solution
FAQ-component
i created this faq component using reactJS and normal css for styling, i used 2 react icons from react icons.
FAQ REACT
this is very easy
FAQ component Solution
sample solution using useState
React Typescript, Fetch-abortController, Dynamic Pagination
https://codesandbox.io/p/sandbox/adoring-currying-3rmd28
FAQ Component
Reusable and extendable component
FAQ Component
Re-usable and extendable component
FAQ Component
--
FAQ Component
Reusable and extendable
FAQ component React solution
Tried a React version after doing a Vanilla JS version.
A bit rusty
Simple solution with vanilla JS.
React Solution
My take on this question, including its 2 sub-challenges
FAQ With Hotkeys
FAQ With Hotkeys. Using React and Recoil
React Solution - No useEffect hook used. React icons imported.
This is my solution using React. I have seen some React solutions using useEffect when it is in my opinion not actually necessary, so I wanted to show my implementation using just the useState hook. I also imported and used React icons for the toggle icon.
React FAQ
No fancy. Very basic styling. Tailwind css/Vite/React/Ts
FAQ component
a re-usable "Frequently Asked Questions" component
FAQ Components
Pure Vanilla JS, HTML, CSS
FAQ Component Using React
Used the CSS grid trick to add a smooth transition to the opening and closing of the FAQ.
FAQ component using native Javascript
Created a simple FAQ section using simple HTML, CSS and Javascript
React Hooks w imported react-icons
This solution utilizes React's useState and useEffect hooks, the map function to render the array of FAQs, and icons imported via skypack from the react-icons package.
Vanilla JS FAQ Component:
The Vanilla JavaScript FAQ component offers a lightweight, customizable, and accessible solution for displaying Frequently Asked Questions on websites. Built without external libraries, it features a collapsible design, easy integration, and responsiveness for seamless user experience. Simply custom
FAQ component - React
React + Basic CSS styling
Solution Found
I used fontawesome for the icon arrows and pure js
FAQ Component Submission
Used TailwindCSS + React, didn't use any animations
FAQ component
FAQ component using vanilla javascript
solution
faq react
solution
faq using react
FAQ comp
round 2
FAQ component
"Discover my latest project, a finely tuned FAQ Component that showcases my expertise in front-end development. This component elegantly presents frequently asked questions, offering users an intuitive and responsive interface to find answers effortlessly.
faq
using vanilla js
Solution - React
React based simple solution - no styling
FAQ component React
FAQ component React
FAQ Component Tab using Vanilla JS
FAQ component tab created with Vanilla JS, HTML and CSS
FAQ Component
with individual card open/close feature
FAQ Component
with only one question open feature
FAQ component
Only styling is left
FAQ component
component made using vanilla js , html and css
FAQ component
Simplest built
FAQ component -Made with react
FAQ component -Made with react
FAQ component with Reactjs
FAQ component with Reactjs
FAQ component with Reactjs
FAQ component with Reactjs
FAQ Component Solution
Simple implementation using built-in HTML elements <details> and <summary>
FAQ component
Easy to understand solution using Vanilla JS. It's reusable.
My Solution for "FAQ component"
Create an element by destructuring each FAQ key-value pairs. Using Event Delegation technique for attach a click event handler, is a technique in JS where you attach a single event handler to a parent element, instead of individual handlers to its child elements.
Using HTML Details/Summary Element (no extra state needed)
Instead of storing the toggle a show/hide state, I just used the HTML5. details/summary elements which have this functionality built-in
With Array.fill( ) method and useState
Created using Array.fill( ) method and useState hook in React
Vanilla JS Solution
A reusable, minimally-styled vanilla JavaScript FAQ component.
react faq solution
- Able to toggle question to hide/show answer - First question is open by default - Does not contain correct chevron icon - Did not include too much styling
Simple solution without proper icon
SImple react solution
React solution
React solution with useState, simple css
React solution without css
First render questions component using a map function Create a new single-question component with question, answer, index State: isExpanded (useState) inside the single-question component
React solution
100% working and easy code
React working solution
Answer 1 showing by default, with transition animation
FAQ Component
FAQ Component using vanilla JavaScript
FAQ component
FAQ component with vanilla javascript
FAQ Component in plain JS
Haven't used vanilla JS for a good while so I figured I'd go with just JS to rehearse instead of React.
FAQ-VanillaJs Simple Component
FAQ-VanillaJs Simple Component
Vanilla JS Solution
Basic solution
FAQ component
I created this with React. I felt really puzzled while implementing the condition the first question should be visible by default. I tried two different state, first to keep others as false and the other to maintain state of first component.
FAQ component
My solution for FAQ component
FAQ react page
using react and reused component for render q&a
Vanilla JS FAQ
Vanilla JS implementation of the FAQ component
React solution
Done with react.
Simple dark mode FAQ component
Made using HTML, CSS, Vanilla JS
FAQ Component
Built using React and CSS. Didn't get the smooth animation transition working yet, but the other stuff is.
first attempt. WIP
not finished, but pretty close. works
FAQ Component
I have built using Vanilla JS , HTML and CSS.
Done it
-
FAQ component
FAQ component in react
FAQ component
FAQ component in React
React + SCSS (no transition/animation)
FAQ Component using React template, SCSS, useState(). Adding a transition/animation is a bit tricky with my implementation so I didn't do try much, but I assume if my click handler instead changed height and visibility of the answer, then I could add a transition. I'm lazy right now though
FAQ component
Used Pure Vanilla JavaScipt, HTML, CSS and HTML icons
React FAQ
React FAQ
FAQ component using Vanilla JS
No styling. Simple html and javascript.
FAQ component
Uses semantic tags
FAQ
Uses semantic tags.
Simple solution using details and summary
This solution uses the <details> and <summary> tags to work natively without JavaScript.
FAQ Component
Vanilla JS. Opening a question closes other questions. Opening/closing is animated using CSS transitions.
the most simplest FAQ Vanilaa javascript
My arrow is not rotating on click; I need help with that
Quick Vanilla JS Solution
Quick solution in vanilla JS, CSS, and HTML. Handles both additional challenges as well.
Super easy solution using details and summary tags
Super easy solution using details and summary tags
FAQ Component
Here is my FAQ Component
Minimal Solution
Its a very basic solution but all areas covered
FAQ Component in React
Inside <FAQComponent /> it maps through the data to create a <Collapsible /> component for each, and also passes the index of each object. Inside the <Collapsible /> there is a <details> with a <summary> as the question. And the hidden <details> is the answer. Details is open if index is 0.
FAQ Component
I have created component in react and used css selectors to toggle the accordion content.
FAQ Component in React
I used another component to render the answer if state is active
FAQ component (CSS only)
Used React only for injecting a dynamic number of questions. The chevron is actually a restyled checkbox, and the open/close mechanism is based on the checked state. Design inspired by https://uxdesign.cc/ui-cheat-sheet-accordions-3e88f0d4dfee
FAQ React
A react component that generates FAQ by mapping the values in the object
FAQ Component
VanillaJS
FAQ react component
React component that generates FAQ cards by mapping over an array of objects. The current card open is managed by tracking the mapped idx with an onClick handler
FAQ React
I created an accordion component that spews out the FAQ content into the FAQ component
FAQ Component OOJS
FAQ Component OOJS
FAQ component React
React component with HTML details and summary tag.
FAQ component React
React component with HTML details and summary tag.
FAQ Solution Vanilla JS
FAQ Solution Vanilla JS
FAQ component: React Component with State
FAQ component: React Component with State
FAQ Component - React
React component with html details item
FAQ component - Vanilla JS
FAQ component with questions/answers toggle
Vanilla Javascript quick as possible
Just the quickest implementation I could make.
FAQ component as a Web Component
Solution of the list as a self contained web component.
FAQ component with React
Create a re-useable FAQ component with React.
FAQ component with HTML, CSS, and Javascript
Using a function renderFAQ to take in questions and answers to create DOM elements and render.
FAQ component
solution for FAQ component
FAQ Component
Create a re-usable "Frequently Asked Questions" component
