Clicking on a div will add a new class

Question

Clicking on a div will add a new class

How can I dynamically add a class to an element when clicking on a specific tag inside a div? Specifically, I want to add the class "show" when clicking on an anchor tag.

This is the HTML code I am working with:

<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>

To see the issue in action and explore possible solutions, check out the JSFiddle link: http://jsfiddle.net/8wLze4rf/2/

javascript jquery html css

Answer 1

Answer №1

Your fiddle has been updated, I believe this accomplishes what you were aiming for. When clicked, the class is added and another click (anywhere on the page) removes it.

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

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

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

JSFiddle

Answer 2

Your fiddle has been updated, I believe this accomplishes what you were aiming for. When clicked, the class is added and another click (anywhere on the page) removes it.

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

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

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

JSFiddle

Answer 3

Answer №2

Include jQuery library.

Implement the following code:

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

Answer 4

Include jQuery library.

Implement the following code:

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

Answer 5

Answer №3

HTML

<div id="liveChatContainer" class="liveChatContainer online">
    <div class="actions">
        <span class="item title">In need of assistance?</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 Us</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 Link

Answer 6

HTML

<div id="liveChatContainer" class="liveChatContainer online">
    <div class="actions">
        <span class="item title">In need of assistance?</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 Us</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 Link

Answer 7

Answer №4

Utilizing toggle functionality to dynamically add and remove classes, you can view a demonstration here: http://example.com/toggle-demo

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

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

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

Answer 8

Utilizing toggle functionality to dynamically add and remove classes, you can view a demonstration here: http://example.com/toggle-demo

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

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

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

Answer 9

Answer №5

$(document).click(function(e) {
  $('.liveChatContainer').toggleClass('show');
});

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

.show {
  background-color: green;
}

<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 assistance?</span>

    <a href="#"><i class="fa fa-smile-o"></i>Chat now</a>

    <a href="#"><i class="fa fa-smile-o"></i>Call us</a>

    <a href="#"><i class="fa fa-smile-o"></i>Email support</a>

  </div>
  <a href="#" class="liveChatLabel">Contact Us</a>

</div>

Answer 10

$(document).click(function(e) {
  $('.liveChatContainer').toggleClass('show');
});

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

.show {
  background-color: green;
}

<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 assistance?</span>

    <a href="#"><i class="fa fa-smile-o"></i>Chat now</a>

    <a href="#"><i class="fa fa-smile-o"></i>Call us</a>

    <a href="#"><i class="fa fa-smile-o"></i>Email support</a>

  </div>
  <a href="#" class="liveChatLabel">Contact Us</a>

</div>

Answer 11

Answer №6

When working with JavaScript, remember to utilize setAttribute("class","actions") on your link element.

Answer 12

When working with JavaScript, remember to utilize setAttribute("class","actions") on your link element.

Clicking on a div will add a new class

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Combining three.js geometry and selecting objects with an octree

To navigate to the next page, simply click on the box instead of relying on text links

The edit functionality in jqGrid does not function properly if custom search parameters are designated

Finding the Absolute XPath of a Website Element

Issue with rendering dynamic data in a bar chart using React.js

How can I adjust the indentation in Angular Prime-ng's p-tree component?

Error occurred during the file watch process in PhpStorm after saving the CSSO file

Only in local development, there was a discrepancy in the class name

I am puzzled by the fact that the center cell of my table is longer than the surrounding cells

What is preventing my HTML from rendering on the page?

What could be causing the Button disabled feature to malfunction after the page is reloaded?

How can I create a JavaScript loop that continuously prompts the user for input until they type "exit"?

I encountered an issue: "SyntaxError: missing ) after argument list". What steps should I take to fix it?

Express.js does not recognize the req.query value

Is using a div inside a li considered incorrect?

An issue has occurred with error code TS2688: The type definition file for 'jquery' cannot be located. [Angular Application] --

MQTT Broker specialized in Typescript

Utilize a script to set the src attribute of an invisible image to be the background image of a specific <div> element

Ways to prevent clicking on ng-repeat rows?

The `value` attribute in the Dropdown component should be an array if the `multiple` option is enabled. The current type received is a `[object