CODEWITHSUNDEEP
javascriptjqueryhtmlcss
300
300

Reputation: 1041

How to create table with collapsible rows

I am trying to create a table with collapsible rows and was able to use code from stackoverflow which I modified little to suit my needs. It's at jsfiddle1

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<title>CommDesk Dashboard</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".btn1").click(function(){
            $(".expand1").toggle();
        });
        $(".btn2").click(function(){
            $(".expand2").toggle();
        });
    })
</script>

<style>
.expand1 { display: none;
}
.expand2 { display: none;
}

body {
    background-color: AliceBlue;
}
span.note1 {float:left}
span.note2 {font-size:80%}

table#t02, #t02 th, #t02 td {
    border: none;
    border-collapse: collapse;
    font-size:80%;  
}
#button1{
position: absolute;
bottom:10px;
left:50%;
}
</style>
</head>

<body>
<form method="post">
<div style="float:left; width:50%">

<table id="t02" class="table2">
<tr>
    <th></th>
    <th></th>       
    <th style="color:green">Green</th>
    <th style="color:gold", colspan="3">Yellow</th>
    <th></th>
    <th style="color:red">Red</th>    
</tr>
<tr>
    <td class="btn1">Post-IVR Call Volume</td>
    <td>&lt</td>        
    <td><input type="text", name="post_ivr_call_volume_good_high", size="2", maxlength="3"></td>
    <td><input type="text", name="post_ivr_call_volume_warning_low", size="2", maxlength="3"></td>
    <td>to</td>
    <td><input type="text", name="post_ivr_call_volume_warning_high", size="2", maxlength="3"></td>
    <td>&gt</td>
    <td><input type="text", name="post_ivr_call_volume_critical_low", size="2", maxlength="3"></td>
</tr>
<tr>
    <td align="center" class="expand1">Alabama</td>
    <td class="expand1">&lt</td>        
    <td class="expand1"><input type="text", name="post_ivr_call_volume_good_high_alabama", size="2", maxlength="3"></td>
    <td class="expand1"><input type="text", name="post_ivr_call_volume_warning_low_alabama", size="2", maxlength="3"></td>
    <td class="expand1">to</td>
    <td class="expand1"><input type="text", name="post_ivr_call_volume_warning_high_alabama", size="2", maxlength="3"></td>
    <td class="expand1">&gt</td>
    <td class="expand1"><input type="text", name="post_ivr_call_volume_critical_low_alabama", size="2", maxlength="3"></td>
</tr>
<tr>
    <td class="btn2">IVR Call Volume</td>
    <td>&lt</td>        
    <td><input type="text", name="ivr_call_volume_good_high", size="2", maxlength="3"></td>
    <td><input type="text", name="ivr_call_volume_warning_low", size="2", maxlength="3"></td>
    <td>to</td>
    <td><input type="text", name="ivr_call_volume_warning_high", size="2", maxlength="3"></td>
    <td>&gt</td>
    <td><input type="text", name="ivr_call_volume_critical_low", size="2", maxlength="3"></td>
</tr>
<tr>
    <td align="center" class="expand2">Alabama</td>
    <td class="expand2">&lt</td>        
    <td class="expand2"><input type="text", name="ivr_call_volume_good_high_alabama", size="2", maxlength="3"></td>
    <td class="expand2"><input type="text", name="ivr_call_volume_warning_low_alabama", size="2", maxlength="3"></td>
    <td class="expand2">to</td>
    <td class="expand2"><input type="text", name="ivr_call_volume_warning_high_alabama", size="2", maxlength="3"></td>
    <td class="expand2">&gt</td>
    <td class="expand2"><input type="text", name="ivr_call_volume_critical_low_alabama", size="2", maxlength="3"></td>
</tr>
</table>
<input type="submit" value="Submit" id="button1" />
</div>
</form>
</body>
</html>

Only problem here is that I couldn't get + and - signs when the rows are collapsed or expanded. So while trying to get + and - I tried it using accordian-toggle but there the rows are not expanding or collapsing correctly. Fiddle is at jsfiddle2

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<title>Dashboard</title>

