Развернуть/Свернуть один за раз

Question

Как сделать его только разворачивать по одному ... Итак, когда он расширяется, а другой разваливается. Есть идеи? Вот скрипка и код.

HTML:

<table class="table"> 
    <tbody> 
    <tr class="parent" id="2479"> 
     <td><span class="btn btn-default">expand</span></td> 

    </tr> 
    <tr class="child-2479 "> 
     <td>row 1</td> 
     <td>row 1</td> 
     <td>row 1</td> 
     <td>row 1</td> 
     <td>row 1</td> 
     <td>row 1</td> 
    </tr> 

    <tr class="parent" id="2800"> 
     <td><span class="btn btn-default">expand</span></td> 

    </tr> 
    <tr class="child-2800"> 
     <td>row 2</td> 
     <td>row 2</td> 
     <td>row 2</td> 
     <td>row 2</td> 
     <td>row 2</td> 
     <td>row 2</td> 
</tr> 

    </tbody> 
</table> 

JQuery:

$(function() { 
    $('tr.parent td span.btn') 
     .on("click", function(){ 
      var idOfParent = $(this).parents('tr').attr('id'); 
      $('tr.child-'+idOfParent).toggle('slow'); 
     }); 
    $('tr[class^=child-]').hide().children('td'); 
}); 

Demo

Answer 1

По щелчку, скрыть все "*" детей-строки, кроме того, вы хотите переключиться:

$(function() { 
    $('tr.parent td span.btn') 
    .on('click', function() { 
     var next= $(this).closest('tr').next(); //this is the row to toggle 
     $('tr[class^=child-]').not(next).hide(); //hide all others 
     next.toggle('slow');      //toggle it 
    }); 

    $('tr[class^=child-]').hide(); 
}); 

Updated Fiddle

Answer 2

попробовать это

$(function() { 
    $('tr.parent td span.btn') 
     .on("click", function(){ 
      var idOfParent = $(this).parents('tr').attr('id'); 
      $('tr[class^=child-]').hide().children('td'); 
      $('tr.child-'+idOfParent).toggle('slow'); 
     }); 
    $('tr[class^=child-]').hide().children('td'); 
}); 

Answer 3

Здесь: HTML:

<table class="table"> 
    <tbody> 
     <tr> 
      <td><span class="btn btn-default expandBtn" data-id="2479">expand</span></td> 
     </tr> 
     <tr class="child-2479 child"> 
      <td>row 1</td> 
      <td>row 1</td> 
      <td>row 1</td> 
      <td>row 1</td> 
      <td>row 1</td> 
      <td>row 1</td> 
     </tr> 

     <tr> 
      <td><span class="btn btn-default expandBtn" data-id="2800">expand</span></td> 
     </tr> 
     <tr class="child-2800 child"> 
      <td>row 2</td> 
      <td>row 2</td> 
      <td>row 2</td> 
      <td>row 2</td> 
      <td>row 2</td> 
      <td>row 2</td> 
     </tr> 
    </tbody> 
</table> 

Javascript/JQuery

$(document).ready(function() { 
    $('.child').hide(); 
    $('.expandBtn').click(function(){ 
     $('.child').hide(); 
     var id = $(this).data('id'); 
     $('tr.child-' + id).show(); 
    }); 
}); 

https://jsfiddle.net/wortigern/g0d7a6q5/

Answer 4

Другая возможность:

$(function() { 
 
    $('tr.parent td span.btn') 
 
    .on("click", function(e){ 
 
    var idOfParent = $(this).parents('tr').attr('id'); 
 
    $('tr.child-'+idOfParent).toggle('slow'); 
 
    $('tr[class^="child-"]').not('tr.child-'+idOfParent).toggle(false); 
 
    }); 
 
    $('tr[class^=child-]').hide(); 
 
});

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 

 
<table class="table"> 
 
    <tbody> 
 
    <tr class="parent" id="2479"> 
 
     <td><span class="btn btn-default">expand</span></td> 
 
    </tr> 
 
    <tr class="child-2479"> 
 
     <td>row 1</td> 
 
     <td>row 1</td> 
 
     <td>row 1</td> 
 
     <td>row 1</td> 
 
     <td>row 1</td> 
 
     <td>row 1</td> 
 
    </tr> 
 

 
    <tr class="parent" id="2800"> 
 
     <td><span class="btn btn-default">expand</span></td> 
 

 
    </tr> 
 
    <tr class="child-2800"> 
 
     <td>row 2</td> 
 
     <td>row 2</td> 
 
     <td>row 2</td> 
 
     <td>row 2</td> 
 
     <td>row 2</td> 
 
     <td>row 2</td> 
 
    </tr> 
 

 
    </tbody> 
 
</table>