jQuery addClass example

Change class name on click in jQuery

by Kesav Telaprolu

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<head>
    <style>
        /*
 * Legal Disclaimer
 *
    print '\n', 'Note that the webfonts share the TT sources'
 * These Fonts are licensed for unlimited use on domains and their subdomains of The Kantar Group.
 * It is illegal to download or use them on other websites.
 *
 * While the @font-face statements below may be modified by the client, this
 * disclaimer may not be removed.
 *
 * Lineto.com, 2016
 */



@font-face {
    font-family: "KantarBrownWeb-LightItalic";
    src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.eot");
    src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.eot?#iefix") format("embedded-opentype"),
         url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.woff2") format("woff2"),
         url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "KantarBrownWeb-BoldItalic";
    src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.eot");
    src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.eot?#iefix") format("embedded-opentype"),
         url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.woff2") format("woff2"),
         url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "KantarBrownWeb-Italic";
    src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.eot");
    src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.eot?#iefix") format("embedded-opentype"),
        ...

JavaScript

(input=>{


var padding = { top: "35px", right: "15px", bottom: "10px", left: "25px" }

// Container Width and Height

$("#container").width("1240px");
$("#container").height("688px");
$("#container").css("overflow", "auto");
$("#container").css("box-sizing", "border-box");
$("#container").css("border", "1px solid #ccc");
$("#container").css("border-radius", "10px");
$("#container").css("padding-top", padding.top);
$("#container").css("padding-right", padding.right);
$("#container").css("padding-bottom", padding.bottom);
$("#container").css("padding-left", padding.left);


$("#container").append("<div id='titlesWrapper'></div>");

$("#titlesWrapper").append("<div id='title'></div>");
$("#title").css("line-height", "41px");
$("#title").css("font-family", 'KantarBrownWeb-Light');
$("#title").css("font-size", "32px");


$("#titlesWrapper").append("<div id='subTitle'></div>");
$("#subTitle").css("line-height", "41px");
$("#subTitle").css("color", "#e5007e");
$("#subTitle").css("font-family", 'KantarBrownWeb-Bold');
$("#subTitle").css("font-size", "24px");
$("#subTitle").css("font-weight", "700");


$("#titlesWrapper").append("<div id='chartTitle'></div>");

$("#chartTitle").css("line-height", "33px");
$("#chartTitle").css("font-family", 'KantarBrownWeb-Bold');
$("#chartTitle").css("font-size", "17px");
$("#chartTitle").css("font-weight", "700");


var chartHtml =`<div id='chartContainer'></div>`

var secondContainer= `<div id ="secondContainer"></div>`
$("#container").append(secondContainer);

$("#secondContainer").append(chartHtml);



$("#chartContainer").css("padding-right", padding.right);

var Brandcountwidth
    
    $('#title').html(input.title);
    $('#chartTitle').html(input.chartTitle);
    $('#subTitle').html(input.subTitle);


    var tablerow = [];
    var lefttable = '<table style="margin-top:10px;">';
    //table Header
    var Bheader = '<tr><th...