Question

I have this HTML code:

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

When the user clicks the hyperlink above, it will trigger the slideToggle event and show the contents of

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

Which is hidden by default.

It will also change the anchor text of the link from its original $code_sniptitle (this is a PHP variable) to “Click to minimize”. This is my jQuery code:

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

}); 

});

The above code is working well. But I want to revert to its original anchor text when the user clicks the link to minimize the slideToggle. I am using suggestion here: jQuery – slideToggle() and Toggle Text but it won’t work.

Do you have some ideas on how to accomplish this? Thank you so much.

Answer 1

According to the example please use this

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>");
        });
    });
});

change the <Hide> and <Show> text accordingly.

implementation http://jsfiddle.net/UP6jY/