Chat List

Show All

  • A
  • B
  • D
  • J
  • O
Chat with Khelesh

Online

Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Notications

Show All

  • SEVER STATUS
  • KK
  • SOCIAL
  • RU
  • SEVER STATUS
  • AU
  • MO
Notes

Add New Nots

Upgrade you Account to Pro

Upgrade

Basic Accordion

Basic accordion. Add accordion class in root

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

	<div class="accordion" id="accordionExample">
		<div class="accordion-item">
			<h2 class="accordion-header">
			<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
				Accordion Item #1
			</button>
			</h2>
			<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
			<div class="accordion-body">
				Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
			</div>
			</div>
		</div>
		<div class="accordion-item">
			<h2 class="accordion-header">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
				Accordion Item #2
			</button>
			</h2>
			<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
			<div class="accordion-body">
				Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
			</div>
			</div>
		</div>
		<div class="accordion-item">
			<h2 class="accordion-header">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
				Accordion Item #3
			</button>
			</h2>
			<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
			<div class="accordion-body">
				Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
			</div>
			</div>
		</div>
	</div>

Always Open Accordion

Omit data-bs-parent attribute on each

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

	<div class="accordion" id="accordionPanelsStayOpenExample">
		<div class="accordion-item">
		  <h2 class="accordion-header">
			<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
			  Accordion Item #1
			</button>
		  </h2>
		  <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
			<div class="accordion-body">
			  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
			</div>
		  </div>
		</div>
		<div class="accordion-item">
		  <h2 class="accordion-header">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
			  Accordion Item #2
			</button>
		  </h2>
		  <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse">
			<div class="accordion-body">
			  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
			</div>
		  </div>
		</div>
		<div class="accordion-item">
		  <h2 class="accordion-header">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
			  Accordion Item #3
			</button>
		  </h2>
		  <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse">
			<div class="accordion-body">
			  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
			</div>
		  </div>
		</div>
	</div>

Flush Accordion

Flush Accordion. Add accordion-flush class in root

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
<div class="accordion accordion-flush" id="accordionFlushExample">
		<div class="accordion-item">
		  <h2 class="accordion-header">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
			  Accordion Item #1
			</button>
		  </h2>
		  <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
			<div class="accordion-body">
				Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</div>
		  </div>
		</div>
		<div class="accordion-item">
		  <h2 class="accordion-header">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
			  Accordion Item #2
			</button>
		  </h2>
		  <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
			<div class="accordion-body">
				Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
			  </div>
		  </div>
		</div>
		<div class="accordion-item">
		  <h2 class="accordion-header">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
			  Accordion Item #3
			</button>
		  </h2>
		  <div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
			<div class="accordion-body">
				Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
			  </div>
		  </div>
		</div>
	</div>

Default Accordion

Default accordion. Add accordion class in root

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
<div class="accordion accordion-primary">
  <div class="accordion-item">
	<h2 class="accordion-header">
	  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#default-collapseOne" aria-expanded="true" aria-controls="default-collapseOne">
		Accordion Header One
	  </button>
	</h2>
	<div id="default-collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordion-one">
	  <div class="accordion-body">
		Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
	  </div>
	</div>
  </div>
  <div class="accordion-item">
	<h2 class="accordion-header">
	  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#default-collapseTwo" aria-expanded="false" aria-controls="default-collapseTwo">
		Accordion Header Two
	  </button>
	</h2>
	<div id="default-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordion-one">
	  <div class="accordion-body">
		 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
	  </div>
	</div>
  </div>
  <div class="accordion-item">
	<h2 class="accordion-header">
	  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#default-collapseThree" aria-expanded="false">
		Accordion Header Three
	  </button>
	</h2>
	<div id="default-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordion-one">
	  <div class="accordion-body">
			Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
		
	  </div>
	</div>
  </div>
</div>

Accordion bordered

Accordion with border. Add class accordion-bordered with the class accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

	<div class="accordion accordion-danger-solid">
<div class="accordion-item">
<h2 class="accordion-header">
  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bordered_collapseOne">
	Accordion Header One
  </button>
</h2>
<div id="bordered_collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordion-two">
  <div class="accordion-body">
	Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
  </div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bordered_collapseTwo">
	Accordion Header Two
  </button>
</h2>
<div id="bordered_collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordion-two">
  <div class="accordion-body">
	 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
  </div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bordered_collapseThree">
	Accordion Header Three
  </button>
</h2>
<div id="bordered_collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordion-two">
  <div class="accordion-body">
		Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
	
  </div>
</div>
</div>
</div>

Accordion without space

