问如何使用特定的表行构建简单的手风琴？

EN

$(document).ready(function(){
	var titles_arr = [] , create_list = [];
  $('tr[title]').each(function(){
  	var title = $(this).attr('title').trim();
    if($.inArray( title , titles_arr) > -1){
      if($.inArray( title , create_list) <= -1){
      	create_list.push(title);
      }
    }else{
    	titles_arr.push(title);
    }
  });
  //console.log(create_list[0]);
  for(var i = 0 ; i < create_list.length ; i++){
  	var newtrTitle = create_list[i];
    var html = '<tr title="'+newtrTitle+'" class="clcToggle"><td>'+newtrTitle+' (Click To Toggle)</td></tr>';
    $(html).insertBefore('tr[title="'+newtrTitle+'"]:eq(0)').promise().done(function(){
    	$('tr[title="'+newtrTitle+'"]').not(':eq(0)').hide();
    });
    
  }
  
	
  
  $('#MainTable').on('click', '.clcToggle',function(){
  	var title = $(this).attr('title').trim();
  	$('tr[title="'+title+'"]').not(':eq(0)').slideToggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="MainTable">
    <tr title="Banana">
        <td>Document 1</td>
    </tr>
    <tr title="Apple">
        <td>Document 2</td>
    </tr>
    <tr title="Orange">
        <td>Document 3</td>
    </tr>
    <tr title="Orange">
        <td>Document 4</td>
    </tr>
    <tr title="Orange">
        <td>Document 5</td>
    </tr>
    <tr title="Lemon">
        <td>Document 6</td>
    </tr>
    <tr title="Lemon">
        <td>Document 6</td>
    </tr>
    <tr title="Cherry">
        <td>Document 7</td>
    </tr>
    <tr title="Cherry">
        <td>Document 8</td>
    </tr>
</table>

// Step 1: Code to add an extra row if there are multiple occurrences of an item
// This is not dynamic yet
if($("tr[title='Orange']").length>1){ // if there is more than one occurance
   $("tr[title='Orange']").first().before('<tr title="Orange"><td>Orange (click to toggle)</td></tr>')
}

    // Step 2: Loop through the items to make the above code dynamic
var ftypes = [];
$("table tr").each(function(idx)){
// get one of each type of fruit
if(ftypes.indexOf($(this).attr('title'))<0) ftypes.push($(this).attr('title'));
});

ftypes.forEach(function(fruit){
// if each fruit have more than one occurrence then add a row above
   if($("tr[title='"+fruit+"']").length>1){
       $("tr[title='"+fruit+"']").first().before('<tr title="'+fruit+'"><td>Orange (click to toggle)</td></tr>')
    }
});

function click_handler(e) {
  var $this = $(this);
  //I am too lazy to write $(this) over and over again
  $('tr[title="' + $this.prop('title') + '"]').not($this).toggle();
  //First Part: gets all TR elements with same title
  //Next Part: but not this element
  //Toggle their visibility;
}
$(document).ready(function() {
  var prev; //Previous Element.
  var prev_i = 0; //previous level.
  $('tr').each(function(i, el) {
    el = $(el);
    if (prev != null) {
      //So we are not at the first element.
      if (prev.prop('title') == el.prop('title')) {
        //The previous title and the current el title are the same.
        if (prev_i == 0) {
          prev.text(prev.text() + "(click to toggle)");
          //If we are at previous level 0, meaning we have not encountered this portion of the loop before, we need to add the "click to toggle" text.
          prev.on('click', click_handler.bind(prev));
          //Add the click_handler, bound to the previous element (first).
        }

        el.hide(); //Hide any not-first element with the same title

        ++prev_i;
      } else {
        prev_i = 0;
        //If the titles are different, we reset the previous level.
      }

    } //end prev!=null
    prev = el;
    //set previous element
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr title="Banana">
    <td>Document 1</td>
  </tr>
  <tr title="Apple">
    <td>Document 2</td>
  </tr>
  <tr title="Orange">
    <td>Orange</td>
  </tr>
  <tr title="Orange">
    <td>Document 3</td>
  </tr>
  <tr title="Orange">
    <td>Document 4</td>
  </tr>
  <tr title="Orange">
    <td>Document 5</td>
  </tr>
  <tr title="Lemon">
    <td>Document 6</td>
  </tr>
  <tr title="Lemon">
    <td>Document 7</td>
  </tr>
  <tr title="Cherry">
    <td>Document 8</td>
  </tr>
</table>