Solved

How do you swap and image and text with Jquery

Posted on 2014-01-22
2
169 Views
Last Modified: 2014-01-23
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!
0
Comment
Question by:smfmetro10
2 Comments
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 500 total points
ID: 39802214
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
 

Author Closing Comment

by:smfmetro10
ID: 39803464
Thanks! For some reason I thought I had to use the .attr (src...).

Thanks for the help!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now