Jquery: How to change image after fadeToggle();

Question

Basically i have something like this:

             <div class="slot">
                                            <div class="top">
                                                <?php echo    $this->html->image('carpark.gif');?>
                                            </div>
                                            <div class="linkbar">
                                                <h3>Car Parks</h3>
                                            </div> 
                                            <div class="linktext">
                                                <h4>-hello</h4>
                                                <h4>-hello</h4>
                                                <h4>-hello</h4>
                                            </div>
                           </div><!-- END OF SLOT -->

There are 3 different divs with the same class's.

In class .top i have a picture so this one is a picture of a car park.

in class .linkbar i have a bar with the text Carpark inside. and the this class has a background image ("linkbar.gif")

in class .linktext i have bullet points about the carpark. this class has a display:none; so that its hidden.

When the picture (.top) is clicked i want the class .linkbar to change its image to (linkbar2.gif). also change the bottom-border-left and right to become 0px. then i wont the class .linktext to fade in underneath.

Now when the picture is clicked again i want the clas .linktext to fadeout anmd become hidden again. then i wont the class .linkbar to change back to the original background-image of ("linkbar.gif).

I have managed to do the first part, but when the picture is clicked again, the class .linkbar does not change its background-image back to the first one.

Can anyone help please?

   $('.top').click(function () {
                    $('.linkbar').css("border-bottom-left-radius", "0px");
                    $('.linkbar').css("border-bottom-right-radius", "0px");
                    $('.linkbar').css("background-image", "url('../img/linkbar2.gif')")
                    $('.linktext').fadeToggle('slow');
                });

                if(document.getElementsByClassName('linktext').style.display == "none"){
                    $('.linkbar').css("background-image", "url('../img/linkbar.gif')")
                }

Along with this i have another issue. when this code executes it changes all the class .slots , but i wont it only to happen to the specific link bar i click. So if i click carpark. The carpark .linktext will appear. and if i click the road markings the roadmarkings .linktext will appear

Answer 1 · 2014-08-17T19:52:17Z

August 17, 2014 7:52pm

Recommended I think you may have over-thought this solution, though it's possible that there are good reasons for including CSS in your behaviour code like this.

As I see it, all you need to do is toggle a brand new class on the .linkbar (perhaps call it 'linkbar-active' or 'linkbar2' to fit with the background image you want).

I was going to rewrite your code with a very simple 5 line if statement, but apparently Jquery has a one-liner that could do this for you...

$(".linkbar").toggleClass("linkbar2");

As for the styling, you would put all your default styling for .linkbar in your external CSS document ( as I'm sure you already have), and after that .linkbar code, you'd add .linkbar2, with all of the styling you've called for in your javascript above.

This should give you all the image-swapping you need.

Not Recommended If you absolutely must have your hard coded CSS in Javascript, the reason why it doesn't work is because your non-Jquery JS code at the end is outside any callback function - it only gets executed once, and is always false, and/or undefined. Move it into the .click() callback, ideally turn it into Jquery, and even more ideally, run it after the fadeToggle is complete.

$('.top').click(function () {
    $('.linktext').fadeToggle('slow', function() { 
        if($(this).css("display") == "none") {
            $('.linkbar').css("background-image", "url('../img/linkbar.gif')");
        }
        else {

            $('.linkbar').css("border-bottom-left-radius", "0px");
            $('.linkbar').css("border-bottom-right-radius", "0px");
            $('.linkbar').css("background-image", "url('../img/linkbar2.gif')")
        } //end if
    }); //end of fadetoggle
}); // end of click

        ```

Welcome to the Treehouse Community

Looking to learn something new?

Matthew Smart

Matthew Smart

Jquery: How to change image after fadeToggle();

1 Answer

Andrew Dunn

Andrew Dunn