Multiple type open and close FAQ

Frequently ask Question with arrow

HTML

<section class="ezy__faq17" id="ezy__faq17">
  <div class="container">
    <div class="row ezy__faq17-separator justify-content-center">
      
      <div class="col-md-10 text-center mb-5">
        <h3 class="ezy__faq17-heading">Frequently asked questions</h3>
        <p class="ezy__faq17-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__faq17-faq-group">
              <div class="ezy__faq17-each-faq open">
                <a class="ezy__faq17-faq-trigger" href="#">
                  <h4 class="ezy__faq17-title">How do I change my password?</h4>
                </a>
                <div class="ezy__faq17-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__faq17-each-faq open">
                <a class="ezy__faq17-faq-trigger" href="#">
                  <h4 class="ezy__faq17-title">How do I sign up?</h4>
                </a>
                <div class="ezy__faq17-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__faq17-each-faq open">
                <a class="ezy__faq17-faq-trigger" href="#">
                  <h4 class="ezy__faq17-title">Can I remove a post?</h4>
                </a>
                <div class="ezy__faq17-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__faq17-each-faq open">
                <a class="ezy__faq17-faq-trigger" href="#">
                  <h4 class="ezy__faq17-title">How do reviews work?</h4>
                </a>
                <div class="ezy__faq17-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>

<style>
.ezy__faq17 {
  --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__faq17,
.ezy__faq17.gray {
  /* Bootstrap variables */
  --bs-body-bg: rgb(246, 246, 246);
}

/* Dark Gray Block Style */
.dark-gray .ezy__faq17,
.ezy__faq17.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__faq17,
.ezy__faq17.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__faq17-heading {
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: var(--bs-body-color);
}

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

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

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

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

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

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

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

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

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

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

Bootstrap

<section class="ezy__faq17 bg-white dark:bg-[#0b1727] text-zinc-900 dark:text-white relative">
  <div class="container px-16 md:px-8 lg:px-28">
    <div class="grid grid-cols-12 pt-24 justify-center gap-6">
      
      <div class="col-span-12 md:col-span-10 md:col-start-2 text-center mb-12">
        <h3 class="text-[32px] md:text-[40px] leading-none md:leading-snug font-semibold mb-2">
          Frequently asked questions
        </h3>
        <p class="text-[17px] opacity-80 mb-2">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__faq17-faq-group">
              <div class="bg-gray-100 dark:bg-[#1E2735] shadow-2xl mb-3 transition relative py-3 px-5">
                <a class="p-3 pt-0" href="#">
                  <h4 class="text-lg font-semibold leading-none opacity-90">How do I change my password?</h4>
                </a>
                <div class="">
                  <p class="text-base leading-normal opacity-80 mb-2">
                    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-100 dark:bg-[#1E2735] shadow-2xl mb-3 transition relative py-3 px-5">
                <a class="p-3 pt-0" href="#">
                  <h4 class="text-lg font-semibold leading-none opacity-90">How do I sign up?</h4>
                </a>
                <div class="">
                  <p class="text-base leading-normal opacity-80 mb-2">
                    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-100 dark:bg-[#1E2735] shadow-2xl mb-3 transition relative py-3 px-5">
                <a class="p-3 pt-0" href="#">
                  <h4 class="text-lg font-semibold leading-none opacity-90">Can I remove a post?</h4>
                </a>
                <div class="">
                  <p class="text-base leading-normal opacity-80 mb-2">
                    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-100 dark:bg-[#1E2735] shadow-2xl mb-3 transition relative py-3 px-5">
                <a class="p-3 pt-0" href="#">
                  <h4 class="text-lg font-semibold leading-none opacity-90">How do reviews work?</h4>
                </a>
                <div class="">
                  <p class="text-base leading-normal opacity-80 mb-2">
                    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 from "react";
import { Col, Container, Row } from "react-bootstrap";
import PropTypes from "prop-types";

const faqList = [
	{
		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.",
	},
	{
		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.",
	},
	{
		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.",
	},
	{
		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 }) => (
	<div className="ezy__faq13-each-faq open">
		<div className="ezy__faq13-faq-trigger">
			<h4 className="ezy__faq13-title">{faq.question}</h4>
		</div>
		<div className="ezy__faq13-content">
			<p>{faq.answer}</p>
		</div>
	</div>
);

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

const Faq17 = () => {
	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__faq17 {
	--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__faq17,
.ezy__faq17.gray {
	/* Bootstrap variables */
	--bs-body-bg: rgb(246, 246, 246);
}

/* Dark Gray Block Style */
.dark-gray .ezy__faq17,
.ezy__faq17.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__faq17,
.ezy__faq17.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__faq17-heading {
	font-size: 32px;
	font-weight: 600;
	line-height: 1;
	color: var(--bs-body-color);
}

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

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

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

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

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

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

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

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

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

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

import React from "react";
import PropTypes from "prop-types";

const faqList = [
	{
		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.",
	},
	{
		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.",
	},
	{
		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.",
	},
	{
		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 }) => (
	<div className="bg-gray-100 dark:bg-[#1E2735] shadow-2xl mb-3 transition relative py-3 px-5">
		<a className="p-3 pt-0" href="#!">
			<h4 className="text-lg font-semibold leading-none opacity-90">
				{faq.question}
			</h4>
		</a>
		<div className="">
			<p className="text-base leading-normal opacity-80 mb-2">{faq.answer}</p>
		</div>
	</div>
);

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

const Faq17 = () => {
	return (
		<section className="ezy__faq17 bg-white dark:bg-[#0b1727] text-zinc-900 dark:text-white relative">
			<div className="container px-16 md:px-8 lg:px-28">
				<div className="grid grid-cols-12 pt-24 justify-center gap-6">
					<div className="col-span-12 md:col-span-10 md:col-start-2 text-center mb-12">
						<h3 className="text-[32px] md:text-[40px] leading-none md:leading-snug font-semibold mb-2">
							Frequently asked questions
						</h3>
						<p className="text-[17px] opacity-80 mb-2">
							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>
									{faqList.map((faq, i) => (
										<FaqItem faq={faq} key={i} />
									))}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	);
};



FAQ #17Right align FAQ list content

Available resources

Share with

Tags

You may also like