vendredi 8 avril 2016

Can someone make this a single file http://ift.tt/1I2dPCE

I am looking for a single file representation of this this JSFiddle page. I don't know much about web stuff so I am wondering how this would work as one file. Thanks. Here is the code for each section from JSFiddle. HTML -

<table id="mytable">
  <tr data-depth="0" class="collapse level0">
    <td><span class="toggle collapse"></span>Item 1</td>
    <td>123</td>
  </tr>
  <tr data-depth="1" class="collapse level1">
    <td><span class="toggle"></span>Item 2</td>
    <td>123</td>
  </tr>
  <tr data-depth="2" class="collapse level2">
    <td>Item 3</td>
    <td>123</td>
  </tr>
  <tr data-depth="1" class="collapse level1">
    <td>Item 4</td>
    <td>123</td>
  </tr>
  <tr data-depth="0" class="collapse collapsable level0">
    <td><span class="toggle collapse"></span>Item 5</td>
    <td>123</td>
  </tr>
  <tr data-depth="1" class="collapse collapsable level1">
    <td>Item 6</td>
    <td>123</td>
  </tr>
</table>

Javascript-

$(function() {
  $('#mytable').on('click', '.toggle', function() {
    //Gets all <tr>'s  of greater depth
    //below element in the table
    var findChildren = function(tr) {
      var depth = tr.data('depth');
      return tr.nextUntil($('tr').filter(function() {
        return $(this).data('depth') <= depth;
      }));
    };

    var el = $(this);
    var tr = el.closest('tr'); //Get <tr> parent of toggle button
    var children = findChildren(tr);

    //Remove already collapsed nodes from children so that we don't
    //make them visible. 
    //(Confused? Remove this code and close Item 2, close Item 1 
    //then open Item 1 again, then you will understand)
    var subnodes = children.filter('.expand');
    subnodes.each(function() {
      var subnode = $(this);
      var subnodeChildren = findChildren(subnode);
      children = children.not(subnodeChildren);
    });

    //Change icon and hide/show children
    if (tr.hasClass('collapse')) {
      tr.removeClass('collapse').addClass('expand');
      children.hide();
    } else {
      tr.removeClass('expand').addClass('collapse');
      children.show();
    }
    return children;
  });
});

CSS-

table td {
  border: 1px solid #eee;
}

.level1 td:first-child {
  padding-left: 15px;
}

.level2 td:first-child {
  padding-left: 30px;
}

.collapse .toggle {
  background: url("http://ift.tt/25QvPgD");
}

.expand .toggle {
  background: url("http://ift.tt/1YkmxDV");
}

.toggle {
  height: 9px;
  width: 9px;
  display: inline-block;
}




Aucun commentaire:

Enregistrer un commentaire