Add accordion-no-gutter class with accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
<div class="accordion accordion-no-gutter accordion-header-bg">
<div class="accordion-item">
<h2 class="accordion-header">
  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#no-gutter-collapseOne">
	Accordion Header One
  </button>
</h2>
<div id="no-gutter-collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordion-three">
  <div class="accordion-body">
	Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
  </div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#no-gutter-collapseTwo">
	Accordion Header Two
  </button>
</h2>
<div id="no-gutter-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordion-three">
  <div class="accordion-body">
	 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
  </div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#no-gutter-collapseThree">
	Accordion Header Three
  </button>
</h2>
<div id="no-gutter-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordion-three">
  <div class="accordion-body">
		Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
	
  </div>
</div>
</div>
</div>

Accordion with space

Add accordion-no-gutter class with accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

<div class="accordion accordion-no-gutter accordion-space" id="accordion-thirteen">
	<div class="accordion-item">
		<h2 class="accordion-header accordion-header-primary" id="headingOne13">
			<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne13">
			
			<span class="accordion-header-text">Accordion Header One</span>
			</button>
		</h2>
		<div id="collapseOne13" class="accordion-collapse collapse show" aria-labelledby="headingOne13" data-bs-parent="#accordion-thirteen">
			<div class="accordion-body">
			Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
			</div>
		</div>
	</div>
	<div class="accordion-item">
		<h2 class="accordion-header accordion-header-info" id="headingTwo13">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo13">
			
			<span class="accordion-header-text">Accordion Header Two</span>
			</button>
		</h2>
		<div id="collapseTwo13" class="accordion-collapse collapse" aria-labelledby="headingTwo13" data-bs-parent="#accordion-thirteen">
			<div class="accordion-body">
			Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
			</div>
		</div>
	</div>
	<div class="accordion-item">
		<h2 class="accordion-header accordion-header-primary" id="headingThree13">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree13">
			
			<span class="accordion-header-text">Accordion Header Three</span>
			</button>
		</h2>
		<div id="collapseThree13" class="accordion-collapse collapse" aria-labelledby="headingThree13" data-bs-parent="#accordion-thirteen">
			<div class="accordion-body">
			Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
			</div>
		</div>
	</div>
</div>

Accordion without space with border

Add accordion-no-gutter accordion-bordered class with accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
 
 <div class="accordion accordion-no-gutter accordion-bordered">
	   <div class="accordion-item">
		 <h2 class="accordion-header accordion-header-primary" id="headingOne8">
		   <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne8">
		  
			 <span class="accordion-header-text">Accordion Header One </span>
		   </button>
		 </h2>
		 <div id="collapseOne8" class="accordion-collapse collapse show" aria-labelledby="headingOne8" data-bs-parent="#accordion-four">
		   <div class="accordion-body">
			Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
		   </div>
		 </div>
	   </div>
	   <div class="accordion-item">
		 <h2 class="accordion-header accordion-header-info" id="headingTwo8">
		   <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo8" >
			
			 <span class="accordion-header-text">Accordion Header Two </span>
		   </button>
		 </h2>
		 <div id="collapseTwo8" class="accordion-collapse collapse" aria-labelledby="headingTwo8" data-bs-parent="#accordion-four">
		   <div class="accordion-body">
			Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
		   </div>
		 </div>
	   </div>
	   <div class="accordion-item">
		 <h2 class="accordion-header accordion-header-primary" id="headingThree8">
		   <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree8">
			
			 <span class="accordion-header-text">Accordion Header Three </span>
		   </button>
		 </h2>
		 <div id="collapseThree8" class="accordion-collapse collapse" aria-labelledby="headingThree7" data-bs-parent="#accordion-four">
		   <div class="accordion-body">
			Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
		   </div>
		 </div>
	   </div>
 </div>

Accordion indicator in left position

Add accordion-start-indicator class with accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

<div class="accordion accordion-left-indicator">
<div class="accordion-item">
 <h2 class="accordion-header accordion-header-primary" id="headingOne7">
   <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne7">
  
	 <span class="accordion-header-text">Accordion Header One </span>
   </button>
 </h2>
 <div id="collapseOne7" class="accordion-collapse collapse show" aria-labelledby="headingOne7" data-bs-parent="#accordion-five">
   <div class="accordion-body">
	Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
   </div>
 </div>
</div>
<div class="accordion-item">
 <h2 class="accordion-header accordion-header-info" id="headingTwo7">
   <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo7" >
	
	 <span class="accordion-header-text">Accordion Header Two </span>
   </button>
 </h2>
 <div id="collapseTwo7" class="accordion-collapse collapse" aria-labelledby="headingTwo7" data-bs-parent="#accordion-five">
   <div class="accordion-body">
	Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
   </div>
 </div>
