javascript - Bootstrap table toggle ...how to close previous toggle if a new one is opened? -
first of all, jsfiddle of code here:
http://jsfiddle.net/ae1lxcc1/3/
i have bootstrap table people can open , close toggle additional information. each have different ids toggle-00001
, toggle-00002
, may toggle-43894
.
i use each id:
$(".toggle-00001").on('click', function (event){ event.preventdefault(); $(this).closest('tr').toggleclass("row-selected"); $(this).closest('tr').next('tr').toggleclass("row-selected"); $(".details-00001").slidetoggle("fast"); $(this).html(function(i,html) { if (html.indexof('color-grey') != -1 ){ html = html.replace('icon-grey','icon-green'); } else { html = html.replace('icon-green','icon-grey'); } return html; }); });
is there simple way, without rewriting of code, make if new 1 toggled, other 1 closed?
in other words, i'd there 1 toggle open @ times, user can't open 100 @ once.
thank advice can give :)
you need optimize code. first of all, don't want duplicated click handler every row, if have 100 of them?
what can give same class details
, toggle
rows , after js become simpler:
$(".toggle").on('click', function (event) { event.preventdefault(); var $row = $(this).closest('tr'), $nextrow = $row.next('tr.details'); $('tr').not($nextrow).not($row).removeclass('row-selected'); $nextrow.add($row).toggleclass("row-selected"); $(this).html(function (i, html) { if (html.indexof('color-grey') != -1) { html = html.replace('icon-grey', 'icon-green'); } else { html = html.replace('icon-green', 'icon-grey'); } return html; }); });
i moved style="display: none" css (.details
class):
.details { display: none; } .row-selected { background-color: #ddd; display: table-row; }
demo: http://jsfiddle.net/ae1lxcc1/4/
finally, toggling icons can optimized just:
$(this).find('.color-gray').toggleclass('.icon-grey .icon-green');
Comments
Post a Comment