Plain FAQ list

Frequently ask Question with arrow

HTML

<section class="ezy__faq13" id="ezy__faq13">
  <div class="container">
    <div class="row ezy__faq13-separator justify-content-center">
      
      <div class="col-md-10 text-center mb-5">
        <h3 class="ezy__faq13-heading">Frequently asked questions</h3>
        <p class="ezy__faq13-sub-heading">Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
      </div>
      

      <div class="col-12 position-relative py-5">
        <div class="row position-absolute">
          <div class="col-sm-6">
            <img src="https://cdn.easyfrontend.com/pictures/faq/faq13.png" alt="" />
          </div>
        </div>
        <div class="row justify-content-end">
          <div class="col-12 col-lg-6">
            
            <div class="ezy__faq13-faq-group">
              <div class="ezy__faq13-each-faq open">
                <a class="ezy__faq13-faq-trigger" href="#">
                  <h4 class="ezy__faq13-title">How do I change my password?</h4>
                </a>
                <div class="ezy__faq13-content">
                  <p>
                    In auctor orci vitae ipsum euismod, vitae porta metus viverra. Ut facilisis luctus interdum.
                    Cras et facilisis odio. Etiam imperdiet tincidunt metus id luctus. Sed ut pellentesque lectus.
                    Praesent dignissim blandit risus vitae tempus.
                  </p>
                </div>
              </div>
              
              <div class="ezy__faq13-each-faq">
                <a class="ezy__faq13-faq-trigger" href="#">
                  <h4 class="ezy__faq13-title">How do I sign up?</h4>
                </a>
                <div class="ezy__faq13-content">
                  <p>
                    In auctor orci vitae ipsum euismod, vitae porta metus viverra. Ut facilisis luctus interdum.
                    Cras et facilisis odio. Etiam imperdiet tincidunt metus id luctus. Sed ut pellentesque lectus.
                    Praesent dignissim blandit risus vitae tempus.
                  </p>
                </div>
              </div>
              
              <div class="ezy__faq13-each-faq">
                <a class="ezy__faq13-faq-trigger" href="#">
                  <h4 class="ezy__faq13-title">Can I remove a post?</h4>
                </a>
                <div class="ezy__faq13-content">
                  <p>
                    In auctor orci vitae ipsum euismod, vitae porta metus viverra. Ut facilisis luctus interdum.
                    Cras et facilisis odio. Etiam imperdiet tincidunt metus id luctus. Sed ut pellentesque lectus.
                    Praesent dignissim blandit risus vitae tempus.
                  </p>
                </div>
              </div>
              
              <div class="ezy__faq13-each-faq">
                <a class="ezy__faq13-faq-trigger" href="#">
                  <h4 class="ezy__faq13-title">How do reviews work?</h4>
                </a>
                <div class="ezy__faq13-content">
                  <p>
                    In auctor orci vitae ipsum euismod, vitae porta metus viverra. Ut facilisis luctus interdum.
                    Cras et facilisis odio. Etiam imperdiet tincidunt metus id luctus. Sed ut pellentesque lectus.
                    Praesent dignissim blandit risus vitae tempus.
                  </p>
                </div>
              </div>
              
            </div>
            
          </div>
        </div>
        
      </div>
      
    </div>
    
  </div>
  
</section>

<script>
(function ($) {
  "use strict";
  var faq = $(".ezy__faq13-faq-group");

  faq.find(".ezy__faq13-each-faq").each(function () {
    if (!$(this).hasClass("open")) {
      $(this).find(".ezy__faq13-content").hide();
    }
  });

  faq.find(".ezy__faq13-faq-trigger").on("click", function (el) {
    el.preventDefault();

    var openFaq = $(this).closest(".ezy__faq13-each-faq");

    openFaq.toggleClass("open").find(".ezy__faq13-content").slideToggle(300);
    openFaq.siblings(".ezy__faq13-each-faq:visible").each(function () {
      $(this).removeClass("open").find(".ezy__faq13-content").slideUp(300);
    });
  });
})(jQuery);
</script>

