Expand table code using css and jquery

Question

I have this html file to make a page that table can expand and collapse by click on + or - :

var $headers = $('.header').click(function() {
  $(this).find('span').text(function(_, value) {
    return value == '-' ? '+' : '-'
  });
  $(this).nextUntil('tr.header').slideToggle(100, function() {});
});
$headers.find('span').text('+')
$('table tr:not(.header)').hide()

table,
tr,
td,
th {
  border: 1px solid black;
  border-collapse: collapse;
}
tr.header {
  cursor: pointer;
}

<table border="0">
  <tr class="header">
    <th colspan="2">Header <span>-</span>
    </th>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr class="header">
    <th colspan="2">Header <span>-</span>
    </th>
  </tr>
  <tr>
    <td>date</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table>

I don't know what problem with my file ? It's not run

Mukul Kant · Accepted Answer · 2015-04-07 09:54:09Z

you have to write script on bottom like this -

<head>
<style type="text/css">
    table, tr, td, th 
    {
    border: 1px solid black;
    border-collapse:collapse;
    }
    tr.header {
    cursor:pointer;
    }
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

</head>
<table border="0">
    <tr class="header">
        <th colspan="2">Header <span>-</span>
        </th>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr class="header">
        <th colspan="2">Header <span>-</span>
        </th>
    </tr>
    <tr>
        <td>date</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
</table>
<script type="text/javascript">  
     var $headers = $('.header').click(function () {
    $(this).find('span').text(function (_, value) {
        return value == '-' ? '+' : '-'
    });
    $(this).nextUntil('tr.header').slideToggle(100, function () {});
    });
    $headers.find('span').text('+')
    $('table tr:not(.header)').hide()
</script> 
<body>

or put your script inready function

like this:-

<script type="text/javascript">  
$(document).ready(function(){
     var $headers = $('.header').click(function () {
    $(this).find('span').text(function (_, value) {
        return value == '-' ? '+' : '-'
    });
    $(this).nextUntil('tr.header').slideToggle(100, function () {});
    });
    $headers.find('span').text('+')
    $('table tr:not(.header)').hide()    
})

</script>

Nishit Maheta · Accepted Answer · 2015-04-07 10:04:36Z

2

all you need to do is put you code inside $(document).ready(function({}). check DEMO

$(document).ready(function(){ 
    /// your code here
});

you can learn more about ready() function HERE

edited Apr 7, 2015 at 10:04

answered Apr 7, 2015 at 9:58

Nishit Maheta

6,0413 gold badges20 silver badges32 bronze badges

Collectives™ on Stack Overflow

Expand table code using css and jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related