CODEWITHSUNDEEP
javascriptjquery
weyhei
weyhei

Reputation: 479

jQuery toggle on different area

I am trying to copy the Like button of Facebook, but the problem is on the specific place to click to change the button.

When it's not yet liked, the user should click anywhere on the button and the button will change on the gray state (already liked). This is already done.

But the problem is when unliking it, I think I'm not using jquery correctly so that it should set to the blue state(not liked), only if it is clicked on the image.

Here's what I've made, take a look at it so you can understand better: https://glenrdsgn.com/button/

Upvotes: 1

Views: 97

Answers (1)

Jahnold
Jahnold

Reputation: 7683

I've added a class '.unlike' to the ch2 div so that the HTML looks like this:

<div id="like" >
    <div id="ch1" class="btn btn-empty no-like">
        <div class="pad">
            <div class="like-text">
                <div id="ch2" class="data-empty"></div>
                <div class="txt">Like</div>
            </div>
        </div>
    </div>
</div>

Then the following jQuery does what I think you mean:

$(function() {
    $('.btn').live('click', function() {
        $('#ch1').attr('class', 'btn like btn-fill');
        $('#ch2').attr('class', 'unlike data-fill');
    });
    $('.unlike').live('click', function() {
        $('#ch1').attr('class', 'btn btn-empty no-like');
        $('#ch2').attr('class', 'data-empty');
        return false;
    });
});

The return false is needed as otherwise both events are triggered. Hope this helps

Upvotes: 1

Related Questions