SlideToggle Jquery Вернуться к исходному тексту

У меня есть этот HTML-код:

    <div id='codesnipdiv'>
       <a class='fadex' id='codesnipfrontend'>$code_sniptitle</a>
       <div id='boxx' class='clearfix'>
          <pre>$code_content</pre>
       </div>
    </div>

Когда пользователь щелкает гиперссылку выше, это вызывает событие slideToggle и показывает содержимое

   <div id='boxx' class='clearfix'>

Который скрыт по умолчанию.

Он также изменит якорный текст ссылки с исходного $code_sniptitle (это переменная PHP) на «Нажмите, чтобы свернуть». Это мой код jQuery:

   jQuery( document ).ready( function( $ ) {
$('#codesnipdiv #codesnipfrontend').click(function() {  
    $(this).text('Click to minimize');
    $(this).next().slideToggle();

}); 

});

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

У вас есть идеи, как этого добиться? Большое спасибо.


jquery slidetoggle
person Emerson Maningo    schedule 29.11.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В соответствии с примером, пожалуйста, используйте это

jQuery(document).ready(function($) {
    $('#codesnipdiv #codesnipfrontend').click(function(){  
        $("#boxx").animate({opacity: 1.0},200).slideToggle(500, function() {
            $('#codesnipdiv #codesnipfrontend')
               .text($(this).is(':visible') ? "<Hide>" : "<Show>");
        });
    });
});

измените текст <Hide> и <Show> соответственно.

реализация http://jsfiddle.net/UP6jY/

person Talha Ahmed Khan    schedule 29.11.2012