<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.info').find('.accordion-toggle').click(function () {
    //Expand or collapse this panel
    $(this).toggleClass("open").next().slideToggle('fast');
    //Hide the other panels
    $(".accordion-toggle").not($(this)).removeClass("open");
    $(".accordion-content").not($(this).next()).slideUp('fast');
});
})

</script>
<style>
.accordion-toggle {
    cursor: pointer;
}
.accordion-content {
    display: none;
}
.accordion-content.default {
    display: block;
}
.accordion-toggle::after {
    content:"+";
}
.accordion-toggle.open::after {
    content:"-";
}

body {
    background-color: AliceBlue;
}
span.note1 {float:left}
span.note2 {font-size:80%}

table#t02, #t02 th, #t02 td {
    border: none;
    border-collapse: collapse;
    font-size:80%;  
}
</style>
</head>
<body>
<form>
<div style="float:left; width:50%" class='info'>
<table id="t02" class="table2">
<tr>
    <th></th>
    <th></th>       
    <th style="color:green">Green</th>
    <th style="color:gold", colspan="3">Yellow</th>
    <th></th>
    <th style="color:red">Red</th>    
</tr>
<tr>
    <td class='accordion-toggle'>Post-IVR Call Volume</td>
    <td>&lt</td>        
    <td><input type="text", name="post_ivr_call_volume_good_high", size="2", maxlength="3"></td>
    <td><input type="text", name="post_ivr_call_volume_warning_low", size="2", maxlength="3"></td>
    <td>to</td>
    <td><input type="text", name="post_ivr_call_volume_warning_high", size="2", maxlength="3"></td>
    <td>&gt</td>
    <td><input type="text", name="post_ivr_call_volume_critical_low", size="2", maxlength="3"></td>
</tr>
<tr>
    <td align="center" class='accordion-content'>Alabama</td>
    <td class='accordion-content'>&lt</td>      
    <td class='accordion-content'><input type="text", name="post_ivr_call_volume_good_high_alabama", size="2", maxlength="3"></td>
    <td class='accordion-content'><input type="text", name="post_ivr_call_volume_warning_low_alabama", size="2", maxlength="3"></td>
    <td class='accordion-content'>to</td>
    <td class='accordion-content'><input type="text", name="post_ivr_call_volume_warning_high_alabama", size="2", maxlength="3"></td>
    <td class='accordion-content'>&gt</td>
    <td class='accordion-content'><input type="text", name="post_ivr_call_volume_critical_low_alabama", size="2", maxlength="3"></td>
</tr>
<tr>
    <td class='accordion-toggle'>IVR Call Volume</td>
    <td>&lt</td>        
    <td><input type="text", name="ivr_call_volume_good_high", size="2", maxlength="3"></td>
    <td><input type="text", name="ivr_call_volume_warning_low", size="2", maxlength="3"></td>
    <td>to</td>
    <td><input type="text", name="ivr_call_volume_warning_high", size="2", maxlength="3"></td>
    <td>&gt</td>
    <td><input type="text", name="ivr_call_volume_critical_low", size="2", maxlength="3"></td>
</tr>
<tr>
    <td align="center" class='accordion-content'>Alabama</td>
    <td class='accordion-content'>&lt</td>      
    <td class='accordion-content'><input type="text", name="ivr_call_volume_good_high_alabama", size="2", maxlength="3"></td>
    <td class='accordion-content'><input type="text", name="ivr_call_volume_warning_low_alabama", size="2", maxlength="3"></td>
    <td class='accordion-content'>to</td>
    <td class='accordion-content'><input type="text", name="ivr_call_volume_warning_high_alabama", size="2", maxlength="3"></td>
    <td class='accordion-content'>&gt</td>
    <td class='accordion-content'><input type="text", name="ivr_call_volume_critical_low_alabama", size="2", maxlength="3"></td>
