Свертывание и развертывание текста с кнопкой «Подробнее»

В очередной раз сталкиваясь с препятствиями по своей специализации вебмастера я решил, что буду писать мини-посты в которых я буду излагать решения популярных и не очень популярных проблем. Сегодня я расскажу о моменте который волнует много людей пытающихся самостоятельно строить свой бизнес в интернете без посредников.
Наверняка многие из Вас сталкивались с бедой когда нужно на странице слишком большой текст спрятать и по надобности развернуть его кнопкой «Подробнее» или «Читать далее», при этом оставаясь на текущей странице. Вообще вариантов полно. Я расскажу как можно решить задачку при помощи стилей CSS и JavaScript.

Первым делом рекомендую в шапке прилинковать jQuery, т.е. прописать строчку в шаблоне сайта:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 

Затем в стиле шаблона (например у кого-то это файл style.css) прописать следующее: 

.opis{display:none; text-align: justify;} 

Третий шаг — заключаем текст котовый хотим скрыть в блок DIV

<div class="opis" id="opis1">
Ваш скрытый текст
</div>
<a id="opislink1" href="javascript:void(0)">подробнее</a>
 

И на той же самой странице вставляем вот такой JavaScript код: 

<script type="text/javascript">
$(document).ready(function() {$('#opislink1').click(function() {
if ( jQuery.browser.msie && parseInt(jQuery.browser.version) == 6) {
if ($('#opis1').css("display")=="block") {$('#opis1').css("display", "none");
} else {$('#opis1').css("display", "block");
}
} else {$('#opis1').toggle("slow");
}
if ($('#opislink1').text()=='подробнее') {$('#opislink1').text('кратко');
} else {$('#opislink1').text('подробнее');
}
});
});
</script>

После всех проделанных шагов, сохраняемся и обновляем страницу. Те кто сделали все правильно — должно всё работать как часы. Те у кого не получилось, не расстраивайтесь

Метки записи: