Accordion | OCTSI

Accordion Style 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

								 
	<div class="heading-1 accordian-title  wow fadeIn" data-wow-delay=".15s" data-wow-duration=".75s">
			<h2>Accordion Style 1</h2>
		</div>
		<div class="accordian-1 ">
			<div class="accordion " id="accordionExample">
				<div class="accordion-item wow fadeInUp" data-wow-delay=".15s" data-wow-duration=".75s">
					<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">
										Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ?
									</button>
									</h2>
					<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
						<div class="accordion-body">
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
						</div>
					</div>
				</div>
				<div class="accordion-item wow fadeInUp" data-wow-delay=".15s" data-wow-duration=".75s">
					<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">
										Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ?
									</button>
									</h2>
					<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
						<div class="accordion-body">
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
						</div>
					</div>
				</div>
				<div class="accordion-item wow fadeInUp" data-wow-delay=".15s" data-wow-duration=".75s">
					<h2 class="accordion-header" id="heading3">
										<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
										Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ?
										</button>
									</h2>
					<div id="collapse3" class="accordion-collapse collapse" aria-labelledby="heading3" data-bs-parent="#accordionExample">
						<div class="accordion-body">
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
						</div>
					</div>
				</div>
			</div>
		</div>

Accordion Style 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus easst magnis dis parturi montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem

										 
	<div class="heading-1 accordian-title wow fadeIn" data-wow-delay=".15s" data-wow-duration=".75s">
			<h2>Accordion Style 2</h2> </div>
		<div class="accordian-2">
			<div class="accordion" id="accordion2">
				<div class="accordion-item wow fadeInUp" data-wow-delay=".15s" data-wow-duration=".75s">
					<h2 class="accordion-header" id="heading2-1">
											<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2-1" aria-expanded="true" aria-controls="collapse2-1">
											Lorem ipsum dolor sit amet, consectetur adipisicing elit ?
											</button>
										</h2>
					<div id="collapse2-1" class="accordion-collapse collapse show" aria-labelledby="heading2-1" data-bs-parent="#accordion2">
						<div class="accordion-body">
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus easst magnis dis parturi montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem</p>
						</div>
					</div>
				</div>
				<div class="accordion-item wow fadeInUp" data-wow-delay=".15s" data-wow-duration=".75s">
					<h2 class="accordion-header" id="heading2-2">
											<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2-2" aria-expanded="false" aria-controls="collapse2-2">
											Lorem ipsum dolor sit amet, consectetur adipisicing elit ?
											</button>
										</h2>
					<div id="collapse2-2" class="accordion-collapse collapse" aria-labelledby="heading2-2" data-bs-parent="#accordion2">
						<div class="accordion-body">
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus easst magnis dis parturi montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem</p>
						</div>
					</div>
				</div>
				<div class="accordion-item wow fadeInUp" data-wow-delay=".15s" data-wow-duration=".75s">
					<h2 class="accordion-header" id="heading2-3">
											<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2-3" aria-expanded="false" aria-controls="collapse2-3">
											Lorem ipsum dolor sit amet, consectetur adipisicing elit ?
											</button>
											</h2>
					<div id="collapse2-3" class="accordion-collapse collapse" aria-labelledby="heading2-3" data-bs-parent="#accordion2">
						<div class="accordion-body">
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus easst magnis dis parturi montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem</p>
						</div>
					</div>
				</div>
				<div class="accordion-item wow fadeInUp" data-wow-delay=".15s" data-wow-duration=".75s">
					<h2 class="accordion-header" id="heading2-4">
											<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2-4" aria-expanded="false" aria-controls="collapse2-4">
											Lorem ipsum dolor sit amet, consectetur adipisicing elit ?
											</button>
											</h2>
					<div id="collapse2-4" class="accordion-collapse collapse" aria-labelledby="heading2-4" data-bs-parent="#accordion2">
						<div class="accordion-body">
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus easst magnis dis parturi montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem</p>
						</div>
					</div>
				</div>
			</div>
		</div>

