расширяемый вид таблицы в HTML

Question

Я строю динамическую таблицу, которая извлекает и отображает данные из базы данных, структура таблицы выглядит следующим образом

<table class="table" id="report"> 
    <thead> 
    <tr> 
     <th>Title</th> 
     <th>Skill</th> 
     <th>Area</th> 
    </tr> 
    </thead> 

    <tbody> 
    <? 
     $sql="SELECT * from tablename "; 
     $result= mysqli_query($con, $sql); 
     if(mysqli_num_rows($result)>0) { 
     while($row = mysqli_fetch_assoc($result)) { 
      <tr> 
      <td><? echo $title; ?></td> 
      <td><? echo $skill; ?></td> 
      <td><? echo $area; ?></td> 
      </tr> 
     } 
     } 
    </tbody> 
</table> 

Я хочу, что, когда пользователь нажимает на названии вид следует расширить и затем на другой щелчок он должен рухнуть.

Я построил статическую таблицу в jsfiddle, и она работала нормально, но когда я попытался объединить код с моей таблицей выше, он не работает. Кто-нибудь может рассказать, где я ошибся?

Answer 1

Попробуйте JS Fiddle и, надеюсь, она будет работать, я добавил фиктивный текст внутри этого td и по клику на td, что переключает видимость ребенка DIV .hidden

$(document).ready(function() { 
 
    $('.expandable').on('click', function(){ 
 
    \t $(this).children('.hidden').toggle(); 
 
    }); 
 
});

.hidden { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<table id="report" border="1" style="width:100%" > 
 
    <tr> 
 
     <th> First </th> 
 
     <th> Second </th> 
 
     <th> Third </th> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="expandable">1st title 
 
      <div class="hidden">dummy text 1 
 
       <br>dummy text 1 
 
       <br>dummy text 1 
 
       <br> 
 
      </div> 
 
     </td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="expandable">2st title 
 
      <div class="hidden">dummy text 2 
 
       <br>dummy text 2 
 
       <br>dummy text 2 
 
       <br> 
 
      </div> 
 
     </td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
    </tr> 
 
</table>