<style>
.ezy__faq13 {
  --bs-body-color: rgb(50, 62, 80);
  --bs-body-bg: #ffffff;

  /* Easy Frontend variables */
  --ezy-theme-color: rgb(13, 110, 253);
  --ezy-theme-color-rgb: 13, 110, 253;
  --ezy-card-bg: #f6f6f6;
  --ezy-card-box-shadow: 0 21px 65px 0 rgba(0, 0, 0, 0.12);

  background-color: var(--bs-body-bg);
  overflow: hidden;
}

/* Gray Block Style */
.gray .ezy__faq13,
.ezy__faq13.gray {
  /* Bootstrap variables */
  --bs-body-bg: rgb(246, 246, 246);
}

/* Dark Gray Block Style */
.dark-gray .ezy__faq13,
.ezy__faq13.dark-gray {
  /* Bootstrap variables */
  --bs-body-color: #ffffff;
  --bs-body-bg: rgb(30, 39, 53);

  /* Easy Frontend variables */
  --ezy-card-bg: rgb(11, 23, 39);
  --ezy-card-box-shadow: 0 10px 10px 0 rgba(27, 27, 27, 0.25);
}

/* Dark Block Style */
.dark .ezy__faq13,
.ezy__faq13.dark {
  /* Bootstrap variables */
  --bs-body-color: #ffffff;
  --bs-body-bg: rgb(11, 23, 39);

  /* Easy Frontend variables */
  --ezy-card-bg: rgb(30, 39, 53);
  --ezy-card-box-shadow: 0 10px 10px 0 rgba(46, 46, 46, 0.25);
}

.ezy__faq13-heading {
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: var(--bs-body-color);
}

@media (min-width: 768px) {
  .ezy__faq13-heading {
    font-size: 40px;
    line-height: 1.3;
  }
}

.ezy__faq13-sub-heading {
  font-size: 17px;
  color: var(--bs-body-color);
  opacity: 0.8;
}

.ezy__faq13-separator {
  padding: 100px 0 0;
}

.ezy__faq13-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: var(--bs-body-color);
  opacity: 0.9;
  margin-bottom: 0;
}

.ezy__faq13-each-faq {
  background-color: var(--ezy-card-bg);
  margin-bottom: 10px;
  transition: all 0.4s ease-out;
  position: relative;
  padding: 10px;
}

.ezy__faq13-each-faq.open {
  box-shadow: var(--ezy-card-box-shadow);
  padding: 20px;
}

.ezy__faq13-faq-trigger,
.ezy__faq13-content {
  padding: 10px;
  text-decoration: none;
}

.ezy__faq13-faq-trigger {
  display: block;
}

.ezy__faq13-content,
.ezy__faq13-content * {
  font-size: 16px;
  line-height: 1.5;
  color: var(--bs-body-color);
  opacity: 0.8;
}

.ezy__faq13-content p:last-child {
  margin-bottom: 0px;
}
</style>

Bootstrap

