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 Brandcountwidth = Input.dataSeries.length*148 +80;
        var htmlstring ='<div style="width:1240;">'+
                '<div style="margin-top:10px"><span id="title" style="margin-left:15px;width:1180px;height:42px;color:#000000;font-size:32px;font-family:KantarBrownWeb-Light;"></span></div>'+
                '<div style="margin-top:5px;"><span id="subtitle" style="margin-left:15px;margin-top:8px;width:1180px;height:42px;color:#e5007e;font-size:24px;font-family:KantarBrownWeb-Bold;"></span></div>'+
                '<div style="width:1180px;margin-top:10px;margin-left:15px"><span id="charttitle" style="width:1180px;height:34px;color:#000000;font-size:17px;font-weight:700;font-family:KantarBrownWeb-Bold;"></span></div>'+ 
                '<div id="leftcolumn" style="border:1px solid white;min-height:500px;width:'+(Brandcountwidth < 900 ? 1080 : Brandcountwidth)+'px;margin-top:15px;margin-left:16px;padding-top:3px;"></div>' +
                '<div id="Footer" style="margin-left:18px;width:'+(Brandcountwidth < 900 ? 1080 : Brandcountwidth) +'px;height:32px;border-radius:6px;border:1px solid #dbdbdb;background-color:#fcfcfc;"><div style="padding-top:5px;">'+
                '<div style="float:left"><img style="padding-top:2px;margin-left:15px;margin-right:5px;width:16px;height:16px;" src="http://i66.tinypic.com/5al0lx.png" alt="chosenbrandimage" border="0" /></div>'+
                '<div style="float:left;padding-top:2px;margin-right:10px;margin-left:5px;width:auto;height:22px;color:#575757;font-family:"KantarBrownWeb-Light";font-size:15px;line-height:23px;" class="legendText">Sub group overrepresented among trialists (vs category buyers)</div>'+
                '<div style="float:left"><img style="padding-top:2px;margin-right:5px;width:16px;height:16px;margin-left:15px;" src="http://i64.tinypic.com/hsosk6.png" alt="competitors" border="0"></div>'+
                '<div...