How to create jQuery Accordion

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 :-
Top 5 Lab Programs Samples in C#

39 Excellent Lab Programs Samples in C#
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>