content logo

Bootstrap Accordions:

Bootstrap Accordion with Tabs

An accordion is a stack consisting of vertical panels with headers written in them. Each of these headers can be clicked after which the content associated with them will be displayed. This is only one of the many ways by which you can display your content progressively and a really effective one. The users can decide which of the headers they feel like clicking on to see what it has to offer. This gives the users a lot of control in terms of what they want to read and what they will ignore. In theory, the design is perfect for the frequently asked questions section in the site since it needs a concept just like this.

In this post, we are sharing a Bootstrap accordion with you. This accordion with tabs can be used for a variety of different purposes including the frequently asked questions section which we mentioned earlier. With the help of these simple Bootstrap tabs, you can group your content in well-designed accordions and make them much easier to find. Basically, the code features some Bootstrap tabs which you can use for categorizing the content. Each tab can have its own accordions which organizes the content even more.

#

Bootstrap Tabs

#

Bootstrap Accordion

#

Accordion with Tabs

#

Simple Bootstrap Tabs

<!-- This script got from frontendfreecode.com -->
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">
                Syllabus for CSS
                <!--small>Statistics Overview</small-->
            </h1>
            <!--ul class="nav nav-tabs">
                           <li class="active"><a href="#">Home</a></li>
                           <li><a href="#">SVN</a></li>
                           <li><a href="#">iOS</a></li>
                           <li><a href="#">VB.Net</a></li>
                           <li><a href="#">Java</a></li>
                           <li><a href="#">PHP</a></li>
                        </ul-->
            <ul id="myTab" class="nav nav-tabs">
                <li class="active">
                    <a href="#home" data-toggle="tab">
                        Compulsory Subjects
                    </a>
                </li>
                <li><a href="#a" data-toggle="tab">Group A</a></li>
                <!--li class="dropdown">
                              <a href="#" id="myTabDrop1" class="dropdown-toggle" 
                                 data-toggle="dropdown">Java 
                                 <b class="caret"></b>
                              </a>
                              <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                                 <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
                                 <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
                              </ul>
                           </li-->
                <li><a href="#b" data-toggle="tab">Group B</a></li>
                <li><a href="#c" data-toggle="tab">Group C</a></li>
                <li><a href="#d" data-toggle="tab">Group D</a></li>
                <li><a href="#e" data-toggle="tab">Group E</a></li>
                <li><a href="#f" data-toggle="tab">Group F</a></li>
                <li><a href="#g" data-toggle="tab">Group G</a></li>
                <li><a href="#h" data-toggle="tab">Group H</a></li>
                <li><a href="#i" data-toggle="tab">Group I</a></li>
            </ul>
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="home">
                    <div class="content_accordion">
                        <div class="panel-group" id="accordion">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#essay">1. Essay Compulsory (Total Marks-l00)</a>
                                    </h4>
                                </div>
                                <div id="essay" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <p>Candidates will be required to write one or more essays in English. A wide choice of subject will be given. <a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#eng">2. ENGLISH (PRECIS & COMPOSITION) Compulsory (Total Marks-l00)</a>
                                    </h4>
                                </div>
                                <div id="eng" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>
                                            The examination will be based upon a paper carrying 100 marks and will be geared to test the candidates' ability to handle grammatical structure, reading comprehension and analysis, and precise
                                            writing and composition. The candidates should be capable of: Using English correctly and efficiently as a vehicle of communication. Reading, comprehending and analyzing advanced texts. Grammar
                                            and Vocabulary The candidate's ability to handle the structure of English will be tested by framing items based upon grammatical categories that usually create problems for foreign students. There
                                            shall be no prescribed course for this purpose. Reading Comprehension and Analysis Two unseen passages shall be given with a fixed reading time and multiple choice questions would be placed at the
                                            end to be answered. The passage for comprehension shall be fairly technical. The passages would be selected from writings on economic, social, cultural subjects and international affairs. Precise
                                            Writing The candidates will be required to present an acceptable precis of a given passage. The unseen passage will be selected from current, economic, social, cultural and international affairs.
                                            <a href="#">Learn more.</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#isl">3. Islamic Studies</a>
                                    </h4>
                                </div>
                                <div id="isl" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#eds">4. Everyday Science</a>
                                    </h4>
                                </div>
                                <div id="eds" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#ca">5. Current Affairs</a>
                                    </h4>
                                </div>
                                <div id="ca" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#pa">6. Pakistan Affairs</a>
                                    </h4>
                                </div>
                                <div id="pa" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--accordion end-->
                </div>
                <div class="tab-pane fade" id="a">
                    <div class="content_accordion">
                        <div class="panel-group" id="ga">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#ga" href="#aa">1. Accounting and Auditing </a>
                                    </h4>
                                </div>
                                <div id="aa" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <p>Candidates will be required to write one or more essays in English. A wide choice of subject will be given. <a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#ga" href="#eco">2. Economics</a>
                                    </h4>
                                </div>
                                <div id="eco" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>
                                            The examination will be based upon a paper carrying 100 marks and will be geared to test the candidates' ability to handle grammatical structure, reading comprehension and analysis, and precise
                                            writing and composition. The candidates should be capable of: Using English correctly and efficiently as a vehicle of communication. Reading, comprehending and analyzing advanced texts. Grammar
                                            and Vocabulary The candidate's ability to handle the structure of English will be tested by framing items based upon grammatical categories that usually create problems for foreign students. There
                                            shall be no prescribed course for this purpose. Reading Comprehension and Analysis Two unseen passages shall be given with a fixed reading time and multiple choice questions would be placed at the
                                            end to be answered. The passage for comprehension shall be fairly technical. The passages would be selected from writings on economic, social, cultural subjects and international affairs. Precise
                                            Writing The candidates will be required to present an acceptable precis of a given passage. The unseen passage will be selected from current, economic, social, cultural and international affairs.
                                            <a href="#">Learn more.</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#ga" href="#pba">3. Public Administration</a>
                                    </h4>
                                </div>
                                <div id="pba" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#ga" href="#ba">4.Business Administration</a>
                                    </h4>
                                </div>
                                <div id="ba" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--accordion end-->
                </div>
                <div class="tab-pane fade" id="b">
                    <div class="content_accordion">
                        <div class="panel-group" id="gb">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gb" href="#ps">1. Political Science </a>
                                    </h4>
                                </div>
                                <div id="ps" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <p>Candidates will be required to write one or more essays in English. A wide choice of subject will be given. <a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gb" href="#agr">2. Agriculture</a>
                                    </h4>
                                </div>
                                <div id="agr" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>
                                            The examination will be based upon a paper carrying 100 marks and will be geared to test the candidates' ability to handle grammatical structure, reading comprehension and analysis, and precise
                                            writing and composition. The candidates should be capable of: Using English correctly and efficiently as a vehicle of communication. Reading, comprehending and analyzing advanced texts. Grammar
                                            and Vocabulary The candidate's ability to handle the structure of English will be tested by framing items based upon grammatical categories that usually create problems for foreign students. There
                                            shall be no prescribed course for this purpose. Reading Comprehension and Analysis Two unseen passages shall be given with a fixed reading time and multiple choice questions would be placed at the
                                            end to be answered. The passage for comprehension shall be fairly technical. The passages would be selected from writings on economic, social, cultural subjects and international affairs. Precise
                                            Writing The candidates will be required to present an acceptable precis of a given passage. The unseen passage will be selected from current, economic, social, cultural and international affairs.
                                            <a href="#">Learn more.</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gb" href="#for">3. Forestry </a>
                                    </h4>
                                </div>
                                <div id="for" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gb" href="#soc">4.Sociology</a>
                                    </h4>
                                </div>
                                <div id="soc" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gb" href="#jou">5.Journalism</a>
                                    </h4>
                                </div>
                                <div id="jou" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--accordion end-->
                </div>
                <div class="tab-pane fade" id="c">
                    <div class="content_accordion">
                        <div class="panel-group" id="gc">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gc" href="#pm">1. Pure Mathematics </a>
                                    </h4>
                                </div>
                                <div id="pm" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <p>Candidates will be required to write one or more essays in English. A wide choice of subject will be given. <a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gc" href="#am">2. Applied Mathematics</a>
                                    </h4>
                                </div>
                                <div id="am" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>
                                            The examination will be based upon a paper carrying 100 marks and will be geared to test the candidates' ability to handle grammatical structure, reading comprehension and analysis, and precise
                                            writing and composition. <a href="#">Learn more.</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gc" href="#cs">3. Computer Science </a>
                                    </h4>
                                </div>
                                <div id="cs" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gc" href="#stat">4.Statistics</a>
                                    </h4>
                                </div>
                                <div id="stat" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--accordion end-->
                </div>
                <div class="tab-pane fade" id="d">
                    <div class="content_accordion">
                        <div class="panel-group" id="gd">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gd" href="#ps">1. Physics </a>
                                    </h4>
                                </div>
                                <div id="phy" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <p>Candidates will be required to write one or more essays in English. A wide choice of subject will be given. <a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gd" href="#geo">2. Geology</a>
                                    </h4>
                                </div>
                                <div id="geo" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>
                                            The examination will be based upon a paper carrying 100 marks and will be geared to test the candidates' ability to handle grammatical structure, reading comprehension and analysis, and precise
                                            writing and composition. The candidates should be capable of: Using English correctly and efficiently as a vehicle of communication. Reading, comprehending and analyzing advanced texts. Grammar
                                            and Vocabulary The candidate's ability to handle the structure of English will be tested by framing items based upon grammatical categories that usually create problems for foreign students. There
                                            shall be no prescribed course for this purpose. Reading Comprehension and Analysis Two unseen passages shall be given with a fixed reading time and multiple choice questions would be placed at the
                                            end to be answered. The passage for comprehension shall be fairly technical. The passages would be selected from writings on economic, social, cultural subjects and international affairs. Precise
                                            Writing The candidates will be required to present an acceptable precis of a given passage. The unseen passage will be selected from current, economic, social, cultural and international affairs.
                                            <a href="#">Learn more.</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gd" href="#geog">3. Geography </a>
                                    </h4>
                                </div>
                                <div id="geog" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gd" href="#chem">4.Chemistry</a>
                                    </h4>
                                </div>
                                <div id="chem" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gd" href="#bot">5. Botany</a>
                                    </h4>
                                </div>
                                <div id="bot" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--accordion end-->
                </div>
                <div class="tab-pane fade" id="e">
                    <div class="content_accordion">
                        <div class="panel-group" id="ge">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#ge" href="#ihc">1. Islamic History & Culture </a>
                                    </h4>
                                </div>
                                <div id="ihc" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <p>Candidates will be required to write one or more essays in English. A wide choice of subject will be given. <a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#ge" href="#iph">2. Indo Pak History</a>
                                    </h4>
                                </div>
                                <div id="iph" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>
                                            The examination will be based upon a paper carrying 100 marks and will be geared to test the candidates' ability to handle grammatical structure, reading comprehension and analysis, and precise
                                            writing and composition. The candidates should be capable of: Using English correctly and efficiently as a vehicle of communication. Reading, comprehending and analyzing advanced texts. Grammar
                                            and Vocabulary The candidate's ability to handle the structure of English will be tested by framing items based upon grammatical categories that usually create problems for foreign students. There
                                            shall be no prescribed course for this purpose. Reading Comprehension and Analysis Two unseen passages shall be given with a fixed reading time and multiple choice questions would be placed at the
                                            end to be answered. The passage for comprehension shall be fairly technical. The passages would be selected from writings on economic, social, cultural subjects and international affairs. Precise
                                            Writing The candidates will be required to present an acceptable precis of a given passage. The unseen passage will be selected from current, economic, social, cultural and international affairs.
                                            <a href="#">Learn more.</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#ge" href="#bh">3. British history </a>
                                    </h4>
                                </div>
                                <div id="bh" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#ge" href="#ah">4. History of United States of America</a>
                                    </h4>
                                </div>
                                <div id="ah" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#ge" href="#eh">5. European History</a>
                                    </h4>
                                </div>
                                <div id="eh" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--accordion end-->
                </div>
                <div class="tab-pane fade" id="f">
                    <div class="content_accordion">
                        <div class="panel-group" id="gf">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gf" href="#law">1. Law </a>
                                    </h4>
                                </div>
                                <div id="law" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <p>Candidates will be required to write one or more essays in English. A wide choice of subject will be given. <a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gf" href="#ilaw">2. International Law</a>
                                    </h4>
                                </div>
                                <div id="ilaw" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>
                                            The examination will be based upon a paper carrying 100 marks and will be geared to test the candidates' ability to handle grammatical structure, reading comprehension and analysis, and precise
                                            writing and composition. The candidates should be capable of: Using English correctly and efficiently as a vehicle of communication. Reading, comprehending and analyzing advanced texts. Grammar
                                            and Vocabulary The candidate's ability to handle the structure of English will be tested by framing items based upon grammatical categories that usually create problems for foreign students. There
                                            shall be no prescribed course for this purpose. Reading Comprehension and Analysis Two unseen passages shall be given with a fixed reading time and multiple choice questions would be placed at the
                                            end to be answered. The passage for comprehension shall be fairly technical. The passages would be selected from writings on economic, social, cultural subjects and international affairs. Precise
                                            Writing The candidates will be required to present an acceptable precis of a given passage. The unseen passage will be selected from current, economic, social, cultural and international affairs.
                                            <a href="#">Learn more.</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gf" href="#claw">3. Constitutional Law </a>
                                    </h4>
                                </div>
                                <div id="claw" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gf" href="#mlaw">4. Mercantile Law</a>
                                    </h4>
                                </div>
                                <div id="mlaw" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gf" href="#mlj">5. Muslim Law and Jurisprudence</a>
                                    </h4>
                                </div>
                                <div id="mlj" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--accordion end-->
                </div>
                <div class="tab-pane fade" id="g">
                    <div class="content_accordion">
                        <div class="panel-group" id="gg">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gg" href="#psy">1. Psychology </a>
                                    </h4>
                                </div>
                                <div id="psy" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <p>Candidates will be required to write one or more essays in English. A wide choice of subject will be given. <a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gg" href="#phi">2. Philosophy</a>
                                    </h4>
                                </div>
                                <div id="phi" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>
                                            The examination will be based upon a paper carrying 100 marks and will be geared to test the candidates' ability to handle grammatical structure, reading comprehension and analysis, and precise
                                            writing and composition. The candidates should be capable of: Using English correctly and efficiently as a vehicle of communication. Reading, comprehending and analyzing advanced texts. Grammar
                                            and Vocabulary The candidate's ability to handle the structure of English will be tested by framing items based upon grammatical categories that usually create problems for foreign students. There
                                            shall be no prescribed course for this purpose. Reading Comprehension and Analysis Two unseen passages shall be given with a fixed reading time and multiple choice questions would be placed at the
                                            end to be answered. The passage for comprehension shall be fairly technical. The passages would be selected from writings on economic, social, cultural subjects and international affairs. Precise
                                            Writing The candidates will be required to present an acceptable precis of a given passage. The unseen passage will be selected from current, economic, social, cultural and international affairs.
                                            <a href="#">Learn more.</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--accordion end-->
                </div>
                <div class="tab-pane fade" id="h">
                    <div class="content_accordion">
                        <div class="panel-group" id="gh">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gh" href="#sind">1. Sindhi </a>
                                    </h4>
                                </div>
                                <div id="sind" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <p>Candidates will be required to write one or more essays in English. A wide choice of subject will be given. <a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gh" href="#bal">2. Balochi</a>
                                    </h4>
                                </div>
                                <div id="bal" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>
                                            The examination will be based upon a paper carrying 100 marks and will be geared to test the candidates' ability to handle grammatical structure, reading comprehension and analysis, and precise
                                            writing and composition. The candidates should be capable of: Using English correctly and efficiently as a vehicle of communication. Reading, comprehending and analyzing advanced texts. Grammar
                                            and Vocabulary The candidate's ability to handle the structure of English will be tested by framing items based upon grammatical categories that usually create problems for foreign students. There
                                            shall be no prescribed course for this purpose. Reading Comprehension and Analysis Two unseen passages shall be given with a fixed reading time and multiple choice questions would be placed at the
                                            end to be answered. The passage for comprehension shall be fairly technical. The passages would be selected from writings on economic, social, cultural subjects and international affairs. Precise
                                            Writing The candidates will be required to present an acceptable precis of a given passage. The unseen passage will be selected from current, economic, social, cultural and international affairs.
                                            <a href="#">Learn more.</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gh" href="#kpk">3. Pushto </a>
                                    </h4>
                                </div>
                                <div id="kpk" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gh" href="#pun">4.Punjabi</a>
                                    </h4>
                                </div>
                                <div id="pun" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--accordion end-->
                </div>
                <div class="tab-pane fade" id="i">
                    <div class="content_accordion">
                        <div class="panel-group" id="gi">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gi" href="#el">1. English Literature </a>
                                    </h4>
                                </div>
                                <div id="el" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <p>Candidates will be required to write one or more essays in English. A wide choice of subject will be given. <a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gi" href="#urd">2. Urdu</a>
                                    </h4>
                                </div>
                                <div id="urd" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>
                                            The examination will be based upon a paper carrying 100 marks and will be geared to test the candidates' ability to handle grammatical structure, reading comprehension and analysis, and precise
                                            writing and composition. The candidates should be capable of: Using English correctly and efficiently as a vehicle of communication. Reading, comprehending and analyzing advanced texts. Grammar
                                            and Vocabulary The candidate's ability to handle the structure of English will be tested by framing items based upon grammatical categories that usually create problems for foreign students. There
                                            shall be no prescribed course for this purpose. Reading Comprehension and Analysis Two unseen passages shall be given with a fixed reading time and multiple choice questions would be placed at the
                                            end to be answered. The passage for comprehension shall be fairly technical. The passages would be selected from writings on economic, social, cultural subjects and international affairs. Precise
                                            Writing The candidates will be required to present an acceptable precis of a given passage. The unseen passage will be selected from current, economic, social, cultural and international affairs.
                                            <a href="#">Learn more.</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gi" href="#per">3. Persian </a>
                                    </h4>
                                </div>
                                <div id="per" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gi" href="#arb">4. Arabic</a>
                                    </h4>
                                </div>
                                <div id="arb" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
