Question

I would prefer to use .slideToggle and 3 lines of code but not sure how to get the script to ‘refresh’ itself after it’s slid open and return to it’s orginal state when it’s slid back up (it doesn’t slide back up when I use 3 lines and a .slideToggle). Sorry for the bad technical explanation.

$('#showHide').hide();

$('a#slickShow').click(function() {
    $('#showHide').show(400);
    $('.archiveText2 a').replaceWith('<a id="slickShow" href="#">View less Blog Entries<span class="archiveLink2">{</span></a>');

$('a#slickShow').click(function() {
    $('#showHide').hide(400);
    $('.archiveText2 a').replaceWith('<a id="slickShow" href="#">View more Blog Entries<span class="archiveLink2">}</span></a>'); 

This is the code that eventually got it working

$('#showHide').hide();

$('#slickShow').click(function(){

    $('#showHide').slideToggle(400, function() {
        if ($('#showHide').is(':visible')){
          $('.archiveText2 a').html('View less Blog Entries<span class="archiveLink2">{</span>');

        }
        else{
          $('.archiveText2 a').html('View more Blog Entries<span class="archiveLink2">}</span>'); 
        }

    }); 

    return false; 
});

Answer 1

As far as I could understand it, try this:

$('a#slickShow').click(function(){
  $('#showHide').slideToggle(400);

   if ($('#showHide').is(':visible')){
     $('.archiveText2 a').replaceWith('<a id="slickShow" href="#">View less Blog Entries<span class="archiveLink2">{</span></a>');
   }
   else{
     $('.archiveText2 a').replaceWith('<a id="slickShow" href="#">View more Blog Entries<span class="archiveLink2">}</span></a>'); 
   }

   return false;
});