Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Matthew Smart
Matthew Smart
12,567 Points

Jquery: How to change image after fadeToggle();

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

1 Answer

Andrew Dunn
Andrew Dunn
14,718 Points

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

        ```