Collapsable bootstrap multilevel listview populated from database for beginners
<p>As a beginning coder, I could use some help understanding what's involved in building a listview populated from a database with rows that can expand and collapse, providing more information, with embedded buttons for controls? I'd like to use mostly bootstrap and python or PHP and replicate this: <a href="http://preview.iatistandard.org/index.php?url=http%3A//iati.oxfam.org.uk/xml/oxfamgb-lb.xml" rel="nofollow">http://preview.iatistandard.org/index.php?url=http%3A//iati.oxfam.org.uk/xml/oxfamgb-lb.xml</a></p>

<p>Answers to similar questions are too high-level. Can someone please map out the example's basic components and functions at least and where the database scripts go and what they do? Thanks!</p>

<p>Here is the DEMO that you required </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('.collapse').on('shown.bs.collapse', function (e) {

        //Get the id of the collapsible which is opened
        var id = $(this).attr("id");
        //Set the minus icon as this collapsible is now opened
        $('a[href="#'+ id +'"]').find("span.glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
        //You know now which collapsible is clicked, so get the data for this id which is in attribute data-collapisbleId
         var collapsibleDataId = $(this).data("collapisbleId");
  //Now we have the id of the collapisble whihc we can use to get the deatails for this id, and then we will insert that into the detail section
        

    }).on('hide.bs.collapse', function (e) {
       var id = $(this).attr("id");
        $('a[href="#'+ id +'"]').find("span.glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
      var collapsibleDataId = $(this).data("collapisbleId");
     $.ajax({
         //Make hit to get the detials using ajax and on success of that insert the data in the  dic with id = $(this).attr("id"); whihc is current div
     });
    });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;


&lt;!-- Here I have just added the hardwired collapisbles, you have to make here loop to make these 
for  example. You got here the list of the collapisable heading and then you are making loop to make the collapisble

I have used here ASP.Net MVC as am not good in PHP or Python but the logic will go same here. Think as the below div are created using this loop

@(for var i= 0; i&gt; Model.Count(); i++){
   &lt;div&gt;
    &lt;a class="btn btn-link" role="button" data-toggle="collapse" href="#link@(i+1)" aria-expanded="false" aria-controls="collapseExample"&gt;
        &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt; &amp;nbsp;Link 1
    &lt;/a&gt;

    &lt;div class="collapse" id="link@(i+1)" data-collapisbleId="@Model.Id"&gt;
           //Detials section
    &lt;/div&gt;
  &lt;/div&gt;

} --&gt;
&lt;div&gt;
    &lt;a class="btn btn-link" role="button" data-toggle="collapse" href="#link1" aria-expanded="false" aria-controls="collapseExample"&gt;
        &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt; &amp;nbsp;Link 1
    &lt;/a&gt;

    &lt;div class="collapse" id="link1" data-collapisbleId="1"&gt;
        &lt;!--Detials section--&gt;
      Link 1
    &lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
    &lt;a class="btn btn-link" role="button" data-toggle="collapse" href="#link2" aria-expanded="false" aria-controls="collapseExample"&gt;
        &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt; &amp;nbsp;Link 2
    &lt;/a&gt;

    &lt;div class="collapse" id="link2" data-collapisbleId="2"&gt;
   &lt;!--Detials section--&gt;
        &lt;ul class="list-group"&gt;
            &lt;li class="list-group-item"&gt;Cras justo odio&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Dapibus ac facilisis in&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Morbi leo risus&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Porta ac consectetur ac&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Vestibulum at eros&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<pre><code>**Complete DEMO**

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;title&gt;Bootstrap Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
$(document).ready(function(){
 $('.collapse').on('shown.bs.collapse', function (e) {

        //Get the id of the collapsible which is opened
        var id = $(this).attr("id");
        //Set the minus icon as this collapsible is now opened
        $('a[href="#'+ id +'"]').find("span.glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
        //You know now which collapsible is clicked, so get the data for this id which is in attribute data-collapisbleId
         var collapsibleDataId = $(this).data("collapisbleId");
  //Now we have the id of the collapisble whihc we can use to get the deatails for this id, and then we will insert that into the detail section


    }).on('hide.bs.collapse', function (e) {
       var id = $(this).attr("id");
        $('a[href="#'+ id +'"]').find("span.glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
      var collapsibleDataId = $(this).data("collapisbleId");
     $.ajax({
         //Make hit to get the detials using ajax and on success of that insert the data in the  dic with id = $(this).attr("id"); whihc is current div
     });
    });
});
    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;!-- Here I have just added the hardwired collapisbles, you have to make here loop to make these 
for  example. You got here the list of the collapisable heading and then you are making loop to make the collapisble

I have used here ASP.Net MVC as am not good in PHP or Python but the logic will go same here. Think as the below div are created using this loop

@(for var i= 0; i&gt; Model.Count(); i++){
   &lt;div&gt;
    &lt;a class="btn btn-link" role="button" data-toggle="collapse" href="#link@(i+1)" aria-expanded="false" aria-controls="collapseExample"&gt;
        &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt; &amp;nbsp;Link 1
    &lt;/a&gt;

    &lt;div class="collapse" id="link@(i+1)" data-collapisbleId="@Model.Id"&gt;
           //Detials section
    &lt;/div&gt;
  &lt;/div&gt;

} --&gt;
&lt;div&gt;
    &lt;a class="btn btn-link" role="button" data-toggle="collapse" href="#link1" aria-expanded="false" aria-controls="collapseExample"&gt;
        &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt; &amp;nbsp;Link 1
    &lt;/a&gt;

    &lt;div class="collapse" id="link1" data-collapisbleId="1"&gt;
        &lt;!--Detials section--&gt;
      Link 1
    &lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
    &lt;a class="btn btn-link" role="button" data-toggle="collapse" href="#link2" aria-expanded="false" aria-controls="collapseExample"&gt;
        &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt; &amp;nbsp;Link 2
    &lt;/a&gt;

    &lt;div class="collapse" id="link2" data-collapisbleId="2"&gt;
   &lt;!--Detials section--&gt;
        &lt;ul class="list-group"&gt;
            &lt;li class="list-group-item"&gt;Cras justo odio&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Dapibus ac facilisis in&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Morbi leo risus&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Porta ac consectetur ac&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Vestibulum at eros&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

php python database twitter-bootstrap listview