7 апреля 2013 г.

Самодельный упрощённый accordion на jquery

Нужна была схлопывалка дивов, с заголовками, раскрывающая содержимое по очереди. Изначально был код на jquery-ui через accordion, но мучение со стилями достало. Т.к. стили наворачиваются хардкорно, а переопределять все в css получается в несколько раз длиннее, чем сам код.
$( "#accordion" ).accordion({
  active: false,
  collapsible: true,
  header: ".accordion_later",
  heightStyle: "content",
  beforeActivate: function( event, ui ){
   ui.newHeader.hide();
   ui.oldHeader.show();
  }
 });
Рабочий пример: http://jsfiddle.net/Fx4nA/
Потом переделал тупо на jquery, получилось в несколько раз короче.
$('#accordion .collapsible').hide();
$('#accordion .accordion_later').bind('click', function (e) {
    // show all "more..."
    $('#accordion .accordion_later').show();
    // close all collapsible
    $('#accordion .collapsible').slideUp();
    // hide current "more..."
    $(e.target).hide();
    // open current collapsible
    $(e.target).next('div').slideDown();       
});
Рабочий пример: http://jsfiddle.net/8qtXH/

Комментариев нет:

Отправить комментарий