.content_accordion {
    margin: 20px;
}
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.content_accordion {
    margin: 20px;
}
</style>

</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">
                Syllabus for CSS
                <!--small>Statistics Overview</small-->
            </h1>
            <!--ul class="nav nav-tabs">
                           <li class="active"><a href="#">Home</a></li>
                           <li><a href="#">SVN</a></li>
                           <li><a href="#">iOS</a></li>
                           <li><a href="#">VB.Net</a></li>
                           <li><a href="#">Java</a></li>
                           <li><a href="#">PHP</a></li>
                        </ul-->
            <ul id="myTab" class="nav nav-tabs">
                <li class="active">
                    <a href="#home" data-toggle="tab">
                        Compulsory Subjects
                    </a>
                </li>
                <li><a href="#a" data-toggle="tab">Group A</a></li>
                <!--li class="dropdown">
                              <a href="#" id="myTabDrop1" class="dropdown-toggle" 
                                 data-toggle="dropdown">Java 
                                 <b class="caret"></b>
                              </a>
                              <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                                 <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
                                 <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
                              </ul>
                           </li-->
                <li><a href="#b" data-toggle="tab">Group B</a></li>
                <li><a href="#c" data-toggle="tab">Group C</a></li>
                <li><a href="#d" data-toggle="tab">Group D</a></li>
                <li><a href="#e" data-toggle="tab">Group E</a></li>
                <li><a href="#f" data-toggle="tab">Group F</a></li>
                <li><a href="#g" data-toggle="tab">Group G</a></li>
                <li><a href="#h" data-toggle="tab">Group H</a></li>
                <li><a href="#i" data-toggle="tab">Group I</a></li>
            </ul>
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="home">
                    <div class="content_accordion">
                        <div class="panel-group" id="accordion">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#essay">1. Essay Compulsory (Total Marks-l00)</a>
                                    </h4>
                                </div>
                                <div id="essay" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <p>Candidates will be required to write one or more essays in English. A wide choice of subject will be given. <a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#eng">2. ENGLISH (PRECIS & COMPOSITION) Compulsory (Total Marks-l00)</a>
                                    </h4>
                                </div>
                                <div id="eng" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>
                                            The examination will be based upon a paper carrying 100 marks and will be geared to test the candidates' ability to handle grammatical structure, reading comprehension and analysis, and precise
                                            writing and composition. The candidates should be capable of: Using English correctly and efficiently as a vehicle of communication. Reading, comprehending and analyzing advanced texts. Grammar
                                            and Vocabulary The candidate's ability to handle the structure of English will be tested by framing items based upon grammatical categories that usually create problems for foreign students. There
                                            shall be no prescribed course for this purpose. Reading Comprehension and Analysis Two unseen passages shall be given with a fixed reading time and multiple choice questions would be placed at the
                                            end to be answered. The passage for comprehension shall be fairly technical. The passages would be selected from writings on economic, social, cultural subjects and international affairs. Precise
                                            Writing The candidates will be required to present an acceptable precis of a given passage. The unseen passage will be selected from current, economic, social, cultural and international affairs.
                                            <a href="#">Learn more.</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#isl">3. Islamic Studies</a>
                                    </h4>
                                </div>
                                <div id="isl" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#eds">4. Everyday Science</a>
                                    </h4>
                                </div>
                                <div id="eds" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#ca">5. Current Affairs</a>
                                    </h4>
                                </div>
                                <div id="ca" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#pa">6. Pakistan Affairs</a>
                                    </h4>
                                </div>
                                <div id="pa" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--accordion end-->
                </div>
                <div class="tab-pane fade" id="a">
                    <div class="content_accordion">
                        <div class="panel-group" id="ga">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#ga" href="#aa">1. Accounting and Auditing </a>
                                    </h4>
                                </div>
                                <div id="aa" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <p>Candidates will be required to write one or more essays in English. A wide choice of subject will be given. <a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#ga" href="#eco">2. Economics</a>
                                    </h4>
                                </div>
                                <div id="eco" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>
                                            The examination will be based upon a paper carrying 100 marks and will be geared to test the candidates' ability to handle grammatical structure, reading comprehension and analysis, and precise
                                            writing and composition. The candidates should be capable of: Using English correctly and efficiently as a vehicle of communication. Reading, comprehending and analyzing advanced texts. Grammar
                                            and Vocabulary The candidate's ability to handle the structure of English will be tested by framing items based upon grammatical categories that usually create problems for foreign students. There
                                            shall be no prescribed course for this purpose. Reading Comprehension and Analysis Two unseen passages shall be given with a fixed reading time and multiple choice questions would be placed at the
                                            end to be answered. The passage for comprehension shall be fairly technical. The passages would be selected from writings on economic, social, cultural subjects and international affairs. Precise
                                            Writing The candidates will be required to present an acceptable precis of a given passage. The unseen passage will be selected from current, economic, social, cultural and international affairs.
                                            <a href="#">Learn more.</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#ga" href="#pba">3. Public Administration</a>
                                    </h4>
                                </div>
                                <div id="pba" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#ga" href="#ba">4.Business Administration</a>
                                    </h4>
                                </div>
                                <div id="ba" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--accordion end-->
                </div>
                <div class="tab-pane fade" id="b">
                    <div class="content_accordion">
                        <div class="panel-group" id="gb">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gb" href="#ps">1. Political Science </a>
                                    </h4>
                                </div>
                                <div id="ps" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <p>Candidates will be required to write one or more essays in English. A wide choice of subject will be given. <a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gb" href="#agr">2. Agriculture</a>
                                    </h4>
                                </div>
                                <div id="agr" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>
                                            The examination will be based upon a paper carrying 100 marks and will be geared to test the candidates' ability to handle grammatical structure, reading comprehension and analysis, and precise
                                            writing and composition. The candidates should be capable of: Using English correctly and efficiently as a vehicle of communication. Reading, comprehending and analyzing advanced texts. Grammar
                                            and Vocabulary The candidate's ability to handle the structure of English will be tested by framing items based upon grammatical categories that usually create problems for foreign students. There
                                            shall be no prescribed course for this purpose. Reading Comprehension and Analysis Two unseen passages shall be given with a fixed reading time and multiple choice questions would be placed at the
                                            end to be answered. The passage for comprehension shall be fairly technical. The passages would be selected from writings on economic, social, cultural subjects and international affairs. Precise
                                            Writing The candidates will be required to present an acceptable precis of a given passage. The unseen passage will be selected from current, economic, social, cultural and international affairs.
                                            <a href="#">Learn more.</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gb" href="#for">3. Forestry </a>
                                    </h4>
                                </div>
                                <div id="for" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gb" href="#soc">4.Sociology</a>
                                    </h4>
                                </div>
                                <div id="soc" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gb" href="#jou">5.Journalism</a>
                                    </h4>
                                </div>
                                <div id="jou" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--accordion end-->
                </div>
                <div class="tab-pane fade" id="c">
                    <div class="content_accordion">
                        <div class="panel-group" id="gc">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gc" href="#pm">1. Pure Mathematics </a>
                                    </h4>
                                </div>
                                <div id="pm" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <p>Candidates will be required to write one or more essays in English. A wide choice of subject will be given. <a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gc" href="#am">2. Applied Mathematics</a>
                                    </h4>
                                </div>
                                <div id="am" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>
                                            The examination will be based upon a paper carrying 100 marks and will be geared to test the candidates' ability to handle grammatical structure, reading comprehension and analysis, and precise
                                            writing and composition. <a href="#">Learn more.</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gc" href="#cs">3. Computer Science </a>
                                    </h4>
                                </div>
                                <div id="cs" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gc" href="#stat">4.Statistics</a>
                                    </h4>
                                </div>
                                <div id="stat" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--accordion end-->
                </div>
                <div class="tab-pane fade" id="d">
                    <div class="content_accordion">
                        <div class="panel-group" id="gd">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gd" href="#ps">1. Physics </a>
                                    </h4>
                                </div>
                                <div id="phy" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <p>Candidates will be required to write one or more essays in English. A wide choice of subject will be given. <a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gd" href="#geo">2. Geology</a>
                                    </h4>
                                </div>
                                <div id="geo" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>
                                            The examination will be based upon a paper carrying 100 marks and will be geared to test the candidates' ability to handle grammatical structure, reading comprehension and analysis, and precise
                                            writing and composition. The candidates should be capable of: Using English correctly and efficiently as a vehicle of communication. Reading, comprehending and analyzing advanced texts. Grammar
                                            and Vocabulary The candidate's ability to handle the structure of English will be tested by framing items based upon grammatical categories that usually create problems for foreign students. There
                                            shall be no prescribed course for this purpose. Reading Comprehension and Analysis Two unseen passages shall be given with a fixed reading time and multiple choice questions would be placed at the
                                            end to be answered. The passage for comprehension shall be fairly technical. The passages would be selected from writings on economic, social, cultural subjects and international affairs. Precise
                                            Writing The candidates will be required to present an acceptable precis of a given passage. The unseen passage will be selected from current, economic, social, cultural and international affairs.
                                            <a href="#">Learn more.</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gd" href="#geog">3. Geography </a>
                                    </h4>
                                </div>
                                <div id="geog" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gd" href="#chem">4.Chemistry</a>
                                    </h4>
                                </div>
                                <div id="chem" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gd" href="#bot">5. Botany</a>
                                    </h4>
                                </div>
                                <div id="bot" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--accordion end-->
                </div>
                <div class="tab-pane fade" id="e">
                    <div class="content_accordion">
                        <div class="panel-group" id="ge">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#ge" href="#ihc">1. Islamic History & Culture </a>
                                    </h4>
                                </div>
                                <div id="ihc" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <p>Candidates will be required to write one or more essays in English. A wide choice of subject will be given. <a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#ge" href="#iph">2. Indo Pak History</a>
                                    </h4>
                                </div>
                                <div id="iph" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>
                                            The examination will be based upon a paper carrying 100 marks and will be geared to test the candidates' ability to handle grammatical structure, reading comprehension and analysis, and precise
                                            writing and composition. The candidates should be capable of: Using English correctly and efficiently as a vehicle of communication. Reading, comprehending and analyzing advanced texts. Grammar
                                            and Vocabulary The candidate's ability to handle the structure of English will be tested by framing items based upon grammatical categories that usually create problems for foreign students. There
                                            shall be no prescribed course for this purpose. Reading Comprehension and Analysis Two unseen passages shall be given with a fixed reading time and multiple choice questions would be placed at the
                                            end to be answered. The passage for comprehension shall be fairly technical. The passages would be selected from writings on economic, social, cultural subjects and international affairs. Precise
                                            Writing The candidates will be required to present an acceptable precis of a given passage. The unseen passage will be selected from current, economic, social, cultural and international affairs.
                                            <a href="#">Learn more.</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#ge" href="#bh">3. British history </a>
                                    </h4>
                                </div>
                                <div id="bh" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#ge" href="#ah">4. History of United States of America</a>
                                    </h4>
                                </div>
                                <div id="ah" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#ge" href="#eh">5. European History</a>
                                    </h4>
                                </div>
                                <div id="eh" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--accordion end-->
                </div>
                <div class="tab-pane fade" id="f">
                    <div class="content_accordion">
                        <div class="panel-group" id="gf">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gf" href="#law">1. Law </a>
                                    </h4>
                                </div>
                                <div id="law" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <p>Candidates will be required to write one or more essays in English. A wide choice of subject will be given. <a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gf" href="#ilaw">2. International Law</a>
                                    </h4>
                                </div>
                                <div id="ilaw" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>
                                            The examination will be based upon a paper carrying 100 marks and will be geared to test the candidates' ability to handle grammatical structure, reading comprehension and analysis, and precise
                                            writing and composition. The candidates should be capable of: Using English correctly and efficiently as a vehicle of communication. Reading, comprehending and analyzing advanced texts. Grammar
                                            and Vocabulary The candidate's ability to handle the structure of English will be tested by framing items based upon grammatical categories that usually create problems for foreign students. There
                                            shall be no prescribed course for this purpose. Reading Comprehension and Analysis Two unseen passages shall be given with a fixed reading time and multiple choice questions would be placed at the
                                            end to be answered. The passage for comprehension shall be fairly technical. The passages would be selected from writings on economic, social, cultural subjects and international affairs. Precise
                                            Writing The candidates will be required to present an acceptable precis of a given passage. The unseen passage will be selected from current, economic, social, cultural and international affairs.
                                            <a href="#">Learn more.</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gf" href="#claw">3. Constitutional Law </a>
                                    </h4>
                                </div>
                                <div id="claw" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gf" href="#mlaw">4. Mercantile Law</a>
                                    </h4>
                                </div>
                                <div id="mlaw" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gf" href="#mlj">5. Muslim Law and Jurisprudence</a>
                                    </h4>
                                </div>
                                <div id="mlj" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--accordion end-->
                </div>
                <div class="tab-pane fade" id="g">
                    <div class="content_accordion">
                        <div class="panel-group" id="gg">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gg" href="#psy">1. Psychology </a>
                                    </h4>
                                </div>
                                <div id="psy" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <p>Candidates will be required to write one or more essays in English. A wide choice of subject will be given. <a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gg" href="#phi">2. Philosophy</a>
                                    </h4>
                                </div>
                                <div id="phi" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>
                                            The examination will be based upon a paper carrying 100 marks and will be geared to test the candidates' ability to handle grammatical structure, reading comprehension and analysis, and precise
                                            writing and composition. The candidates should be capable of: Using English correctly and efficiently as a vehicle of communication. Reading, comprehending and analyzing advanced texts. Grammar
                                            and Vocabulary The candidate's ability to handle the structure of English will be tested by framing items based upon grammatical categories that usually create problems for foreign students. There
                                            shall be no prescribed course for this purpose. Reading Comprehension and Analysis Two unseen passages shall be given with a fixed reading time and multiple choice questions would be placed at the
                                            end to be answered. The passage for comprehension shall be fairly technical. The passages would be selected from writings on economic, social, cultural subjects and international affairs. Precise
                                            Writing The candidates will be required to present an acceptable precis of a given passage. The unseen passage will be selected from current, economic, social, cultural and international affairs.
                                            <a href="#">Learn more.</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--accordion end-->
                </div>
                <div class="tab-pane fade" id="h">
                    <div class="content_accordion">
                        <div class="panel-group" id="gh">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gh" href="#sind">1. Sindhi </a>
                                    </h4>
                                </div>
                                <div id="sind" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <p>Candidates will be required to write one or more essays in English. A wide choice of subject will be given. <a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gh" href="#bal">2. Balochi</a>
                                    </h4>
                                </div>
                                <div id="bal" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>
                                            The examination will be based upon a paper carrying 100 marks and will be geared to test the candidates' ability to handle grammatical structure, reading comprehension and analysis, and precise
                                            writing and composition. The candidates should be capable of: Using English correctly and efficiently as a vehicle of communication. Reading, comprehending and analyzing advanced texts. Grammar
                                            and Vocabulary The candidate's ability to handle the structure of English will be tested by framing items based upon grammatical categories that usually create problems for foreign students. There
                                            shall be no prescribed course for this purpose. Reading Comprehension and Analysis Two unseen passages shall be given with a fixed reading time and multiple choice questions would be placed at the
                                            end to be answered. The passage for comprehension shall be fairly technical. The passages would be selected from writings on economic, social, cultural subjects and international affairs. Precise
                                            Writing The candidates will be required to present an acceptable precis of a given passage. The unseen passage will be selected from current, economic, social, cultural and international affairs.
                                            <a href="#">Learn more.</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gh" href="#kpk">3. Pushto </a>
                                    </h4>
                                </div>
                                <div id="kpk" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gh" href="#pun">4.Punjabi</a>
                                    </h4>
                                </div>
                                <div id="pun" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--accordion end-->
                </div>
                <div class="tab-pane fade" id="i">
                    <div class="content_accordion">
                        <div class="panel-group" id="gi">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gi" href="#el">1. English Literature </a>
                                    </h4>
                                </div>
                                <div id="el" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <p>Candidates will be required to write one or more essays in English. A wide choice of subject will be given. <a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gi" href="#urd">2. Urdu</a>
                                    </h4>
                                </div>
                                <div id="urd" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>
                                            The examination will be based upon a paper carrying 100 marks and will be geared to test the candidates' ability to handle grammatical structure, reading comprehension and analysis, and precise
                                            writing and composition. The candidates should be capable of: Using English correctly and efficiently as a vehicle of communication. Reading, comprehending and analyzing advanced texts. Grammar
                                            and Vocabulary The candidate's ability to handle the structure of English will be tested by framing items based upon grammatical categories that usually create problems for foreign students. There
                                            shall be no prescribed course for this purpose. Reading Comprehension and Analysis Two unseen passages shall be given with a fixed reading time and multiple choice questions would be placed at the
                                            end to be answered. The passage for comprehension shall be fairly technical. The passages would be selected from writings on economic, social, cultural subjects and international affairs. Precise
                                            Writing The candidates will be required to present an acceptable precis of a given passage. The unseen passage will be selected from current, economic, social, cultural and international affairs.
                                            <a href="#">Learn more.</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gi" href="#per">3. Persian </a>
                                    </h4>
                                </div>
                                <div id="per" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#gi" href="#arb">4. Arabic</a>
                                    </h4>
                                </div>
                                <div id="arb" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><a href="#">Learn more.</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview