title: How do I show a div below the each table row using bootstrap table?
body: <p>Well, In my website User page all users are showing in <strong>Bootstrap Table</strong>. I'm trying to showing a <strong>hidden content</strong> bellow the each row after click on the row but It's showing the hidden content top of the table ? It's almost done. Can you tell me what is the wrong in my code ?</p>
  
  <p><strong>Here is my full code:</strong></p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.css"&gt;
  &lt;script type="text/javascript" language="javascript" src="media/js/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" src="resources/syntax/shCore.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" src="resources/demo.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" class="init"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function() {
      $('#example').dataTable();
  
      $('#example tbody').on('click', 'tr', function () {
          var name = $('td', this).eq(0).text();
  
      } );
  } );
  &lt;/script&gt;
  
  &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"&gt;
  &lt;script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
  &lt;?php
  $getUser = mysql_query("select * from members ORDER BY user_id DESC");
  $num = mysql_num_rows($getUser);
  ?&gt;
  
  
  &lt;table id="example" class="display" cellspacing="0" width="100%"&gt;
  &lt;thead&gt;
  &lt;tr&gt;
      &lt;th&gt;First Name&lt;/th&gt;
      &lt;th&gt;Last Name&lt;/th&gt;
      &lt;th&gt;Company&lt;/th&gt;
      &lt;th&gt;Position&lt;/th&gt;
      &lt;th&gt;Status&lt;/th&gt;
      &lt;th&gt;Kit type&lt;/th&gt;                       
  &lt;/tr&gt;
  &lt;/thead&gt;                
  &lt;tbody&gt;             
  
  
  &lt;?php
  $i = 0;
  while($search_result =  mysql_fetch_array($getUser)){
      $i++;
  
      $uid = (int) $search_result['user_id']; 
      $fname =  $search_result['fname'];  
      $lname  = $search_result['lname'];                  
      $company  = $search_result['company'];                  
      $position  = $search_result['position'];    
      $status  = $search_result['status'];    
  
      echo "&lt;tr data-toggle='collapse' data-parent='#accordion' href='#collapse$i'&gt;";                                 
      echo "&lt;td class='row' $class valign='top'&gt;$fname&lt;/td&gt;";
      echo "&lt;td class='row' $class  valign='top'&gt;$lname&lt;/td&gt;";                
      echo "&lt;td class='row' $class  valign='top'&gt;$company&lt;/td&gt;";
      echo "&lt;td class='row' $class  valign='top'&gt;$position&lt;/td&gt;";
      echo "&lt;td class='row' $class  valign='top'&gt;$status&lt;/td&gt;";
      echo "&lt;td class='row' $class  valign='top'&gt;$kittype&lt;/td&gt;";  
      ?&gt;
  
      &lt;div id="collapse&lt;?php echo $i; ?&gt;" class="panel-collapse collapse"&gt;
      &lt;p&gt;Hello print &lt;?php echo $i; ?&gt;&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;?php
      echo "&lt;/tr&gt;";   
  }//while statement
  ?&gt;
  
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Update:</strong></p>
  
  <pre><code>echo "&lt;tr data-toggle='collapse' data-parent='#accordion' href='#collapse$i'&gt;";                                 
  echo "&lt;td class='row' $class valign='top'&gt;$fname&lt;/td&gt;";
  echo "&lt;td class='row' $class  valign='top'&gt;$lname&lt;/td&gt;";                
  echo "&lt;td class='row' $class  valign='top'&gt;$company&lt;/td&gt;";
  echo "&lt;td class='row' $class  valign='top'&gt;$position&lt;/td&gt;";
  echo "&lt;td class='row' $class  valign='top'&gt;$status&lt;/td&gt;";
  echo "&lt;td class='row' $class  valign='top'&gt;$kittype&lt;/td&gt;";  
  echo "&lt;/tr&gt;";
  
  echo "&lt;tr&gt;";                                    
  echo "&lt;td colspan='6'&gt;";    
  &lt;div id="collapse&lt;?php echo $i; ?&gt;" class="panel-collapse collapse"&gt;
  &lt;p&gt;Hello print &lt;?php echo $i; ?&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;?php
  echo "&lt;/td&gt;";
  echo "&lt;/tr&gt;";
  </code></pre>
  
  <p><strong>if I use this new row then first page is blank and in second page hidden div is not working after click on a row.</strong></p>