<section class="ezy__faq13 bg-white dark:bg-[#0b1727] text-zinc-900 dark:text-white overflow-hidden">
      <div class="container px-16 md:px-8 lg:px-28">
        <div class="grid grid-cols-12 pt-24 justify-center">
          <div class="col-span-12 md:col-span-10 md:col-start-2 text-center mb-12">
            <h3 class="text-[32px] font-semibold leading-none md:text-[40px] md:leading-tight">
              Frequently asked questions
            </h3>
            <p class="text-[17px] opacity-80">Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
          </div>

          <div class="col-span-12 relative py-12">
            <div class="grid grid-cols-12 absolute">
              <div class="col-span-12 sm:col-span-6">
                <img src="https://cdn.easyfrontend.com/pictures/faq/faq13.png" alt="" />
              </div>
            </div>

            <div class="grid grid-cols-12 justify-end">
              <div class="col-span-12 lg:col-span-6 lg:col-start-7">
                <div class="ezy__faq13-faq-group">
                  <div class="bg-gray-50 mb-2 relative p-5 shadow dark:shadow-none dark:bg-[#1E2735] active">
                    <a class="p-3 block" href="#">
                      <h4 class="text-lg font-semibold leading-none opacity-90">How do I change my password?</h4>
                    </a>
                    <div>
                      <p class="leading-normal opacity-70">
                        In auctor orci vitae ipsum euismod, vitae porta metus viverra. Ut facilisis luctus interdum.
                        Cras et facilisis odio. Etiam imperdiet tincidunt metus id luctus. Sed ut pellentesque lectus.
                        Praesent dignissim blandit risus vitae tempus.
                      </p>
                    </div>
                  </div>
                  <div class="bg-gray-50 dark:bg-[#1E2735] mb-2 relative p-3">
                    <a class="p-3 block" href="#">
                      <h4 class="text-lg font-semibold leading-none opacity-90">How do I sign up?</h4>
                    </a>
                    <div class="hidden">
                      <p class="leading-normal opacity-70">
                        In auctor orci vitae ipsum euismod, vitae porta metus viverra. Ut facilisis luctus interdum.
                        Cras et facilisis odio. Etiam imperdiet tincidunt metus id luctus. Sed ut pellentesque lectus.
                        Praesent dignissim blandit risus vitae tempus.
                      </p>
                    </div>
                  </div>
                  <div class="bg-gray-50 dark:bg-[#1E2735] mb-2 relative p-3">
                    <a class="p-3 block" href="#">
                      <h4 class="text-lg font-semibold leading-none opacity-90">Can I remove a post?</h4>
                    </a>
                    <div class="hidden">
                      <p class="leading-normal opacity-70">
                        In auctor orci vitae ipsum euismod, vitae porta metus viverra. Ut facilisis luctus interdum.
                        Cras et facilisis odio. Etiam imperdiet tincidunt metus id luctus. Sed ut pellentesque lectus.
                        Praesent dignissim blandit risus vitae tempus.
                      </p>
                    </div>
                  </div>
                  <div class="bg-gray-50 dark:bg-[#1E2735] mb-2 relative p-3">
                    <a class="p-3 block" href="#">
                      <h4 class="text-lg font-semibold leading-none opacity-90">How do reviews work?</h4>
                    </a>
                    <div class="hidden">
                      <p class="leading-normal opacity-70">
                        In auctor orci vitae ipsum euismod, vitae porta metus viverra. Ut facilisis luctus interdum.
                        Cras et facilisis odio. Etiam imperdiet tincidunt metus id luctus. Sed ut pellentesque lectus.
                        Praesent dignissim blandit risus vitae tempus.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>



Tailwind CSS

React JS

import React, { useState } from "react";
import { Col, Collapse, Container, Row } from "react-bootstrap";
import PropTypes from "prop-types";
import classNames from "classnames";

const faqList = [
	{
		isActive: true,
		question: "How do I change my password?",
		answer:
			"In auctor orci vitae ipsum euismod, vitae porta metus viverra. Ut facilisis luctus interdum. Cras et facilisis odio. Etiam imperdiet tincidunt metus id luctus. Sed ut pellentesque lectus. Praesent dignissim blandit risus vitae tempus.",
	},
	{
		isActive: false,
		question: "How do I sign up?",
		answer:
			"In auctor orci vitae ipsum euismod, vitae porta metus viverra. Ut facilisis luctus interdum. Cras et facilisis odio. Etiam imperdiet tincidunt metus id luctus. Sed ut pellentesque lectus. Praesent dignissim blandit risus vitae tempus.",
	},
	{
		isActive: false,
		question: "Can I remove a post?",
		answer:
			"In auctor orci vitae ipsum euismod, vitae porta metus viverra. Ut facilisis luctus interdum. Cras et facilisis odio. Etiam imperdiet tincidunt metus id luctus. Sed ut pellentesque lectus. Praesent dignissim blandit risus vitae tempus.",
	},
	{
		isActive: false,
		question: "How do reviews work?",
		answer:
			"In auctor orci vitae ipsum euismod, vitae porta metus viverra. Ut facilisis luctus interdum. Cras et facilisis odio. Etiam imperdiet tincidunt metus id luctus. Sed ut pellentesque lectus. Praesent dignissim blandit risus vitae tempus.",
	},
];

