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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -