CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nick Kahn
Nick Kahn

Reputation: 20078

Expand/Collapse one at a time

How to make it only expand one at a time... So that when one is expanded than the another one is collapses. Any ideas? Here's the fiddle and the code.

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

Upvotes: 0

Views: 1197

Answers (4)

gaetanoM
gaetanoM

Reputation: 42044

Another possibility is:

$(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>

Upvotes: 1

wortigern
wortigern

Reputation: 181

Here: 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/

Upvotes: 1

AceWebDesign
AceWebDesign

Reputation: 589

try this

$(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');
});

Upvotes: 1

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

On click, hide all "child-*" rows except the one you want to toggle:

$(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

Upvotes: 1

Related Questions