Показать () Скрыть () и удаление кнопок

Question

Показать () Скрыть () и удаление кнопок

0

У меня очень простая проблема, но я не мог найти решение.

Я хочу, чтобы иметь возможность свернуть большой фрагмент текста с небольшим резюме. Когда текст рушится, должна появиться кнопка с надписью "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 );
});

Gorthard 18 сен. 2013, в 17:11

Источник

Теги:

javascript

jquery

html

4 ответа

0

Вот работающий JSBin с тем, что, я думаю, вы пытаетесь выполнить. Если вы ищете что-то еще, просьба уточнить, что вы пытаетесь выполнить.

Рабочий пример ср. ваш комментарий:

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/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>

rusmus 18 сен. 2013, в 13:13

0

Спасибо, но первый текст должен оставаться все время.
Gorthard 18 сен. 2013, в 14:31

0

Вот скрипка 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);
});

Krishna 18 сен. 2013, в 12:44

0

Я бы изменил разметку, чтобы просто поместить сводную (вверху) часть, а затем добавить "дополнительный" текст в другой элемент и переключить этот "дополнительный" текст - избегает некоторого "мигания" видимого текста и делает его довольно легко. Переключить текст "кнопка", используя простую логику, которая проверяет текущее содержимое:

Изменения разметки:

<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/

Mark Schultheiss 18 сен. 2013, в 12:33

Ещё вопросы

Спасибо, но первый текст должен оставаться все время.

Nikhil Patel · Accepted Answer · 2013-09-18T13-43-00.000Z

Ну вот:

JSFiddle

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>