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>
Great collection and thanks for sharing this info with us. Waiting for more like this.
ReplyDeleteBest AngularJS Training in Chennai
Angularjs Training institute in Chennai
AngularJS Training in Chennai
Angular 2 Training in Chennai
Angular 7 Training in Chennai
PHP Training in Chennai
Web Designing course in Chennai
Web Development courses in Chennai
React JS Training in Chennai
AngularJS Training
Angular 8 Training in Chennai
Nice informative blog, it shares more intresting information. This blog is useful to me.
ReplyDeletePHP Training in Bangalore
PHP Training in Chennai
PHP Course in Bangalore
PHP Training Institute in Bangalore
PHP Classes in Bangalore
AWS Training in Bangalore
Data Science Courses in Bangalore
DevOps Training in Bangalore
DOT NET Training in Bangalore
Data Science Course in Chennai
Thanks for giving excellent Message. Waiting for the next article
ReplyDeleteDOT NET Training in Chennai
DOT NET Course Chennai
dot net institute in chennai
best dotnet training in chennai
dot net training in Porur
Html5 Training in Chennai
Spring Training in Chennai
Struts Training in Chennai
Wordpress Training in Chennai
SAS Training in Chennai
ReplyDeletevery intersting to read your blog and it makes the viewers to visit your blog and keep on updating.
Software Testing Training in Chennai
Software Testing Training in Bangalore
Software Testing Training in Coimbatore
Software Testing Training in Madurai
Best Software Testing Institute in Bangalore
Software Testing Course in Bangalore
Software Testing Training Institute in Bangalore
Selenium Course in Bangalore
I really enjoyed this article. I need more information to learn so kindly update it.
ReplyDeleteSalesforce Training in Chennai
salesforce training in bangalore
Salesforce Course in bangalore
best salesforce training in bangalore
salesforce institute in bangalore
salesforce developer training in bangalore
Big Data Course in Coimbatore
Python Training in Bangalore
salesforce training in marathahalli
salesforce institutes in marathahalli