{"id":3893,"date":"2023-01-24T03:15:05","date_gmt":"2023-01-24T03:15:05","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3893"},"modified":"2023-06-10T11:33:18","modified_gmt":"2023-06-10T11:33:18","slug":"react-js-faq-accordian-card","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/react-js-faq-accordian-card\/","title":{"rendered":"React JS &#8211; FAQ Accordian Card"},"content":{"rendered":"<div class=\"flex flex-grow flex-col gap-3\">\n<div class=\"min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap\">\n<div class=\"markdown prose w-full break-words dark:prose-invert light\">\n<p>ReactJS is an open-source JavaScript library that is used for building user interfaces and single-page applications. It was developed by Facebook and is now maintained by Facebook and a community of developers.<\/p>\n<p>A FAQ Accordion Card is a user interface element that is used to display a list of frequently asked questions and their answers. The Accordion Card typically consists of a series of questions or headings that can be clicked or tapped to reveal their corresponding answers or content. The Accordion Card is an efficient and user-friendly way of presenting a lot of information in a small amount of space.<\/p>\n<p>In ReactJS, you can build an FAQ Accordion Card using components and state management. The Accordion Card can be built as a single reusable component that can be used multiple times throughout your application. When a user clicks on a question or heading, the state of the component changes to reveal the answer or content associated with that question. This creates a smooth and interactive user experience that is easy to navigate.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"su-row\">\n<div class=\"su-column su-column-size-1-2\"><div class=\"su-column-inner su-u-clearfix su-u-trim\"><div class=\"su-button-center\"><a href=\"https:\/\/github.com\/ALapina\/FAQ-Accordion-Card-React\" class=\"su-button su-button-style-glass su-button-wide\" style=\"color:#FFFFFF;background-color:#CD1110;border-color:#a40e0d;border-radius:50px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#FFFFFF;padding:8px 24px;font-size:18px;line-height:27px;border-color:#dc5958;border-radius:50px;text-shadow:1px 1px 1px #000000\"><i class=\"sui sui-github-square\" style=\"font-size:18px;color:#FFFFFF\"><\/i> Github Page<\/span><\/a><\/div><\/div><\/div>\n<div class=\"su-column su-column-size-1-2\"><div class=\"su-column-inner su-u-clearfix su-u-trim\"><\/div><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>ReactJS is an open-source JavaScript library that is used for building user <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/react-js-faq-accordian-card\/\" title=\"React JS &#8211; FAQ Accordian Card\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3894,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[469,458,103,392],"newstopic":[],"class_list":{"0":"post-3893","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-faq-accordian-card","9":"tag-react-js","10":"tag-web-design","11":"tag-web-design-2023"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3893","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3893"}],"version-history":[{"count":3,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3893\/revisions"}],"predecessor-version":[{"id":3987,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3893\/revisions\/3987"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3894"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3893"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3893"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3893"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}