javascript - Bootstrap showing and collapsing table rows -


so writing program uses php collect data database , data creating html strings shown below.

i echoing data in html file , using bootstrap create table, , table comes out perfectly, looking able have user using website able click on row , more detailed data row clicked on comes down. code wrote try , accomplish looks so:

$htmlstr .= '<tr data-toggle="mycollapse" data-target="#details" class="accordion-toggle">'; $htmlstr .= '<td>' data '</td>'; $htmlstr .= '<td class="text-center">' . number_format(more data) . '</td>'; $htmlstr .= '<td class="text-right">' . round(percentage of data) . '%</td>'; $htmlstr .= '</tr>';  $more = functionfordetails(details looking for); $htmlstr .= $more; 

where functionfordetails() returns:

$htmlstr .= '<tr id="details" class="mycollapse">'; $htmlstr .= '<td class="text-center"><div>' . detailed data . '</div></td>'; $htmlstr .= '<td class="text-center"><div>' . more . '</div></td>'; $htmlstr .= '<td class="text-center"><div>' . more . '%</div></td>'; $htmlstr .= '</tr>'; 

my table comes out fine rows, when click row, nothing happens. want more detailed data row clicked drop down more rows, , go away when click again. wrote css , jquery go along still not work. , yes linking bootstrap libraries , jquery library html. ideas or helpful tips wonderful, thank you!

css code:

table .mycollapse {    display: none; } table .mycollapse.in {   display: table-row; !important } 

jquery code:

$(".mycollapse").click(function() { if($('#versions').hasclass('in')){ $('#versions').removeclass('in'); } else{ $('#versions').addclass('in'); } });

the "in" class doesn't work !important being after semicolon. try doing , think you'll notice changes @ least:

table .mycollapse.in {   display: table-row !important; } 

Comments

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

sql - MySQL query optimization using coalesce -

unity3d - Unity local avoidance in user created world -