faq breadcrumb added, faq layout changed

public/index.html

@@ -55,9 +55,6 @@
     <!--
       need jv8
     -->
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   </body>
   <script>var LHC_API = LHC_API||{};
     LHC_API.args = {mode:'widget',lhc_base_url:'//chat.live.wrenchboard.com/',wheight:450,wwidth:350,pheight:520,pwidth:500,leaveamessage:true,check_messages:false};

src/assets/css/main.css

@@ -8229,3 +8229,71 @@ blockquote cite {
 }
 
 /*# sourceMappingURL=style.css.map */
+
+/* CSS FOR FAQ ACCORDION DISPLAY */
+.accordion-con{
+  background-color: #f5f6f7;
+}
+
+.accordion-item{
+  position: relative;
+  overflow: hidden;
+  /* z-index: 1; */
+  border-radius: 5px;
+  box-shadow: 0px 0px 15px #ddd;
+  padding: 10px;
+  background-color: #fff;
+}
+.accordion-title-bar{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+}
+.accordion-title p {
+  font-weight: 600;
+}
+
+.accordion-title-icon{
+  position: absolute;
+  right: 5px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.accordion-title-icon img{
+  width: 20px;
+  height: 20px;
+  margin-top: 2px;
+}
+.horizontal{
+  transition: all .5s;
+  display: flex;
+  align-items: center;
+  background-color: skyblue;
+  color: #fff;
+  border-radius: 999px;
+  padding: 2px 3px;
+}
+.vertical{
+  transform: rotate(180deg);
+  background-color: #4687ba;
+}
+
+.accordion-body-hide{
+  position: relative;
+  height: 0;
+  visibility: hidden;
+  transition: all .5s;
+}
+.accordion-body-show{
+  position: relative;
+  /* height: 100px; */
+  visibility: visible;
+  transition: all .5s;
+  /* animation-name: slidedown;
+  animation-timing-function: linear;
+  animation-duration: .5s;
+  animation-fill-mode: forwards; */
+}

src/components/FAQ/Index.js

@@ -1,12 +1,12 @@
 import React, { useEffect } from 'react';
 import useToggle from '../../Hooks/useToggle';
 import Drawer from '../Mobile/Drawer';
-import HeaderService from '../Service/HeaderService';
-import HeroService from '../Service/HeroService';
 import FooterHomeOne from '../HomeOne/FooterHomeOne';
 import BackToTop from '../BackToTop';
 import StickyMenu from '../../lib/StickyMenu';
 import FAQService from '../Service/FAQServices';
+import HeroNews from '../News/HeroNews';
+import HeaderNews from '../News/HeaderNews';
 
 
 function FAQ() {
@@ -17,8 +17,14 @@ function FAQ() {
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
-            <HeaderService action={drawerAction.toggle} />
-            <HeroService title="Frequently asked questions" />
+            <HeaderNews action={drawerAction.toggle} />
+            <HeroNews
+                title="Frequently asked questions"
+                breadcrumb={[
+                    { link: '/', title: 'home' },
+                    { link: '/faq', title: 'Faq' },
+                ]}
+            />
             <FAQService />
             <FooterHomeOne />
             <BackToTop />

src/components/Service/FAQServices.js

@@ -1,16 +1,24 @@
 import React, { useEffect, useState } from 'react';
-import thumb from '../../assets/images/service-page.jpg';
 import ServiceSideMenu from './ServiceSideMenu';
-import getConfig from './../../Config/config'
 import {Link} from 'react-router-dom'
 import FaqData from '../../Services/FaqData';
+import Arrow from '../../assets/images/arrow-down.png'
 
 function FAQService() {
+    const [isOpen, setOpen] = React.useState({type: 'faq0'});
+    const accordionHandler = (name) => {
+      setOpen(prev => {
+        if(prev.type == name){
+            return {type: ''}
+        }else {
+            return {type: name}
+        }
+      });
+    };
     let [faq, setFaq] = useState([])
 
     useEffect(()=>{
         FaqData().then(res => {
-            console.log(res)
             setFaq(res.data.result_list)
         }).catch(err => {
             console.log('You got an error ========> '+ err)
@@ -25,32 +33,37 @@ function FAQService() {
                         <div className="col-lg-4">
                             <ServiceSideMenu />
                         </div>
-                        <div className="col-lg-8">
-                            <div className="service-details-content">
+                        <div className="col-lg-8 accordion-wrapper">
+                            <div className="p-3 service-details-content accordion-con">
                                 <div className="container-fluid">
-                                    <h3>Frequently asked questions</h3>
+                                    <h3 className='p-3 text-center'>Frequently asked questions</h3>
                                 </div>
-                                <div class="accordion" id="accordionExample">
-                                    {faq.map((item, index)=>(
-                                        <div key={index} class="card">
-                                            <div class="card-header" id={`heading${index}`}>
-                                                <h2 class="mb-0">
-                                                    <button class="btn btn-block text-left" type="button" data-toggle="collapse" data-target={`#collapse${index}`} aria-expanded="true" aria-controls={`collapse${index}`}>
-                                                    {item.title}
-                                                    </button>
-                                                </h2>
-                                            </div>
-    
-                                            <div id={`collapse${index}`} class={`${index > 0 ? 'collapse' : 'collapse show'}`} aria-labelledby={`heading${index}`} data-parent="#accordionExample">
-                                            <div class="card-body">
-                                                {item.msg}
-                                            </div>
-                                            </div>
-                                        </div>
-                                    ))}
+                                <div className='row'>
+                                    <div class="col-12 col-lg-6 accordion" id="accordionExample">
+                                        {faq.map((item, index)=>{
+                                            if(index%2 == 0){
+                                                return(
+                                                <div key={index} className='my-3'>
+                                                    <Accordion name={`faq${index}`} datas={item} accordionHandler={accordionHandler} isOpen={isOpen} />
+                                                </div>
+                                                )
+                                            }
+                                        })}
+                                    </div>
+                                    <div class="col-12 col-lg-6 accordion" id="accordionExample">
+                                        {faq.map((item, index)=>{
+                                            if(index%2 != 0){
+                                                return(
+                                                <div key={index} className='my-3'>
+                                                    <Accordion name={`faq${index}`} datas={item} accordionHandler={accordionHandler} isOpen={isOpen} />
+                                                </div>
+                                                )
+                                            }
+                                        })}
+                                    </div>
                                 </div>
                                 <div className='container-fluid text-center'>
-                                    <p className='my-2'>Can't find an answer <Link to='/contact'>contact us</Link> </p>
+                                    <p className='my-4'>Can't find an answer <Link to='/contact'>contact us</Link> </p>
                                 </div>
                             </div>
                         </div>
@@ -61,4 +74,42 @@ function FAQService() {
     );
 }
 
-export default FAQService;
+export default FAQService;
+
+export function Accordion({ datas, name, accordionHandler, isOpen }) {
+    // const [isOpen, setOpen] = React.useState(false);
+    // const accordionHandler = () => {
+    //   setOpen(!isOpen);
+    // };
+    return (
+      <>
+        <div className="accordion-item">
+          <div
+            className="accordion-title-bar container-fluid"
+            onClick={()=>{accordionHandler(name)}}
+          >
+            <div className="accordion-title">
+              <p className="">
+                {datas.title}
+              </p>
+            </div>
+            <div className="accordion-title-icon">
+              <span className={`horizontal ${isOpen.type == name ? 'vertical' : ''}`}>
+                <img className="" src={Arrow} />
+              </span>
+            </div>
+          </div>
+          <div className={`${isOpen.type == name ? "accordion-body-show" : "accordion-body-hide"}`}>
+            <div className="accordion-body-content" style={{display: 'flex', padding: '10px'}}>
+              <div className="rounded-[28px]" style={{width: '3px', backgroundColor: 'skyblue'}}></div>
+              <div className="flex-1">
+                <p className="" style={{padding: '0px 10px', letterSpacing:'.5px'}}>
+                  {datas.msg}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }