Question

Having an issue with my “hideText” image replacing my “showText”
Anyone know why? This works fine if show and hide are both text,
but not at all when show and hide are images.

$payload .= '<script type="text/javascript"><!--
            $(document).ready(function() { 
                var showText="<img src=\'images/panelOpen.gif\' />";
                var hideText="<img src=\'images/panelup.gif\' />";
                $(".toggle").prev().append(\'<a href="#" class="toggleLink">\'+showText+\'</a> \');
                $(\'.toggle\').hide(); $(\'a.toggleLink\').click(function() {
                    if ($(this).html()==showText) { $(this).html(hideText); }
                    else { $(this).html(showText); }

                $(this).parent().next(\'.toggle\').toggle(\'slow\');
                    return false; }); });

                    //-->
            </script>';

Answer 1

Try this script. check the names of the images as “panelup.gif” / “panelUp.gif” just going to use linux:

<script type="text/javascript">
<!--
  $(document).ready(function() { 

     var showText= '<img class="img-show" src="images/panelOpen.gif" />';
     var hideText= '<img class="img-hide" src="images/panelup.gif" />';

     $('.toggle').prev().append('<a href="#" class="toggleLink">'+showText+'</a>');
     $('.toggle').hide(); 

     $('a.toggleLink').bind('click', function(ev) {

       ev.stopPropagation();

       if ($(this).find('img').hasClass('img-show')) { 
         $(this).empty().html(hideText); 
       } else { 
         $(this).empty().html(showText); 
       }

       $(this).parent().next('.toggle').toggle('slow');

       return false; 
    });
  });

 //-->
 </script>