</div>
<div class="accordion-item">
 <h2 class="accordion-header accordion-header-primary" id="headingThree7">
   <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree7">
	
	 <span class="accordion-header-text">Accordion Header Three </span>
   </button>
 </h2>
 <div id="collapseThree7" class="accordion-collapse collapse" aria-labelledby="headingThree7" data-bs-parent="#accordion-five">
   <div class="accordion-body">
	Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
   </div>
 </div>
</div>
</div>

									

Accordion with icon

Add accordion-with-icon class with accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

<div class="accordion accordion-with-icon">
	  <div class="accordion-item">
		<h2 class="accordion-header accordion-header-primary" id="headingOne6">
		  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne6">
		   <span class="accordion-header-icon"></span>
			<span class="accordion-header-text">Accordion Header One</span>
		  </button>
		</h2>
		<div id="collapseOne6" class="accordion-collapse collapse show" aria-labelledby="headingOne6" data-bs-parent="#accordion-six">
		  <div class="accordion-body">
			Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
		  </div>
		</div>
	  </div>
	  <div class="accordion-item">
		<h2 class="accordion-header accordion-header-info" id="headingTwo6">
		  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo6" >
			<span class="accordion-header-icon"></span>
			<span class="accordion-header-text">Accordion Header Two</span>
		  </button>
		</h2>
		<div id="collapseTwo6" class="accordion-collapse collapse" aria-labelledby="headingTwo6" data-bs-parent="#accordion-six">
		  <div class="accordion-body">
			Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
		  </div>
		</div>
	  </div>
	  <div class="accordion-item">
		<h2 class="accordion-header accordion-header-primary" id="headingThree6">
		  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree6">
			<span class="accordion-header-icon"></span>
			<span class="accordion-header-text">Accordion Header Three</span>
		  </button>
		</h2>
		<div id="collapseThree6" class="accordion-collapse collapse" aria-labelledby="headingThree6" data-bs-parent="#accordion-six">
		  <div class="accordion-body">
			Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
		  </div>
		</div>
	  </div>
</div>

Accordion header background

Add accordion-header-bg class with accrodion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
<div class="accordion accordion-header-bg accordion-bordered">
  <div class="accordion-item">
	<h2 class="accordion-header accordion-header-primary" id="headingOne1">
	  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne1" aria-expanded="true">
		Accordion Header One
	  </button>
	</h2>
	<div id="collapseOne1" class="accordion-collapse collapse show" aria-labelledby="headingOne1" data-bs-parent="#accordion-seven">
	  <div class="accordion-body">
		Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
	  </div>
	</div>
  </div>
  <div class="accordion-item">
	<h2 class="accordion-header accordion-header-info" id="headingTwo1">
	  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo1" aria-expanded="false">
		Accordion Header Two
	  </button>
	</h2>
	<div id="collapseTwo1" class="accordion-collapse collapse" aria-labelledby="headingTwo1" data-bs-parent="#accordion-seven">
	  <div class="accordion-body">
		Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
	  </div>
	</div>
  </div>
  <div class="accordion-item">
	<h2 class="accordion-header accordion-header-primary" id="headingThree1">
	  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree1">
		Accordion Header Three
	  </button>
	</h2>
	<div id="collapseThree1" class="accordion-collapse collapse" aria-labelledby="headingThree1" data-bs-parent="#accordion-seven">
	  <div class="accordion-body">
		Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
	  </div>
	</div>
  </div>
</div>

Accordion solid background

Add class accordion-solid-bg with accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
 <div class="accordion accordion-solid-bg">
<div class="accordion-item">
 <h2 class="accordion-header" id="headingOne">
   <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
	Accordion Header One
   </button>
 </h2>
 <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordion-eight">
   <div class="accordion-body">
	Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
   </div>
 </div>
</div>
<div class="accordion-item">
 <h2 class="accordion-header" id="headingTwo">
   <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
	Accordion Header Two
   </button>
 </h2>
 <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordion-eight">
   <div class="accordion-body">
	Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
   </div>
 </div>
</div>
<div class="accordion-item">
 <h2 class="accordion-header" id="headingThree">
   <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
	Accordion Header Three
   </button>
 </h2>
 <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordion-eight">
   <div class="accordion-body">
	Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
   </div>
 </div>
</div>
</div>

Accordion active background

Add class accordion-active-header with accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

	 <div class="accordion accordion-active-header">
<div class="accordion-item">
 <h2 class="accordion-header accordion-header-primary" id="headingOne2">
   <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne2">
	Accordion Header One
   </button>
 </h2>
 <div id="collapseOne2" class="accordion-collapse collapse show" aria-labelledby="headingOne2" data-bs-parent="#accordion-nine">
   <div class="accordion-body">
	Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
   </div>
 </div>