</tr>
</table>
</div>
<div style="float:left; width:50%">
Place Holder
</div>
</form>
</body>
</html>

Can I get some help to find what am I missing here? I want fiddle2 work same as fiddle1 with + and - signs there.

Upvotes: 3

Views: 1351

Answers (2)

kangaswad
kangaswad

Reputation: 775

You can use unique id for each row,

<table id="t02" class="table2">
<tr>
    <th></th>
    <th></th>   
    <th style="color:green">Green</th>
  <th style="color:gold", colspan="3">Yellow</th>
  <th></th>
  <th style="color:red">Red</th>    
</tr>
<tr>
    <td class='accordion-toggle' id="1">Post-IVR Call Volume</td>
    <td>&lt</td>    
    <td><input type="text", name="post_ivr_call_volume_good_high", size="2", maxlength="3"></td>
  <td><input type="text", name="post_ivr_call_volume_warning_low", size="2", maxlength="3"></td>
  <td>to</td>
  <td><input type="text", name="post_ivr_call_volume_warning_high", size="2", maxlength="3"></td>
  <td>&gt</td>
  <td><input type="text", name="post_ivr_call_volume_critical_low", size="2", maxlength="3"></td>
</tr>
<tr id='accordion-content-1'>
    <td align="center" class="accordion-content" >Alabama</td>
    <td class='accordion-content'>&lt</td>    
    <td class='accordion-content'><input type="text", name="post_ivr_call_volume_good_high_alabama", size="2", maxlength="3"></td>
  <td class='accordion-content'><input type="text", name="post_ivr_call_volume_warning_low_alabama", size="2", maxlength="3"></td>
  <td class='accordion-content'>to</td>
  <td class='accordion-content'><input type="text", name="post_ivr_call_volume_warning_high_alabama", size="2", maxlength="3"></td>
  <td class='accordion-content'>&gt</td>
  <td class='accordion-content'><input type="text", name="post_ivr_call_volume_critical_low_alabama", size="2", maxlength="3"></td>
</tr>
<tr>
    <td class='accordion-toggle' id="2">IVR Call Volume</td>
    <td>&lt</td>    
    <td><input type="text", name="ivr_call_volume_good_high", size="2", maxlength="3"></td>
  <td><input type="text", name="ivr_call_volume_warning_low", size="2", maxlength="3"></td>
  <td>to</td>
  <td><input type="text", name="ivr_call_volume_warning_high", size="2", maxlength="3"></td>
  <td>&gt</td>
  <td><input type="text", name="ivr_call_volume_critical_low", size="2", maxlength="3"></td>
</tr>
<tr id='accordion-content-2'>
    <td align="center" class="accordion-content" >Alabama</td>
    <td class='accordion-content'>&lt</td>    
    <td class='accordion-content'><input type="text", name="ivr_call_volume_good_high_alabama", size="2", maxlength="3"></td>
  <td class='accordion-content'><input type="text", name="ivr_call_volume_warning_low_alabama", size="2", maxlength="3"></td>
  <td class='accordion-content'>to</td>
  <td class='accordion-content'><input type="text", name="ivr_call_volume_warning_high_alabama", size="2", maxlength="3"></td>
  <td class='accordion-content'>&gt</td>
  <td class='accordion-content'><input type="text", name="ivr_call_volume_critical_low_alabama", size="2", maxlength="3"></td>
</tr>
</table>

then use id to call the hidden row,

$(function() {
$('.info').find('.accordion-toggle').click(function (e) {
        $id = e.target.id;
        $("tr#accordion-content-"+$id+" td").toggle();
    });
})

https://jsfiddle.net/0y91gxtn/1

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388436

You need to hide/show the next tr element of the accordion-toggle.

So the class accordion-content should be added to the tr not to the td element, also the accordion-content elements are the next sibling of the parent of clicked toggle element.

