CODEWITHSUNDEEP
jquery
Iggy of Pop of hip hop
Iggy of Pop of hip hop

Reputation: 17

Jquery is autoclicking

I have got this html

<div class="tagc">
    <p class='HidTagc'>Hide</p>
    <p class='tpt'>Tagged people</p>
</div>

And this jquery

        $(".HidTagc").click(function(event) {
            $(this).parent().css({'border-bottom':"1px solid"});
            $(this).siblings().css('border-bottom', '0');
            $(this).html("Show").addClass('showt');
        });
        $(".tagc").delegate('.showt', 'click', function() {
            $(this).parent().css({'border-bottom':"0"});
            $(this).siblings().css('border-bottom', '1px solid'); 
        });

So the problem is when i click "Hide" it works perfectly but as soon as it changes css to 'border-bottom':"1px solid" one second after it auto changes to 'border-bottom':"0" which is i think because of this line 

$(this).html("Show").addClass('showt');

So how can i make this work properly

Upvotes: 1

Views: 14

Answers (1)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67217

You have to stop the event from bubbling,

 $(".HidTagc").click(function(event) {
   event.stopPropagation();

to stop that from happening. .tagc is a parent of .HidTagc. So whenever you clicks on .HidTagc, the event will be propagated to tagc also.

Upvotes: 1

Related Questions