jQuery показать скрыть содержимое и изменение ссылок

Question

На некоторых страницах моей компании я хочу использовать шоу и скрывать детали переключения при нажатии на ссылки.

Я использовал .toggle (), но ....

Но здесь есть небольшая проблема, в то время как пользователь нажимает на Показать больше содержание должно скользить вниз, и более важно, чтобы этот текст "Показать больше" должен был быть изменен на " Показать меньше " должно быть переключаться Надеюсь, вы понимаете, что мне действительно нужно.

Спасибо

Answer 1

Джон МакКоллум в основном имеет ваш ответ, но вы также можете использовать сокращение Javascript, чтобы сделать ваш код немного более компактным:

$('#toggle').click(function(ev) { 
    $('#content').toggle(); 
    this.html(($('#toggle').text() == 'Show more') ? 'Show less' : 'Show more');
 })

РЕДАКТИРОВАТЬ: Для ясности я также добавлю html разметку, необходимую для работы вышеуказанного кода. В этом примере показано, что все начинается с.

<p><a id="toggle" href="#">Show less</a></p>
<div id="content"><!-- your stuff goes here. --></div>

Если вы хотите, чтобы он был скрыт для начала, просто измените текст ссылки на "Show more" и добавьте в таблицу стилей следующее правило:

#content { display: none; }

Answer 2

Создание функций переключения для задания текста вашей ссылки и анимации вашего контента. Div

$('a.toggle').toggle( 
    function() { 
        $('#contentDiv').slideDown(); 
        $(this).html('Show less');
    }, 
    function() { 
        $('#contentDiv').slideUp(); 
        $(this).html('Show more');
    } 
);

Answer 3

Это должно сделать это ...

HTML:

    <a href="#" id="expand">
        <span class="linktext" >Show More</span>
        <span class="linktext" style="display:none">Show Less
        </span>
    </a>
    <div id="details" style="display:none"><h1>This is the details</h1></div>

Javascript:

$('a#expand').click(function() {
        $('div#details').slideToggle();
        $('span.linktext').toggle();
    });

Answer 4

Вы можете скрывать и отображать элементы с помощью функций jquery hide() и show(), также есть функция slideDown.

чтобы вы могли запустить что-то вроде этого по клику

$("#showMore").click(function(){
    $("#showMore").hide();
    $("#showLess").show();
    $("#contentDiv").slideDown();
}

это должно вот-вот сделать, дайте мне знать, если у вас есть другие вопросы.

Answer 5

Вы можете изменить значение ссылки с идентификатором 'toggle', выполнив следующее:

HTML:

<a href="#" id="toggle">Show More</a>

jQuery (в пределах вашей функции переключения):

$('a#toggle').text('Show less');