aldtimofeev
@aldtimofeev
front-end / html-верстальщик

Как сделать спойлер jquery (для нескольких элементов на странице) так чтобы кнопка «раскрыть» исчезала если текста мало?

Есть такой код

<p class='spoiler_block'>[[+introtext]]</p>
<p class='spoiler_title'>развернуть</p>


.spoiler_title{
        font-size: 12px;
        border-bottom: #000000 dashed 1px;
        cursor: pointer;
	color: #62a000;
	display:inline-block;
        }
.spoiler_block{
	height: 25px;
        overflow:hidden;
        }
.spoiler_block2 {
	height: auto !important;
	}


$(document).ready(function(){
			$('.spoiler_title').click(function(){ // при клике по заголовку спойлера
				var show = $(this).attr('show'); // проверяем атрибут, в котором записано - отображен спойлер или скрыт
				if(show == 1){ // если отображен, то прячем
					$(this).attr('show', 0);
					$('.spoiler_block').slideUp(300);
				}else{ // если спрятан, то показываем
					$(this).attr('show', 1);
					$('.spoiler_block').slideDown(300);
				}
			});
		});
  • Вопрос задан
  • 407 просмотров
Решения вопроса 1
@targrik
Извините, увлёкся.

<p class='spoiler_block'>qqqqqq<br>wwwwww<br>eeeeee<br>qqqqq<br>wwwww<br>eeeee<br>qqqqqq<br>wwwwww<br>eeeeee<br>qqqqq<br>wwwwww</p>


.spoiler_title{
	font-size: 12px;
	border-bottom: #000000 dashed 1px;
	cursor: pointer;
    color: #62a000;
    display:inline-block;
}
.spoiler_block{
    overflow:hidden;
}


$(function() {
    $('.spoiler_block').each(function() {
        var t = $(this);
        var h1 = t.height();
        var h2 = 40; // необходимая высота блока
        if (h1 > h2) {
            var n;
            var add_spoiler_expand_title = function() {
                t.after('<p class="spoiler_title">развернуть</p>');
                n = t.next();
                n.on('click', spoiler_expand);
            };
            var add_spoiler_collapse_title = function() {
                t.after('<p class="spoiler_title">свернуть</p>');
                n = t.next();
                n.on('click', spoiler_collapse);
            };
            var spoiler_collapse = function() {
                n.fadeOut(100, function() {
                    n.remove();
                    t.css({height: h2 + 'px'});
                    add_spoiler_expand_title();
                });
            };
            var spoiler_expand = function() {
                n.remove();
                t.stop(true, false).animate({height: h1 + 'px'}, 300, add_spoiler_collapse_title);
            };
            t.css({height: h2 + 'px'});
            add_spoiler_expand_title();
        }
    });
});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@AndreyMyagkov
1) не click, a on('click'...)
2) всю лапшу заменить на slideToggle
3) что бы спрятать кнопку - проверяй объем текста по кол-ву символов или проверяй высоту блока с текстом, если слишком высокий блок - уменьшаешь его высоту и выводишь кнопку
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
10 мая 2024, в 11:47
500 руб./за проект
10 мая 2024, в 11:36
30000 руб./за проект
10 мая 2024, в 11:27
1000 руб./за проект