Table row toggle is not working

HTML & CSS
1

I am using bootstrap 3.2.0, and created a table on each row should be toggle with child hidden row, I gave ( data-toggle=“collapse” data-target=“#1” class=“accordion-toggle” ) and gave corresponding “id” to child row, but its not opening on clicking table row.

!DOCTYPE html>
<html lang="en">
  <head>
<link href="assets/css/bootstrap3.2.0.css" rel="stylesheet">
<link href="assets/css/customStyle.css" rel="stylesheet">
<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>
                                <script type="text/javascript" src="assets/js/bootstrap.js"></script>
                                <script type="text/javascript" src="assets/js/bootstrap-datetimepicker.js"></script>
  </head>
<body>
<div class="table-responsive tableStyle">
                    <table id="" class="table table-condensed table-hover table-bordered table-responsive" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th class="width50 dispnone">&nbsp;</th>
                                <th>Ticker No.#</th>
                                <th>Warning</th>
                                <th>Status</th>
                                <th>Next Check Time</th>
                                <th>Asset ID</th>
                                <th>Asset Type</th>
                                <th>Reported Trouble Description</th>
                                <th>Active Org</th>
                                <th>Ticket Opened On</th>
                                <th>Last Modified Date</th>
                            </tr>
                        </thead>
                        <tbody>
                        <tr data-toggle="collapse" data-target="#1" class="accordion-toggle" style="cursor:pointer">
                            <td><span class="icon_expand"></span> <span class="icon_green"></span></td>
                            <td>7596322719</td>
                            <td>normal</td>
                            <td>Deferred</td>
                            <td>10:13</td>
                            <td>ab0o2231</td>
                            <td>lorem</td>
                            <td>Lorem ipsum dolor sit</td>
                            <td>lorem</td>
                            <td>12/03/216</td>
                            <td>11/04/216</td>
                        </tr>
                        <tr>
                           <td colspan="11" style="display:none;">
                                    <div class="accordion-body collapse" id="1"> 
                                        <div class="bs-callout bs-callout-info" style="margin:0px;">
                                            <h4><i class="fa fa-info"></i>&nbsp;&nbsp;Detalles</h4>
                                            <p>
                                                Details for row #1
                                            </p>
                                        </div>
                                    </div> 
                            </td>
                        </tr> 
                        </tbody>
                    </table>
                    
                </div>
</body>
</html>
2

Hi,

You have set display:none on the td and then you are trying to reveal a child div of that cell which will be impossible.

Remove the display:none and change the ids from digits only (instead of id=“1” use id =“a1”). I know html5 now allows digits only but nt sure what older browser/script support is like.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Grid System</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>
<body>
<div class="table-responsive tableStyle">
  <table id="" class="table table-condensed table-hover table-bordered table-responsive" width="100%" cellspacing="0">
    <thead>
      <tr>
        <th class="width50 dispnone">&nbsp;</th>
        <th>Ticker No.#</th>
        <th>Warning</th>
        <th>Status</th>
        <th>Next Check Time</th>
        <th>Asset ID</th>
        <th>Asset Type</th>
        <th>Reported Trouble Description</th>
        <th>Active Org</th>
        <th>Ticket Opened On</th>
        <th>Last Modified Date</th>
      </tr>
    </thead>
    <tbody>
      <tr data-toggle="collapse" data-target="#a1" class="accordion-toggle" style="cursor:pointer">
        <td><span class="icon_expand"></span> <span class="icon_green"></span></td>
        <td>7596322719</td>
        <td>normal</td>
        <td>Deferred</td>
        <td>10:13</td>
        <td>ab0o2231</td>
        <td>lorem</td>
        <td>Lorem ipsum dolor sit</td>
        <td>lorem</td>
        <td>12/03/216</td>
        <td>11/04/216</td>
      </tr>
      <tr class="reveal">
        <td colspan="11"><div class="accordion-body collapse" id="a1">
            <div class="bs-callout bs-callout-info" style="margin:0px;">
              <h4><i class="fa fa-info"></i>&nbsp;&nbsp;Detalles</h4>
              <p> Details for row #1 </p>
            </div>
          </div></td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>
1 Like
3

Thanks Paul for your reply,

what (class=“reveal”) does here…

4

I put it there in case you wanted to style the element differently when it was opened but its not needed and can be removed if you have no use for it.

5

Its working fine…

but I am finding gap in between each row, can I handle this gap…

851×185 4.21 KB

Thanks once again for your prompt reply PaulOB.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.