How do you swap and image and text with Jquery

Hi,

I have a function that works but now I need to add an image before the text that gets swapped during onclick.

Here is my function:
<script type="text/javascript">

$(document).ready(function () {
    $("#toggle_all_dates").on('click', function () {
        var $this = $(this);
        var setToHideAll = false;
        
        if($this.hasClass('showAll')){
            $('#dates_list li div.moredates')
                .not(':visible')
                .prev()
                .each(function(idx,item){ toggleDate(item); });
                setToHideAll = true;
        }else{
            $('#dates_list li div.moredates:visible')
                .prev()
                .each(function(idx,item){ toggleDate(item); });
        }
        
        updateShowAll(setToHideAll);
    });    
    
    $("#dates_list li a").on('click', function () {
        toggleDate(this);
    });
    
    function updateShowAll(setToHideAll){
        if (setToHideAll) {
            $('#toggle_all_dates').removeClass('showAll');
            $('#toggle_all_dates').html('Hide all Dates and Locations');
        } else {
            $('#toggle_all_dates').addClass('showAll');
            $('#toggle_all_dates').html('Show all  Dates and Locations');
             
        }
    }

    function toggleDate(elem){
        var $elem = $(elem);
        var setToHideAll = false;
   
        if(! $elem.closest('tr').find('div.moredates').is(':visible') && $('#dates_list li div.moredates:visible').length === $('#dates_list li div.moredates').length - 2){
            setToHideAll = true;
        }
        $elem.closest('tr').find('div.moredates').slideToggle();
            
           $("img",elem).attr("src",$("img",elem).attr("src") == "images/minus.png" ? "/images/plus.png" : "images/minus.png"); 

        updateShowAll(setToHideAll);

    }
})

</script>

Open in new window


I need to put the image right before the
 " $('#toggle_all_dates').html('Hide all Dates and Locations');" and the
"$('#toggle_all_dates').html('Show all  Dates and Locations');"

in the " function updateShowAll(setToHideAll)"

Any help will be greatly appreciated

Thanks!
smfmetro10Asked:
Who is Participating?
 
Rainer JeschorConnect With a Mentor Commented:
Hi,
can you provide an example of your working HTML ?

The easiest would be to replace the simple string and add the img html as well like
$('#toggle_all_dates').html('<img src="/images/minus.gif" />Hide all Dates and Locations');

Open in new window


HTH
Rainer
0
 
smfmetro10Author Commented:
Thanks! For some reason I thought I had to use the .attr (src...).

Thanks for the help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.