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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.