CODEWITHSUNDEEP
jquery
Josh
Josh

Reputation: 615

Toggling an image with jquery

I have a image, "sprites arrow-d", in a parent element ".learn-more". If learn-more is clicked, i want arrow-d replaced by arrow-u and vice-versa. What is the best way to write this.

$('.learn-more').click(function() {

    if ($('.arrow-d').is('arrow-d'))
    {
    $('#hero').animate({
        'height':'400'
    }, 700);
        $('.arrow-d').removeClass('arrow-d').addClass('arrow-u');
    }
    else 
    {
        $('.arrow-u').removeClass('arrow-u').addClass('arrow-d');
    }


});

html:

        <div class="learn-more">
            <span>LEARN MORE ABOUT</span>
            <i class="sprites arrow-d"></i>
        </div>

Upvotes: 0

Views: 119

Answers (3)

adeneo
adeneo

Reputation: 318222

$('.learn-more').on('click', function() {
    $('#hero').animate({'height': $('.arrow-d').length?400:80}, 700);
    $('.arrow-d').toggleClass('arrow-d arrow-u');
});​

Upvotes: 2

Pulkit Mittal
Pulkit Mittal

Reputation: 6076

  $('.learn-more').click(function() {

    var sprites = $(this).find('sprites');
        if (sprites.hasClass('arrow-d'))
        {
$('#hero').animate({
        'height':'400px'
    }, 700);
            sprites.removeClass('arrow-d').addClass('arrow-u');
        }
        else 
        {
$('#hero').animate({
        'height':'80px'
    }, 700);
            sprites.removeClass('arrow-u').addClass('arrow-d');
        }

    });

Upvotes: 0

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

You can use .toggleClass() method instead. That way you won't need to check if the classes are present or not. Something like this:

$('.learn-more').click(function() {
    $('#hero').animate({
        'height':'400'
    }, 700);
    $("i.sprites").toggleClass("arrow-d arrow-u");
});

Upvotes: 1

Related Questions