如果打开，则关闭div；如果关闭，则打开

Question

I try to implement below code to my project. But also I want to add an extra. If I click to button on opened(active) div It should close again. I'm doing this in a foreach loop. I 'll have many #content so it must be a class like .content .

What should I add or change on this nice code block?

All things needed below.

http://jsfiddle.net/ardeezstyle/4FKCa/

Answer 1

I replace some of your js. Now the buttons have an data-target attribute. You have to put a css selector in this attribute. When you click on a button, the js will use the data-target attribute to select the content that needs to be displayed.

$("table .load-content").on("click", function () {
    var currentRow = this.parentNode.parentNode;
    if ($(this).hasClass('content-loaded')) {
        $(currentRow).next().toggleClass('hidden');
    } else {
        var content = "<tr class='loaded-content'><td colspan='5'>" + $(this.getAttribute('data-target')).html() + "</td></tr>";
        $(content).insertAfter(currentRow);
        $(this).addClass('content-loaded');
    }
});

Here is the complete code : http://jsfiddle.net/LLaaqqvr/5/

Why just not put the content you want to display directly in the table ? It will be really easier.