Accordions Style 3

										 
	<div class="heading-1 accordian-title wow fadeIn" data-wow-delay=".15s" data-wow-duration=".75s">
			<h2>Accordions Style 3</h2> </div>
		<div class="accordian-3">
			<div class="accordion" id="accordion3">
				<div class="accordion-item wow fadeInUp" data-wow-delay=".15s" data-wow-duration=".75s">
					<h2 class="accordion-header" id="heading3-1">
												<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3-1" aria-expanded="true" aria-controls="collapse3-1">
												Lorem ipsum dolor sit amet, consectetur adipisicing elit ?
												</button>
											</h2>
					<div id="collapse3-1" class="accordion-collapse collapse show" aria-labelledby="heading3-1" data-bs-parent="#accordion3">
						<div class="accordion-body">
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus easst magnis dis parturi montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem</p>
						</div>
					</div>
				</div>
				<div class="accordion-item wow fadeInUp" data-wow-delay=".15s" data-wow-duration=".75s">
					<h2 class="accordion-header" id="heading3-2">
												<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3-2" aria-expanded="false" aria-controls="collapse3-2">
												Lorem ipsum dolor sit amet, consectetur adipisicing elit ?
												</button>
											</h2>
					<div id="collapse3-2" class="accordion-collapse collapse" aria-labelledby="heading3-2" data-bs-parent="#accordion3">
						<div class="accordion-body">
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus easst magnis dis parturi montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem</p>
						</div>
					</div>
				</div>
				<div class="accordion-item wow fadeInUp" data-wow-delay=".15s" data-wow-duration=".75s">
					<h2 class="accordion-header" id="heading3-3">
												<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3-3" aria-expanded="false" aria-controls="collapse3-3">
												Lorem ipsum dolor sit amet, consectetur adipisicing elit ?
												</button>
											</h2>
					<div id="collapse3-3" class="accordion-collapse collapse" aria-labelledby="heading3-3" data-bs-parent="#accordion3">
						<div class="accordion-body">
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus easst magnis dis parturi montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem</p>
						</div>
					</div>
				</div>
				<div class="accordion-item wow fadeInUp" data-wow-delay=".15s" data-wow-duration=".75s">
					<h2 class="accordion-header" id="heading3-4">
												<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3-4" aria-expanded="false" aria-controls="collapse3-4">
												Lorem ipsum dolor sit amet, consectetur adipisicing elit ?
												</button>
											</h2>
					<div id="collapse3-4" class="accordion-collapse collapse" aria-labelledby="heading3-4" data-bs-parent="#accordion3">
						<div class="accordion-body">
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus easst magnis dis parturi montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem</p>
						</div>
					</div>
				</div>
			</div>

Accordion Style 4

										 
	<div class="heading-1 style-4 mt-5 accordian-title wow fadeIn" data-wow-delay=".15s" data-wow-duration=".75s">
			<h2>Accordion Style 4</h2> </div>
		<div class="accordian-4">
			<div class="accordion" id="accordion4">
				<div class="accordion-item wow fadeInUp" data-wow-delay=".15s" data-wow-duration=".75s">
					<h2 class="accordion-header" id="heading4-1">
										<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4-1" aria-expanded="true" aria-controls="collapse4-1">
											Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ?
										</button>
										</h2>
					<div id="collapse4-1" class="accordion-collapse collapse show" aria-labelledby="heading4-1" data-bs-parent="#accordion4">
						<div class="accordion-body">
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
						</div>
					</div>
				</div>
				<div class="accordion-item wow fadeInUp" data-wow-delay=".15s" data-wow-duration=".75s">
					<h2 class="accordion-header" id="heading4-2">
										<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4-2" aria-expanded="false" aria-controls="collapse4-2">
											Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ?
										</button>
										</h2>
					<div id="collapse4-2" class="accordion-collapse collapse" aria-labelledby="heading4-2" data-bs-parent="#accordion4">
						<div class="accordion-body">
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
						</div>
					</div>
				</div>
				<div class="accordion-item wow fadeInUp" data-wow-delay=".15s" data-wow-duration=".75s">
					<h2 class="accordion-header" id="heading4-3">
										<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4-3" aria-expanded="false" aria-controls="collapse4-3">
											Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ?
										</button>
										</h2>
					<div id="collapse4-3" class="accordion-collapse collapse" aria-labelledby="heading4-3" data-bs-parent="#accordion4">
						<div class="accordion-body">
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
						</div>
					</div>
				</div>
				<div class="accordion-item wow fadeInUp" data-wow-delay=".15s" data-wow-duration=".75s">
					<h2 class="accordion-header" id="heading4-4">
										<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4-4" aria-expanded="false" aria-controls="collapse4-4">
											Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ?
										</button>
										</h2>
					<div id="collapse4-4" class="accordion-collapse collapse" aria-labelledby="heading4-4" data-bs-parent="#accordion4">
						<div class="accordion-body">
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		</div>