Creating an Accordion – HTML, CSS & jQuery

Pritty October 12, 2015 HTML, jQuery, PHP, Web Development Leave a comment 929 Views

Here jQuery accordion, built with HTML and CSS. Accordion toggle is the new style of toggle.
Accordion is mostly using for FAQ and design features.
This kind of toggle is make the web page as very attractive ,simple and include more content. Here HTML, CSS & jQuery for accordion.

Table of Content

The HTML
The CSS
The jQuery

Demo

The HTML

		<h2 style="text-align:center;color:red;">Responsive jQuery Accordions</h2>
			<hr />
			<div class="container"> 
				<div class="accordion" id="accordionid">
					<div class="accordion-group">
						<div class="accordion-heading">
							<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionid" href="#one">
								<h5>PHP</h5>
							</a>
						</div>
						<div id="one" class="collapse">
							<div class="accordion-inner">
								<p>
									<a href="http://prittytimes.com/php-basic/" target="_blank">
										<li>PHP-Basic</li>
									</a><br />
									<a href="http://prittytimes.com/live-html-compiler-using-php/" target="_blank">
										<li>Live html compiler using PHP</li>
									</a><br />
									<a href="http://prittytimes.com/delete-image-from-folder/" target="_blank">
										<li>Delete image in a folder and database Using PHP</li>
									</a>
									
								</p>
							</div>
						</div>
					</div>
  
					<div class="accordion-group">
						<div class="accordion-heading">
							<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionid" href="#two">
								<h5>jQuery</h5>
							</a>
						</div>
						<div id="two" class="collapse">
							<div class="accordion-inner">
								<p>
									<a href="http://prittytimes.com/jquery-mobile-app-development/" target="_blank"> 
										<li>JQuery for Mobile App Development</li>   
									</a><br />
									<a href="http://prittytimes.com/jquery-basic/" target="_blank"> 
										<li>jQuery-Basic</li>   
									</a><br />
									<a href="http://prittytimes.com/jqueryhiderow-data/" target="_blank"> 
											<li>Jquery:Hide the row data on click</li>   
									</a><br />
									<a href="http://prittytimes.com/jquerycopy/" target="_blank">
										<li>Jquery:Copy the row data on Image/Button Click</li>
									</a>
								</p>
							</div>
						</div>
					</div>
  
					<div class="accordion-group">
						<div class="accordion-heading">
							<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionid" href="#four">
								<h5>Wordpress</h5>
							</a>
						</div>
						<div id="four" class="collapse">
							<div class="accordion-inner">
								<p>
									<a href="http://prittytimes.com/redirect-any-sub-domain-to-a-page-on-main-domain-using-htaccess/" target="_blank"> 
										<li>Redirect subdomain to main domain htaccess</li>   
									</a><br />
									<a href="http://prittytimes.com/removing-file-extensions-using-htaccess/" target="_blank"> 
										<li>Removing file extensions using htaccess</li>   
									</a><br />
									<a href="http://prittytimes.com/wordpress-form-plugin-with-shortcode/" target="_blank"> 
										<li>WordPress Form Plugin with ShortCode</li>   
									</a>
								</p>
							</div>
						</div>
					</div>
					
					<div class="accordion-group">
						<div class="accordion-heading">
							<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionid" href="#five">
								<h5>AngularJS</h5>
							</a>
						</div>
						<div id="five" class="collapse">
							<div class="accordion-inner">
								<p>
									<a href="http://prittytimes.com/angularjs-reading-json-data/" target="_self"> 
										<li><marquee>AngularJS : Reading JSON data</marquee></li>   
									</a><br />
									<a href="http://prittytimes.com/angularjs-controllers/" target="_self"> 
										<li>AngularJS Controllers</li>   
									</a><br />
									<a href="http://prittytimes.com/angularjs-directives/" target="_self"> 
										<li>AngularJS Directives</li> 
									</a>
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>

100

101

<h2 style="text-align:center;color:red;">Responsive jQuery Accordions</h2>

<hr />

</a>

</div>

<p>

<li>PHP-Basic</li>

</a><br />

<li>Live html compiler using PHP</li>

</a><br />

<li>Delete image in a folder and database Using PHP</li>

</a>

</p>

</div>

<h5>jQuery</h5>

</a>

</div>

<p>

<li>JQuery for Mobile App Development</li>

</a><br />

<li>jQuery-Basic</li>

</a><br />

<li>Jquery:Hide the row data on click</li>

</a><br />

<li>Jquery:Copy the row data on Image/Button Click</li>

</a>

</p>

</div>

<h5>Wordpress</h5>

</a>

</div>

<p>

<li>Redirect subdomain to main domain htaccess</li>

</a><br />

<li>Removing file extensions using htaccess</li>

</a><br />

<li>WordPress Form Plugin with ShortCode</li>

</a>

</p>

</div>

<h5>AngularJS</h5>

</a>

</div>

<p>

<li><marquee>AngularJS : Reading JSON data</marquee></li>

</a><br />

<li>AngularJS Controllers</li>

</a><br />

<li>AngularJS Directives</li>

</a>

</p>

</div>

The CSS

	<link rel="stylesheet" href="bootstrap.min.css" />
	<style type="text/css">
		*{ 
			padding:0px; 
			margin:0px;
		}
		.accordion-heading
		{ 
			background-color:#9174E8;
		}
		.accordion-heading:hover 
		{ 
			 background-color:#000; 
			-webkit-transition: all 0.5s ease-in-out;
			-moz-transition: all 0.5s ease-in-out;
			-o-transition: all 0.5s ease-in-out;
			transition: all 0.5s ease-in-out; 
		}
		.accordion-heading > a
		{ 
			color:#FFF; 
			text-decoration:none; 
			text-transform:uppercase; 
		}
	</style>

padding:0px;

margin:0px;

}

.accordion-heading

{

background-color:#9174E8;

}

.accordion-heading:hover

{

background-color:#000;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.accordion-heading > a

{

color:#FFF;

text-decoration:none;

text-transform:uppercase;

}

</style>

The jQuery

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script> 
	<script src="bootstrap.min.js"></script>

1 2	<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script> <script src="bootstrap.min.js"></script>