I am sharing this post to Learn how to create an accordion. Accordions are useful when you want to toggle between hiding and showing large amount of content.
Demo :-
Source Code:-
Demo :-
Source Code:-
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <style> .ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; margin: 2px 0 0 0; padding: .5em .5em .5em .7em; font-size: 100%; } .Code-view-accordion .ui-state-active { border: 1px solid #003eff !important; background: #27AE60 !important; font-weight: normal !important; color: #ffffff !important; } .Code-view-accordion .ui-state-default { border: 1px solid #c5c5c5; background: #2C3E50; font-weight: normal; color: #ffffff; } .Code-view-accordion .ui-widget-content { border: 1px solid #dddddd /*{borderColorContent}*/; background: #ffffff /*{bgColorContent}*/ /*{bgImgUrlContent}*/ /*{bgContentXPos}*/ /*{bgContentYPos}*/ /*{bgContentRepeat}*/; color: #333333 /*{fcContent}*/; } .Code-view-accordion li { border-bottom: 1px solid #eee !important; margin: 0px 0px!important; line-height: 2.5em !important; border: 2px solid lightgoldenrodyellow; box-shadow: 2px 3px 2px #888888; list-style: none; } .Code-view-accordion ul { background: #fff !important; font-size: 13px !important; line-height: 30px !important; list-style-type: none !important; overflow: hidden !important; padding: 0px !important; } .Code-view-accordion ul a { margin-left: 15px !important; text-decoration: none !important; display: block !important; font-weight: 600; } </style> <script> $(function () { //$("#Code-view-accordion").accordion(); $("#Code-view-accordion").accordion({ heightStyle: "fill" }); $("#Code-view-accordion-resizer").resizable({ minHeight: 140, minWidth: 200, resize: function () { $("#accordion").accordion("refresh"); } }); }); </script> </head> <body> <div id="Code-view-accordion-resizer" class="ui-widget-content"> <div id="Code-view-accordion" class="Code-view-accordion"> <h3>Top 5 Sql Server Post</h3> <div> <p> Following are he top 5 swl post </p> <ul> <li> <a href="http://www.code-view.com/2016/11/new-features-in-sql-server-2012.html" target="_blank">List of All new features in SQL Server 2012</a> </li> <li> <a href="http://www.code-view.com/2016/10/sql-scalar-functions.html" target="_blank">Scalar functions in sql server</a> </li> <li> <a href="http://www.code-view.com/2016/09/sql-aggregate-functions.html" target="_blank">Aggregate Functions in SQL Server</a> </li> <li> <a href="http://www.code-view.com/2016/12/sql-server-functions.html" target="_blank">SQL Server Functions</a> </li> <li> <a href="http://www.code-view.com/2016/12/what-is-trigger-in-sql-server.html" target="_blank">Trigger in Sql Server</a> </li> </ul> </div> <h3>Top 5 Apache Cassandra Database Post</h3> <div> <p> Cassandra is highly scalability and high availability without compromising performance NoSQL database </p> <ul> <li> <a href="http://www.code-view.com/2016/12/about-cassandra-database.html" target="_blank">A Complete Introduction to Apache Cassandra database</a> </li> <li> <a href="http://www.code-view.com/2016/12/cassandra-query-language.html" target="_blank">Cassandra Query Language [CQL]</a> </li> <li> <a href="http://www.code-view.com/2016/12/native-data-types.html" target="_blank">Native Data Types in Cassandra Database</a> </li> <li> <a href="http://www.code-view.com/2016/12/collections-data-types.html" target="_blank">Collections Data Types in Cassandra Database</a> </li> <li> <a href="http://www.code-view.com/2016/12/user-defined-types-in-cassandra.html" target="_blank">User-Defined Types in Cassandra Database</a> </li> </ul> </div> <h3>Top 5 HTML5 Post</h3> <div> <p> HTML5 is extended or next revision of HTML standard for structuring and presenting content on the World Wide Web. </p> <ul> <li> <a href="http://www.code-view.com/2016/12/html5-new-featurs.html" target="_blank">New features in HTML5</a> </li> <li> <a href="http://www.code-view.com/2016/12/html5-introduction-and-syntax.html" target="_blank">HTML5 Best Introduction and Syntax [HTML5]</a> </li> <li> <a href="http://www.code-view.com/2016/12/html5-new-input-types.html" >New Input Types with Example In HTML5</a> </li> <li> <a href="http://www.code-view.com/2016/12/html5-new-featurs.html" target="_blank">Why use HTML5</a> </li> <li> <a href="http://www.code-view.com/2016/12/html5-new-featurs.html" target="_blank">What is HTML5</a> </li> </ul> </div> <h3>Top 5 Lab Programs Samples in C#</h3> <div> <p> 39 Excellent Lab Programs Samples in C# </p> <ul> <li> <a href="http://www.code-view.com/2017/01/program-in-c-to-calculate-area-and.html">calculate the area and circumference of a circle</a> </li> <li> <a href="http://www.code-view.com/2017/01/how-to-convert-centigrade-into.html"> Converts Centigrade into Fahrenheit.</a> </li> <li> <a href="http://www.code-view.com/2017/01/how-to-convert-fahrenheit-into.html">Converts Centigrade into Fahrenheit.</a> </li> <li> <a href="http://www.code-view.com/2017/01/program-to-swap-values-of-two-variables.html">swaps values of two variables </a> </li> <li> <a href="http://www.code-view.com/2017/01/program-to-swaps-values-of-two.html">swaps values of two variables without using a third</a> </li> </ul> </div> </div> </div> </body> </html>
