jQuery - Переключить содержимое

Question

Как я могу переключить текст кнопки после просмотра содержимого? Как я могу скрыть содержимое, если я снова нажму кнопку?

Вот что я имею в виду: JSFiddle

Я хочу, чтобы изменить текст кнопки из Просмотра содержимого, чтобы скрыть содержание и класс значка от fa-arrow-circle-down к fa-arrow-circle-up

$('.js-show-content').bind('click', function(){ 
    $(".content").slideDown(200); 
    return false; 
}); 

Answer 1

Вы можете сделать это следующим образом:

$('.js-show-content').bind('click', function(){ 
    $('.content').slideToggle(200); 
    $(this).find('i').toggleClass('fa-arrow-circle-down fa-arrow-circle-up'); 
    $(this).find('span').html(function(i, text){ 
     return text === 'Hide content' ? 'View content' : 'Hide content'; 
    }); 
    return false; 
}); 

Кроме того, вам придется слегка изменить HTML, обернув текст кнопки в span так, что при изменении текста вы не удалите i элемент:

<a class="js-show-content btn btn-default" href="#" role="button"><i class="fa fa-arrow-circle-down fa-md"></i> <span>View content</span></a> 

Как уже говорилось, вы можете использовать JQuery-х slideToggle, чтобы показать/скрыть .content DIV используя одну строку кода. Следующая часть использует toggleClass для переключения между up и down иконки стрелки на элементе i. Наконец, мы заменяем текст упрощенным if/else statement, который проверяет текущий текст кнопки, если он соответствует, тогда текст изменяется, если он не соответствует, то он переключается на исходный текст.

Updated Fiddle

Answer 2

https://jsfiddle.net/brunodd/0gctxtmv/

Я дон не знаю о вашем тексте кнопки, но теперь он снова активируется при повторном нажатии

$('.js-show-content').bind('click', function(){ 
    $(".content").slideToggle(200); 
    return false; 
}); 

Answer 3

JQuery имеет встроенную функцию под названием .slideToggle(), который вы можете прочитать о здесь: http://api.jquery.com/slidetoggle/

Кроме этого, вы просто должны использовать условные, чтобы изменить свойства CSS, хотя я хотел бы предложить, если вы используя свой собственный CSS, чтобы сделать свойство CSS по умолчанию стрелкой вниз, и когда вы нажимаете добавить класс, который переопределяет эту стрелку. Нажмите еще раз - удалите переопределяющий класс CSS и верните кнопку по умолчанию.

Answer 4

Вы можете добиться эффекта, используя переключатель слайдов jquery.

$(".js-show-content").click(function() { 
    $(".content").slideToggle("slow"); 
}); 

Answer 5

Вот один простой способ сделать это:

$('.js-show-content').bind('click', function() { 
    var btn = $(this); 
    $(".content").slideToggle(200, function() { 
     // Toggle button content    
     if (btn.find('.fa-arrow-circle-down').length) 
      btn.html('<i class="fa fa-arrow-circle-up fa-md"></i> Hide content'); 
     else 
      btn.html('<i class="fa fa-arrow-circle-down fa-md"></i> View content'); 
    }); 
    return false; 
}); 

JSFiddle: http://jsfiddle.net/0gctxtmv/4/