const FaqItem = ({ faq }) => {
	const [isOpen, setIsOpen] = useState(faq.isActive || false);

	const toggleFaq = (e) => {
		e.preventDefault();
		setIsOpen(!isOpen);
	};

	return (
		<div className={classNames("ezy__faq13-each-faq", { open: isOpen })}>
			<a className="ezy__faq13-faq-trigger" href="#" onClick={toggleFaq}>
				<h4 className="ezy__faq13-title">{faq.question}</h4>
			</a>
			<Collapse in={isOpen}>
				<div className="ezy__faq13-content">
					<p>{faq.answer}</p>
				</div>
			</Collapse>
		</div>
	);
};

FaqItem.propTypes = {
	faq: PropTypes.object.isRequired,
};

const Faq13 = () => {
	return (
		<section className="ezy__faq13" id="ezy__faq13">
			<Container>
				<Row className="ezy__faq13-separator justify-content-center">
					<Col md={10} className="text-center mb-5">
						<h3 className="ezy__faq13-heading">Frequently asked questions</h3>
						<p className="ezy__faq13-sub-heading">
							Lorem ipsum dolor sit amet consectetur adipiscing elit.
						</p>
					</Col>

					<Col xs={12} className="position-relative py-5">
						<Row className="position-absolute">
							<Col sm={6}>
								<img
									src="https://cdn.easyfrontend.com/pictures/faq/faq13.png"
									alt=""
								/>
							</Col>
						</Row>
						<Row className="justify-content-end">
							<Col xs={12} lg={6}>
								<div className="ezy__faq13-faq-group">
									{faqList.map((faq, i) => (
										<FaqItem faq={faq} key={i} />
									))}
								</div>
							</Col>
						</Row>
					</Col>
				</Row>
			</Container>
		</section>
	);
};

<style>
.ezy__faq13 {
	--bs-body-color: rgb(50, 62, 80);
	--bs-body-bg: #ffffff;

	/* Easy Frontend variables */
	--ezy-theme-color: rgb(13, 110, 253);
	--ezy-theme-color-rgb: 13, 110, 253;
	--ezy-card-bg: #f6f6f6;
	--ezy-card-box-shadow: 0 21px 65px 0 rgba(0, 0, 0, 0.12);

	background-color: var(--bs-body-bg);
	overflow: hidden;
}

/* Gray Block Style */
.gray .ezy__faq13,
.ezy__faq13.gray {
	/* Bootstrap variables */
	--bs-body-bg: rgb(246, 246, 246);
}

/* Dark Gray Block Style */
.dark-gray .ezy__faq13,
.ezy__faq13.dark-gray {
	/* Bootstrap variables */
	--bs-body-color: #ffffff;
	--bs-body-bg: rgb(30, 39, 53);

	/* Easy Frontend variables */
	--ezy-card-bg: rgb(11, 23, 39);
	--ezy-card-box-shadow: 0 10px 10px 0 rgba(27, 27, 27, 0.25);
}

/* Dark Block Style */
.dark .ezy__faq13,
.ezy__faq13.dark {
	/* Bootstrap variables */
	--bs-body-color: #ffffff;
	--bs-body-bg: rgb(11, 23, 39);

	/* Easy Frontend variables */
	--ezy-card-bg: rgb(30, 39, 53);
	--ezy-card-box-shadow: 0 10px 10px 0 rgba(46, 46, 46, 0.25);
}

.ezy__faq13-heading {
	font-size: 32px;
	font-weight: 600;
	line-height: 1;
	color: var(--bs-body-color);
}

@media (min-width: 768px) {
	.ezy__faq13-heading {
		font-size: 40px;
		line-height: 1.3;
	}
}

.ezy__faq13-sub-heading {
	font-size: 17px;
	color: var(--bs-body-color);
	opacity: 0.8;
}

.ezy__faq13-separator {
	padding: 100px 0 0;
}

.ezy__faq13-title {
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	color: var(--bs-body-color);
	opacity: 0.9;
	margin-bottom: 0;
}

.ezy__faq13-each-faq {
	background-color: var(--ezy-card-bg);
	margin-bottom: 10px;
	transition: all 0.4s ease-out;
	position: relative;
	padding: 10px;
}

.ezy__faq13-each-faq.open {
	box-shadow: var(--ezy-card-box-shadow);
	padding: 20px;
}

