Expandable Table With Reversal of Exposure

Asked

Viewed 66 times

1

In this script below https://jsfiddle.net/gxr47dqr/ I have a table that expands when we click on the line. How can I make it expand once.

Example: 

  clico na primeira linha  "**expande**"
   se
  clico em outra linha     **também se expande mas fecha a anterior**

intection is only to leave one line expanded at a time

javascript

1 answer

2


Do what you can with CSS. The hide and show part can be done with CSS classes, as you said in the other answer.

CSS

#report > tbody > tr:nth-child(even) {
    display: none;
}

.abrir {
    display: table-row !important;
}

jQuery:

$(document).ready(function () {
    var escondidas = $("#report > tbody > tr:odd");
    $("#report > tbody > tr:even").click(function () {
        escondidas.removeClass('abrir');
        $(this).next("tr").addClass('abrir');
        $(this).find(".arrow").toggleClass("up");
    });
});

Example: https://jsfiddle.net/f9kwbh6e/

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.