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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
<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> |
The CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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> |
The jQuery
1 2 |
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script> <script src="bootstrap.min.js"></script> |