.ezy__faq13-faq-trigger,
.ezy__faq13-content {
	padding: 10px;
	text-decoration: none;
}

.ezy__faq13-faq-trigger {
	display: block;
}

.ezy__faq13-content,
.ezy__faq13-content * {
	font-size: 16px;
	line-height: 1.5;
	color: var(--bs-body-color);
	opacity: 0.8;
}

.ezy__faq13-content p:last-child {
	margin-bottom: 0px;
}
</style>

import React, { useState } from "react";
import PropTypes from "prop-types";

const faqList = [
	{
		isActive: true,
		question: "How do I change my password?",
		answer:
			"In auctor orci vitae ipsum euismod, vitae porta metus viverra. Ut facilisis luctus interdum. Cras et facilisis odio. Etiam imperdiet tincidunt metus id luctus. Sed ut pellentesque lectus. Praesent dignissim blandit risus vitae tempus.",
	},
	{
		isActive: false,
		question: "How do I sign up?",
		answer:
			"In auctor orci vitae ipsum euismod, vitae porta metus viverra. Ut facilisis luctus interdum. Cras et facilisis odio. Etiam imperdiet tincidunt metus id luctus. Sed ut pellentesque lectus. Praesent dignissim blandit risus vitae tempus.",
	},
	{
		isActive: false,
		question: "Can I remove a post?",
		answer:
			"In auctor orci vitae ipsum euismod, vitae porta metus viverra. Ut facilisis luctus interdum. Cras et facilisis odio. Etiam imperdiet tincidunt metus id luctus. Sed ut pellentesque lectus. Praesent dignissim blandit risus vitae tempus.",
	},
	{
		isActive: false,
		question: "How do reviews work?",
		answer:
			"In auctor orci vitae ipsum euismod, vitae porta metus viverra. Ut facilisis luctus interdum. Cras et facilisis odio. Etiam imperdiet tincidunt metus id luctus. Sed ut pellentesque lectus. Praesent dignissim blandit risus vitae tempus.",
	},
];

const FaqItem = ({ faq }) => {
	const [isOpen, setIsOpen] = useState(faq.isActive || false);

	const toggleFaq = (e) => {
		e.preventDefault();
		setIsOpen(!isOpen);
	};

	return (
		<div
			className={`${
				isOpen && "active"
			} bg-gray-50 mb-2 relative p-5 shadow dark:shadow-none dark:bg-[#1E2735]`}
		>
			<a className="p-3 block" href="#!" onClick={toggleFaq}>
				<h4 className="text-lg font-semibold leading-none opacity-90">
					{faq.question}
				</h4>
			</a>
			<div>
				<p className="leading-normal opacity-70">{faq.answer}</p>
			</div>
		</div>
	);
};

FaqItem.propTypes = {
	faq: PropTypes.object.isRequired,
};

const Faq13 = () => {
	return (
		<section className="ezy__faq13 bg-white dark:bg-[#0b1727] text-zinc-900 dark:text-white overflow-hidden">
			<div className="container px-16 md:px-8 lg:px-28">
				<div className="grid grid-cols-12 pt-24 justify-center">
					<div className="col-span-12 md:col-span-10 md:col-start-2 text-center mb-12">
						<h3 className="text-[32px] font-semibold leading-none md:text-[40px] md:leading-tight">
							Frequently asked questions
						</h3>
						<p className="text-[17px] opacity-80">
							Lorem ipsum dolor sit amet consectetur adipiscing elit.
						</p>
					</div>

					<div className="col-span-12 relative py-12">
						<div className="grid grid-cols-12 absolute">
							<div className="col-span-12 sm:col-span-6">
								<img
									src="https://cdn.easyfrontend.com/pictures/faq/faq13.png"
									alt=""
								/>
							</div>
						</div>

						<div className="grid grid-cols-12 justify-end">
							<div className="col-span-12 lg:col-span-6 lg:col-start-7">
								<div className="ezy__faq13-faq-group">
									{faqList.map((faq, i) => (
										<FaqItem faq={faq} key={i} />
									))}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	);
};



FAQ #15Right align Faq list

Available resources

Share with

Tags

You may also like