В такой варианте пропал эффект затухания. А надпись "читать далее" изначально справа с краю, и соответсвенно потом "свернуть" там же. Совсем не эстетично.
Редактирование нескольких (их то всего два или три) меня не пугает.
Работающий вариант, который на данный момент вместе со стилями хорош. Единственно, что там не очень удобно, это "перескок" "читать далее" на другую строку и надпись "свернуть" должна быть в конце "скрытого текста". Если как то решить эти две "проблемы", то получится то что "доктор прописал".
На всякий случай вариант который сейчас на форуме, о минусах которого написано выше.
bbcode
Замена HTML
Код: Выделить всё
<dl class="mone"><dt>{TEXT2} <a class="link-more" href="javascript: void(0);" onclick="var spoiler = this.parentNode.parentNode.getElementsByTagName('dd')[0];if ( spoiler.style.display == 'none' ) { this.parentNode.parentNode.classList.toggle('open'); spoiler.style.display = 'inline'; this.innerHTML = 'свернуть'; } else { this.parentNode.parentNode.classList.toggle('open'); spoiler.style.display = 'none'; this.innerHTML = 'читать дальше'; };">читать дальше</a></dt><dd style="display: none;"> {TEXT1}</dd></dl>
Стиль
Код: Выделить всё
.mone dt {
display: inline;
}
.mone dt > a {
position: relative;
}
.mone dt > a:after {
content: '';
position: absolute;
left: -50px;
top: 0;
height: 19px;
width: 50px;
background: -moz-linear-gradient(left,rgba(237,231,217,0) 0%,rgba(237,231,217,0) 22%,rgba(237,231,217,1) 100%);
background: -webkit-linear-gradient(left,rgba(237,231,217,0) 0%,rgba(237,231,217,0) 22%,rgba(237,231,217,1) 100%);
background: linear-gradient(to right,rgba(237,231,217,0) 0%,rgba(237,231,217,0) 22%,rgba(237,231,217,1) 100%);
}
.open.mone dt > a:after {
display: none;
}