Onclick div add class

Question

I want to add a class when clicking on aa tag inside a div. When clicking on the I want to add the class "show".

I use this HTML:

<div class="liveChatContainer online">
<div class="actions">
<span class="item title">Need help?</span>
<a href="/test"><i class="fa fa-smile-o"></i>Chat</a>
<a href="/test"><i class="fa fa-smile-o"></i>Call</a>
<a href="/test"><i class="fa fa-smile-o"></i>Email</a>
</div>
<a href="#" class="liveChatLabel">Contact</a>
</div>

See the JSFiddle: http://jsfiddle.net/8wLze4rf/2/

Answer 1

I edited your fiddle, i think this is what you want to do. On click the class gets added and on another click (anywhere on the page) it gets removed.

$(".liveChatLabel").click(function(){
    $(".liveChatContainer").addClass("show");
});

$('html').click(function() {
    $(".liveChatContainer.show").removeClass("show");
});

$('.liveChatContainer').click(function(event){
    event.stopPropagation();
});

JSFiddle

Answer 2

1. Add jQuery library.

2. Use this script:

   $(document).ready(function() { $('.liveChatContainer a').click(function() { $('.actions a').removeClass('show'); $(this).addClass('show'); return false; }); });

Answer 3

 $(document).click(function(e) { $('.liveChatContainer').removeClass('show'); }); $('.liveChatContainer a').click(function(e) { $('.liveChatContainer').addClass('show'); e.stopPropagation(); }); $('.liveChatContainer').click(function(e) { e.stopPropagation(); }); 

 .show { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="liveChatContainer online"> <div class="actions"> <span class="item title">Need help?</span> <a href="#"><i class="fa fa-smile-o"></i>Chat</a> <a href="#"><i class="fa fa-smile-o"></i>Call</a> <a href="#"><i class="fa fa-smile-o"></i>Email</a> </div> <a href="#" class="liveChatLabel">Contact</a> </div> 

Answer 4

HTML

<div id="liveChatContainer" class="liveChatContainer online">
    <div class="actions">
        <span class="item title">Need help?</span>
        <a href="/test"><i class="fa fa-smile-o"></i>Chat</a>
        <a href="/test"><i class="fa fa-smile-o"></i>Call</a>
        <a href="/test"><i class="fa fa-smile-o"></i>Email</a>
    </div>
<a id="liveChatLabel" href="#" class="liveChatLabel">Contact</a>
</div>

JS

$(document).ready(function(){ 
    $('#liveChatLabel').click(
        function(){ 
            $('.actions a').removeClass('show'); 
            $('#liveChatContainer').toggleClass('show'); 
            return false;       
        }); 
});

$(document).mouseup(function (e)
{
    var container = $("#liveChatContainer");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.removeClass('show');
    }
});

JSFiddle

Answer 5

I've used toggle to add and remove the class, here's a fiddle of it: http://jsfiddle.net/8wLze4rf/8/

$(document).ready(function(){ 
var button = $('.liveChatContainer');

button.on("click",function(){

button.toggleClass('show');
});
});

Answer 6

use setAttribute("class","actions"); to your link in java script