CODEWITHSUNDEEP
javascriptjqueryfunctionclick
user2390648
user2390648

Reputation: 33

two functions on click in jquery

I have these two functions that i want to apply to the same click (i did have them both inside the click function with the same result... that the image toggle works every time but the show/hide toggle ("optionToggle") only works first time. Both work fine seperately

thanks in advance

function imageToggle() {
    var img = $('.choices').find('.btn').children().children('img');
    img.toggle(function () {img.attr("src","images/misc/dotr-add.png");},
    function () {img.attr("src","images/misc/dotr-minus.png");}
    );
}


function optionToggle() {
    var option = $('.choices').find('.btn').closest('.dishActions').children('.option');
    option.toggle();
}
$('.btn').click(function() {
    optionToggle(); 
    imageToggle();
});

here is the code - 

<div class="dishActions"> 
    <!-- DISH CHOICE --> 
    <div class="choices"> 
        <div class="btn">
            <a href="#">
            <img src="images/misc/dotr-add.png" height="40" width="40" alt="button up" border="0" /> 
        </div> 
        <div class="choicesTxt">Choices </div> 
    </div> 
    <!-- DISH OPTIONS --> 
    <div class="option">

Upvotes: 3

Views: 7463

Answers (1)

adeneo
adeneo

Reputation: 318182

$('.btn').on('click', function() {
    var state = $(this).data('state'),
        image = state ? 'dotr-add' : 'dotr-minus';
    $(this).data('state', !state)
           .find('img')
           .prop('src', 'images/misc/' + image + '.png');
});

EDIT:

I don't see why you'd want this, but with functions :

function imageToggle(state, elem) {
    var image = state ? 'dotr-add' : 'dotr-minus';

    $(elem).find('img').prop('src', 'images/misc/' + image + '.png');
}

function optionToggle(state, elem) {
    $(elem).closest('.dishActions').children('.option').toggle(!state);
}

$('.btn').on('click', function() {
    var state = $(this).data('state');
    imageToggle(state, this);
    optionToggle(state, this);
    $(this).data('state', !state)
});

Upvotes: 2

Related Questions