Переключить текст с помощью JQuery с текстовыми дисплеями

Question

Я использую JQuery для переключения дисплея на определенные теги P. При щелчке по «Дополнительно» отображается весь текст. Я хочу, чтобы прослушиватель кликов сказал «Меньше», когда содержимое было отображено. На данный момент он говорит «Больше» все время. Мне нужно изменить «Больше» на «Меньше» при переключении. Я смог добиться этого, удалив классы, которые позволяют отображать и скрывать текст, это побеждает цель, потому что это та самая функциональность, о которой я забочусь.

Работа Отображение текста:

http://jsfiddle.net/5UgfH/

Работая больше/меньше Переключение:

http://jsfiddle.net/LKJ5N/

<p> Please Help </p> 

Спасибо заранее.

Answer 1

Просто раскомментируйте логику h3 потайное (от вашей первой скрипки):

//$("#moretext").click(function() { 
// $('h3', this).toggle(); 
//}); 

Проверьте это работает: http://jsfiddle.net/5UgfH/1/

Answer 2

Проверьте этот плагин, он должен сделать трюк. jQuery expander

Answer 3

Вы не должны действительно использовать два элемента для этого, просто поменяйте текст.
Вы бы сделать это так:

$(document).ready(function() { 
    $(".showhidetext").hide(); 
    var more = $('<h3 />', {id :'more', 
          text :'MORE', 
          on : { 
            click: function() { 
             $(".showhidetext").toggle(); 
             $(this).text(function(_,txt) { 
              return txt == 'MORE'?'LESS':'MORE'; 
             }) 
            } 
           } 
          } 
       ); 
    $('#moretext').append(more); 
}); 

FIDDLE

Обратите внимание, что идентификаторы уникальны, и вы можете иметь только один и тот же идентификатор один раз в документе, поэтому изменить #showhidetext к классу вместо

Answer 4

Попробуйте это:

$(document).ready(function() { 
    $("#showhidetext").toggle() 
    var more_texts = ['MORE','LESS']; 
    var text_flag = 0; 
     $("#moretext").click(function(){ 
      $('#showhidetext').toggle(); 
      $(this).text(more_texts[++text_flag%2]); 
     }); 
}); 

Таким образом, вы Wo не нужно, чтобы скрыть/показать текст, который вызывает текст .toggle(), просто стиль #showhidetext, как вам нужно

JSFiddle Demo