Spoiler (JS)

[factotum]

Функция по умолчанию:

Код: Выделить всё

jQuery(function($) {
   $('dl.spoilerbox > dt').on('click', function()
   {
      $(this).parent().toggleClass('spoilerbox-on');
   });
});

Немного правильней + Анимация:
поправка на пруф:

Код: Выделить всё

$.fn.ready(function() {
   $('.spoilerbox').children('dt').click(function(e){
      e.preventDefault();
      $(this).parent().toggleClass('spoilerbox-on').children('dd').not(':animated').slideToggle('fast');
   });
});

CSS:

Код: Выделить всё

dl.spoilerbox
{
   display: table;
   position: relative;
   overflow: hidden;
   margin: 0.25em 0;
   padding: 3px;
   background-color: #FFFFFF;
   border: 1px solid #d8d8d8;
   font-size: 1em;
}

удалить:

Код: Выделить всё

dl.spoilerbox.spoilerbox-on > dd
{
   display: block;
}

[oddis]

Правится в forum_fn.js? А что в css править?

[factotum]

Правится в forum_fn.js?

да.

А что в css править?

Код: Выделить всё

/* Spoiler block */
dl.spoilerbox {
/* Добавить: */
position: relative;
overflow: hidden;
}

[oddis]

где то ошибся, форум перекосило

[factotum]

oddis, вероятно в CSS.
Пруф можно?

[oddis]

я только вчера скачал и установил phpbbex 1.6.0, ничего не менял

великодушно извиняюсь, пропустил скобку и не обратил внимание на подсвечивание

[factotum]

oddis, похвастайтесь демкой

[oddis]

Ничего не изменилось с спойлером, может что то еще нужно?

[factotum]

файл forum_fn.js:
удалить:

Код: Выделить всё

   // Spoilers code
   $('dl.spoilerbox > dt').on('click', function()
   {
      $(this).parent().toggleClass('spoilerbox-on');
   });

Добавить в самом низу, чтобы не попадало ни в одни скобки:

Код: Выделить всё

$.fn.ready(function() {
   $('.spoilerbox').children('dt').click(function(e){
      e.preventDefault();
      $(this).parent().toggleClass('spoilerbox-on').children('dd').not(':animated').slideToggle('fast');
   });
});

файл content.css

Код: Выделить всё

dl.spoilerbox
{
   display: table;
   position: relative;
   overflow: hidden;
   margin: 0.25em 0;
   padding: 3px;
   background-color: #FFFFFF;
   border: 1px solid #d8d8d8;
   font-size: 1em;
}

добавлено три первых строчки

ниже удалить:

Код: Выделить всё

dl.spoilerbox.spoilerbox-on > dd
{
   display: block;
}

демо: http://forum.hw-lab.com/viewtopic.php?p=4510#p4510

[oddis]

Супер!!! Все работает, до этого базовый почему то не работал в опере и хроме, а теперь работает в любом браузере, еще и с анимацией

[Sumanai]

демо:

Лучше бы как стандартный- во всю длину. А то ширина скачет при открытии, лично мне не понравился только этот момент.

[factotum]

Лучше бы как стандартный- во всю длину

бывает, что кроме одного смайла и нет ничего в спойлере. В общем дело привычек.
Кому по душе на всю длину - убрать display: table;
У кого на форуме есть спойлер по умолчанию - проверьте работоспособность в мобильных браузерах web-kit (safary, chrome), пожалуйста

[NO SWEAR]

У меня на форуме спойлер нормально работает в стандартном стиле. А в мобильном стиле нет. На вашем форуме что по ссылке работает спойлер. Браузер сафари. В опере на моем так же не работает в моб стиле. На вашем стиле работает но чет тупит при открытии. Мб из за того что пытается трафик сжать.

[oddis]

спойлер по умолчанию на мобильных работал, ваш раскрывает спойлер выглядит так

Добавлено спустя 36 секунд:
вобщем не раскрывается

Добавлено спустя 6 минут 58 секунд:
кстати в хроме тоже не открывается

Добавлено спустя 5 минут 32 секунды:
а с вашего демо работает и с мобилы и в хроме, что то пропустили

Добавлено спустя 1 минуту 9 секунд:

[factotum]

oddis, не исключаю, браузер использовал закешированные (читать как "без правок") файлы js/css.

В сафари рефреш страницы перегружает заново все файлы. как в хроме не знаю.

[oddis]

вернул на место display: table; в хроме раскрывается, на мобилке не раскрывается в штатном браузере а в долфине все пучком

Добавлено спустя 11 минут 45 секунд:
factotum то я панику развел, кеш почистил, с Sumanai не согласен насчет ширины, мне все же нравится больше приятная неожиданность