</div>
<div class="accordion-item">
 <h2 class="accordion-header accordion-header-info" id="headingTwo2">
   <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo2" >
	Accordion Header Two
   </button>
 </h2>
 <div id="collapseTwo2" class="accordion-collapse collapse" aria-labelledby="headingTwo2" data-bs-parent="#accordion-nine">
   <div class="accordion-body">
	Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
   </div>
 </div>
</div>
<div class="accordion-item">
 <h2 class="accordion-header accordion-header-primary" id="headingThree2">
   <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree2">
	Accordion Header Three
   </button>
 </h2>
 <div id="collapseThree2" class="accordion-collapse collapse" aria-labelledby="headingThree2" data-bs-parent="#accordion-nine">
   <div class="accordion-body">
	Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
   </div>
 </div>
</div>
</div>
										

Accordion header shadow

Add accordion-header-shadow and accordion-rounded class with accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
 <div class="accordion accordion-header-shadow accordion-rounded">
<div class="accordion-item">
 <h2 class="accordion-header accordion-header-primary" id="headingOne3">
   <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne3">
	Accordion Header One
   </button>
 </h2>
 <div id="collapseOne3" class="accordion-collapse collapse show" aria-labelledby="headingOne3" data-bs-parent="#accordion-ten">
   <div class="accordion-body">
	Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
   </div>
 </div>
</div>
<div class="accordion-item">
 <h2 class="accordion-header accordion-header-info" id="headingTwo3">
   <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo3" >
	Accordion Header Two
   </button>
 </h2>
 <div id="collapseTwo3" class="accordion-collapse collapse" aria-labelledby="headingTwo3" data-bs-parent="#accordion-ten">
   <div class="accordion-body">
	Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
   </div>
 </div>
</div>
<div class="accordion-item">
 <h2 class="accordion-header accordion-header-primary" id="headingThree3">
   <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree3">
	Accordion Header Three
   </button>
 </h2>
 <div id="collapseThree3" class="accordion-collapse collapse" aria-labelledby="headingThree3" data-bs-parent="#accordion-ten">
   <div class="accordion-body">
	Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
   </div>
 </div>
</div>
</div>

Accordion rounded stylish

Add accordion-rounded-stylish class with accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
  <div class="accordion accordion-rounded-stylish accordion-bordered">
<div class="accordion-item">
 <h2 class="accordion-header accordion-header-primary" id="headingOne4">
   <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne4">
	Accordion Header One
   </button>
 </h2>
 <div id="collapseOne4" class="accordion-collapse collapse show" aria-labelledby="headingOne4" data-bs-parent="#accordion-eleven">
   <div class="accordion-body">
	Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
   </div>
 </div>
</div>
<div class="accordion-item">
 <h2 class="accordion-header accordion-header-info" id="headingTwo4">
   <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo4" >
	Accordion Header Two
   </button>
 </h2>
 <div id="collapseTwo4" class="accordion-collapse collapse" aria-labelledby="headingTwo4" data-bs-parent="#accordion-eleven">
   <div class="accordion-body">
	Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
   </div>
 </div>
</div>
<div class="accordion-item">
 <h2 class="accordion-header accordion-header-primary" id="headingThree4">
   <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree4">
	Accordion Header Three
   </button>
 </h2>
 <div id="collapseThree4" class="accordion-collapse collapse" aria-labelledby="headingThree4" data-bs-parent="#accordion-eleven">
   <div class="accordion-body">
	Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
   </div>
 </div>
</div>
</div>

Accordion gradient

Add accordion-gradient class with accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
<div class="accordion accordion-rounded-stylish accordion-gradient">
<div class="accordion-item">
<h2 class="accordion-header accordion-header-primary" id="headingOne5">
  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne5">
	Accordion Header One
  </button>
</h2>
<div id="collapseOne5" class="accordion-collapse collapse show" aria-labelledby="headingOne5" data-bs-parent="#accordion-twelve">
  <div class="accordion-body">
	Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
  </div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header accordion-header-info" id="headingTwo5">
  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo5" >
	Accordion Header Two
  </button>
</h2>
<div id="collapseTwo5" class="accordion-collapse collapse" aria-labelledby="headingTwo5" data-bs-parent="#accordion-twelve">
  <div class="accordion-body">
	Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
  </div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header accordion-header-primary" id="headingThree5">
  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree5">
	Accordion Header Three
  </button>
</h2>
<div id="collapseThree5" class="accordion-collapse collapse" aria-labelledby="headingThree5" data-bs-parent="#accordion-twelve">
  <div class="accordion-body">
	Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
  </div>
</div>
</div>
</div>