У меня очень простая проблема, но я не мог найти решение.
Я хочу, чтобы иметь возможность свернуть большой фрагмент текста с небольшим резюме. Когда текст рушится, должна появиться кнопка с надписью "read more", которая расширяет ее, и когда текст будет расширен, кнопка должна сказать "свернуть", что, как вы догадались, сворачивает ее.
Для этого я попытался использовать следующий Javascript. JSbin ЗДЕСЬ, но он не работает.
разметка:
<div>Lore lipsumLore lipsumLore lipsumLore lipsumLore
<br>lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore
<br>lipsumLore lipsumLore lipsum
<div id="rozwin">read more</div>
</div>
<p id="rozwijane">Lore lipsumLore lipsumLore lipsumLore lipsumLore
<br>lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore
<br>lipsumLore lipsumLore lipsum elektroniczną (Dz. U. Nr 144, poz. 1204 z późn. zm.).
<div id="zwin">collapse</div>
JS:
$( "#zwin" ).click(function() {
$( "#rozwijane" ).hide( "fast", function() {
$( "#rozwin" ).show( 2000 );
$( this ).prev().hide( "fast", arguments.callee );
});
});
$("#rozwin" ).click(function() {
$( "#rozwijanie" ).show( 2000 );
$( "#zwin" ).hide( 2000 );
});
Ну вот:
jQuery:
$("#zwin").click(function () {
$("#rozwijane").hide(2000);
$('#zwin').hide(2000);
$("#rozwin").show(2000);
});
$("#rozwin").click(function () {
$("#rozwin").hide(2000);
$("#rozwijane").show(2000);
$("#zwin").show(2000);
});
CSS:
#rozwijane {
display : none;
}
#zwin {
display : none;
}
HTML:
<div>Lore lipsumLore lipsumLore lipsumLore lipsumLore
<br />lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore
<br />lipsumLore lipsumLore lipsum
</div>
<div id="rozwin">read more</div>
<p id="rozwijane">Lore lipsumLore lipsumLore lipsumLore lipsumLore
<br />lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore
<br />lipsumLore lipsumLore lipsum elektroniczną (Dz. U. Nr 144, poz. 1204 z późn. zm.).</p>
<div id="zwin">collapse</div>
Вот работающий JSBin с тем, что, я думаю, вы пытаетесь выполнить. Если вы ищете что-то еще, просьба уточнить, что вы пытаетесь выполнить.
Рабочий пример ср. ваш комментарий:
<!DOCTYPE html>
<html>
<head>
<script src="/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#zwin").click(function () {
$("#rozwijane").hide("fast", function () {
$("#rozwin").show(2000);
$("#zwin").hide(2000);
});
});
$("#rozwin").click(function () {
$("#rozwijane").show(2000);
$("#zwin").show(2000);
$(this).hide(2000);
});
});
</script>
<title>Show/hide text</title>
</head>
<body>
<div>
Lorem ipsum dolor sit ...</div>
<div id="rozwin">
Read more</div>
<p id="rozwijane" style="display: none;">
Lore lipsumLore lipsumLore lipsumLore lipsumLore<br>
lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore<br>
lipsumLore lipsumLore lipsum elektroniczną (Dz. U. Nr 144, poz. 1204 z późn. zm.).</p>
<div id="zwin" style="display: none;">
collapse</div>
</body>
</html>
Вот скрипка DEMO
В jsbin вы не закрыли тег p
должным образом. Кроме того, в вашем скрипте id является rozwijanie
но ваш HTML имеет rozwijane
$("#zwin").click(function () {
$("#rozwijane").hide();
$("#zwin").hide();
$('#rozwin').show();
});
$("#rozwin").click(function () {
$('#rozwin').hide(2000);
$("#rozwijane").show(2000);
$("#zwin").show(2000);
});
Я бы изменил разметку, чтобы просто поместить сводную (вверху) часть, а затем добавить "дополнительный" текст в другой элемент и переключить этот "дополнительный" текст - избегает некоторого "мигания" видимого текста и делает его довольно легко. Переключить текст "кнопка", используя простую логику, которая проверяет текущее содержимое:
Изменения разметки:
<div id="rozwi">Lore lipsumLore lipsumLore lipsumLore lipsumLore
<br />lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore</div>
<div id="rozwijane">
<br>lipsumLore lipsumLore lipsum elektroniczną (Dz. U. Nr 144, poz. 1204 z późn. zm.).
<p>Lore lipsumLore lipsumLore lipsumLore lipsumLore
<br />lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore lipsumLore
<br />lipsumLore lipsumLore lipsum elektroniczną (Dz. U. Nr 144, poz. 1204 z późn. zm.).</p>
</div>
<div id="zwin">show more</div>
Упрощенный код:
$("#rozwijane").hide();// hide expanded text initially
$("#zwin").click(function () {
var mytext="collapse";
var currentText= $(this).text()
$(this).text(currentText===mytext?"show more":mytext);
$("#rozwijane").toggle("fast");
});
Пример в рабочем состоянии: http://jsfiddle.net/emF5W/