$(function() {
  $('.info').find('.accordion-toggle').click(function() {
    //Expand or collapse this panel
    var $content = $(this).toggleClass("open").parent().next().slideToggle('fast');
    //Hide the other panels
    $(".accordion-toggle.open").not(this).removeClass("open");
    $(".accordion-content").not($content).slideUp('fast');
  });
})
.accordion-toggle {
  cursor: pointer;
}
.accordion-content {
  display: none;
}
.accordion-content.default {
  display: block;
}
.accordion-toggle::after {
  content: "+";
}
.accordion-toggle.open::after {
  content: "-";
}
body {
  background-color: AliceBlue;
}
span.note1 {
  float: left
}
span.note2 {
  font-size: 80%
}
table#t02,
#t02 th,
#t02 td {
  border: none;
  border-collapse: collapse;
  font-size: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form lpformnum="1">
  <div style="float:left; width:50%" class="info">
    <table id="t02" class="table2">
      <tbody>
        <tr>
          <th></th>
          <th></th>
          <th style="color:green">Green</th>
          <th style="color:gold" ,="" colspan="3">Yellow</th>
          <th></th>
          <th style="color:red">Red</th>
        </tr>
        <tr>
          <td class="accordion-toggle">Post-IVR Call Volume</td>
          <td>&lt;</td>
          <td>
            <input type="text" ,="" name="post_ivr_call_volume_good_high" size="2" maxlength="3">
          </td>
          <td>
            <input type="text" ,="" name="post_ivr_call_volume_warning_low" size="2" maxlength="3">
          </td>
          <td>to</td>
          <td>
            <input type="text" ,="" name="post_ivr_call_volume_warning_high" size="2" maxlength="3">
          </td>
          <td>&gt;</td>
          <td>
            <input type="text" ,="" name="post_ivr_call_volume_critical_low" size="2" maxlength="3">
          </td>
        </tr>
        <tr class="accordion-content">
          <td align="center" class="">Alabama</td>
          <td class="">&lt;</td>
          <td class="">
            <input type="text" ,="" name="post_ivr_call_volume_good_high_alabama" size="2" maxlength="3" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
          </td>
          <td class="">
            <input type="text" ,="" name="post_ivr_call_volume_warning_low_alabama" size="2" maxlength="3">
          </td>
          <td class="">to</td>
          <td class="">
            <input type="text" ,="" name="post_ivr_call_volume_warning_high_alabama" size="2" maxlength="3">
          </td>
          <td class="">&gt;</td>
          <td class="">
            <input type="text" ,="" name="post_ivr_call_volume_critical_low_alabama" size="2" maxlength="3">
          </td>
        </tr>
        <tr>
          <td class="accordion-toggle">IVR Call Volume</td>
          <td>&lt;</td>
          <td>
            <input type="text" ,="" name="ivr_call_volume_good_high" size="2" maxlength="3">
          </td>
          <td>
            <input type="text" ,="" name="ivr_call_volume_warning_low" size="2" maxlength="3">
          </td>
          <td>to</td>
          <td>
            <input type="text" ,="" name="ivr_call_volume_warning_high" size="2" maxlength="3">
          </td>
          <td>&gt;</td>
          <td>
            <input type="text" ,="" name="ivr_call_volume_critical_low" size="2" maxlength="3">
          </td>
        </tr>
        <tr class="accordion-content">
          <td align="center" class="">Alabama</td>
          <td class="">&lt;</td>
          <td class="">
            <input type="text" ,="" name="ivr_call_volume_good_high_alabama" size="2" maxlength="3">
          </td>
          <td class="">
            <input type="text" ,="" name="ivr_call_volume_warning_low_alabama" size="2" maxlength="3">
          </td>
          <td class="">to</td>
          <td class="">
            <input type="text" ,="" name="ivr_call_volume_warning_high_alabama" size="2" maxlength="3">
          </td>
          <td class="">&gt;</td>
          <td class="">
            <input type="text" ,="" name="ivr_call_volume_critical_low_alabama" size="2" maxlength="3">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div style="float:left; width:50%">Place Holder</div>
</form>

Upvotes: 1

Related Questions