Adding & removing CSS classes based on onclick

Question

I have a set of panels that display content when clicked (and turn green when active with an the arrow-up class active as well to indicate that the content has been expanded. However I'm struggling to implement the removal of both the arrow-up & active-tile classes when the close button is clicked and no tiles are active (therefore should all be black, arrow-down).

This is what's happening currently onclick: onclick="this.parentElement.style.display='none'" - can anyone advise what is the best approach for making the above happen? working fiddle here: https://jsfiddle.net/simoncunningham/j7qofxvc/

function openTab(tabName, event) {
    event.target.classList.add("active-tile");
    event.target.children[2].classList.add("arrow-up");
    var i, x;
    x = document.getElementsByClassName("content");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    document.getElementById(tabName).style.display = "block";

    // Get all the tabs into a collection
    // (don't use .getElementsByClassName()!)
    let tabs = document.querySelectorAll(".tile");

    // Set up a click event handler on each of the tabs
    tabs.forEach(function(tab) {
        tab.addEventListener("click", function(event) {
            // Loop over all the tabs and remove the active class
            tabs.forEach(function(tab) {
                tab.classList.remove("active-tile");
                tab.children[2].classList.remove("arrow-up");
            });

            // Set the background of the clicked tab
            this.classList.add("active-tile");
            tab.children[2].classList.add("arrow-up");
        });
    });
}

<style media="screen">
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.box {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding-right: 6rem;
    padding-left: 6rem;
}

.tile,
.active-tile,
.content {
    box-sizing: border-box;
}

.tile>* {
    pointer-events: none;
}

.tile {
    flex: 1 0 auto;
    order: 0;
    flex-basis: 25%;

    /* For visual only  */
    background-color: #222;
    border: 1px solid grey;
    height: 150px;
    text-align: center;
    font-size: 16px;
    color: white;
    cursor: pointer;
}

.active-tile {
    flex: 1 0 auto;
    order: 0;
    flex-basis: 25%;

    /* For visual only  */
    text-align: center;
    border: 1px solid #000;
    background-color: green;
    cursor: pointer;
}

.content {
    order: 1;
    flex: 1 0 100%;

    /* For visual only  */
    padding: 20px;
    color: white;
    text-align: center;
    border: 1px solid #000;
    background-color: #228b22;
}

.description {
    text-align: left;
}

.icon-spacing {
    margin-top: 24px;
}

/* Clear floats after the tiles */
.box:after {
    content: "";
    display: table;
    clear: both;
}

.closebtn {
    float: right;
    color: white;
    cursor: pointer;
}

.arrow-down {
    width: 25px;
    height: 25px;
}

.arrow-up {
    width: 25px;
    height: 25px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.specialisms-content {
    padding-top: 25px;
    padding-bottom: 25px;
}

/* "Desktop" and above */
@media (max-width: 480px) {
    .box {
        flex-direction: column;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .content {
        order: 0;
    }
}

@media (max-width: 768px) {
    .box {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}
</style>

<div class="box">
    <div class="tile" onclick="openTab('b1', event);">
        <img class="icon-spacing" src="./assets/Icons/Banking.svg" />
        <p>Banking</p>
        <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
    </div>
    <div id="b1" class="content" style="display: none; background: #222">
        <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
        <div class="description">
            <h3>Banking</h3>
            <p>
                The largest category covering investment and management
                platforms, sales and trading analysis toosl, personal finance
                management & crypto exchanges.
            </p>
            <ul>
                <li>Personal Finance Management (PFM)</li>
                <li>Investment Data and Information Services</li>
                <li>Trading and Investment Platforms</li>
                <li>WealthTech Operations</li>
                <li>Distributed Ledger Technologies & Cryptocurrencies</li>
                <li>Robo Advisors</li>
            </ul>
        </div>
    </div>
    <div class="tile" onclick="openTab('b2', event);">
        <img class="icon-spacing" src="./assets/Icons/Regtech.svg" />
        <p>RegTech</p>
        <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
    </div>
    <div id="b2" class="content" style="display: none; background: #222">
        <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
        <div class="description">
            <h3>RegTech</h3>
            <p>
                The largest category covering investment and management
                platforms, sales and trading analysis toosl, personal finance
                management & crypto exchanges.
            </p>
            <ul>
                <li>Personal Finance Management (PFM)</li>
                <li>Investment Data and Information Services</li>
                <li>Trading and Investment Platforms</li>
                <li>WealthTech Operations</li>
                <li>Distributed Ledger Technologies & Cryptocurrencies</li>
                <li>Robo Advisors</li>
            </ul>
        </div>
    </div>
    <div class="tile" onclick="openTab('b3', event);">
        <img class="icon-spacing" src="./assets/Icons/InsurTech.svg" />
        <p>InsurTech</p>
        <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
    </div>
    <div id="b3" class="content" style="display: none; background: #222">
        <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
        <div class="description">
            <h3>InsurTech</h3>
            <p>
                The largest category covering investment and management
                platforms, sales and trading analysis toosl, personal finance
                management & crypto exchanges.
            </p>
            <ul>
                <li>Personal Finance Management (PFM)</li>
                <li>Investment Data and Information Services</li>
                <li>Trading and Investment Platforms</li>
                <li>WealthTech Operations</li>
                <li>Distributed Ledger Technologies & Cryptocurrencies</li>
                <li>Robo Advisors</li>
            </ul>
        </div>
    </div>
    <div class="tile" onclick="openTab('b4', event);">
        <img class="icon-spacing" src="./assets/Icons/Lending.svg" />
        <p>Lending</p>
        <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
    </div>
    <div id="b4" class="content" style="display: none; background: #222">
        <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
        <div class="description">
            <h3>Lending</h3>
            <p>
                The largest category covering investment and management
                platforms, sales and trading analysis toosl, personal finance
                management & crypto exchanges.
            </p>
            <ul>
                <li>Personal Finance Management (PFM)</li>
                <li>Investment Data and Information Services</li>
                <li>Trading and Investment Platforms</li>
                <li>WealthTech Operations</li>
                <li>Distributed Ledger Technologies & Cryptocurrencies</li>
                <li>Robo Advisors</li>
            </ul>
        </div>
    </div>
</div>

<div class="box">
    <div class="tile" onclick="openTab('b5', event);">
        <img class="icon-spacing" src="./assets/Icons/Accounting.svg" />
        <p>Accounting</p>
        <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
    </div>
    <div id="b5" class="content" style="display: none; background: #222">
        <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
        <div class="description">
            <h3>Accounting</h3>
            <p>
                The largest category covering investment and management
                platforms, sales and trading analysis toosl, personal finance
                management & crypto exchanges.
            </p>
            <ul>
                <li>Personal Finance Management (PFM)</li>
                <li>Investment Data and Information Services</li>
                <li>Trading and Investment Platforms</li>
                <li>WealthTech Operations</li>
                <li>Distributed Ledger Technologies & Cryptocurrencies</li>
                <li>Robo Advisors</li>
            </ul>
        </div>
    </div>
    <div class="tile" onclick="openTab('b6', event);">
        <img class="icon-spacing" src="./assets/Icons/Payments.svg" />
        <p>Payments</p>
        <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
    </div>
    <div id="b6" class="content" style="display: none; background: #222">
        <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
        <div class="description">
            <h3>Payments</h3>
            <p>
                The largest category covering investment and management
                platforms, sales and trading analysis toosl, personal finance
                management & crypto exchanges.
            </p>
            <ul>
                <li>Personal Finance Management (PFM)</li>
                <li>Investment Data and Information Services</li>
                <li>Trading and Investment Platforms</li>
                <li>WealthTech Operations</li>
                <li>Distributed Ledger Technologies & Cryptocurrencies</li>
                <li>Robo Advisors</li>
            </ul>
        </div>
    </div>
    <div class="tile" onclick="openTab('b7', event);">
        <img class="icon-spacing" src="./assets/Icons/Quote.svg" />
        <p>Quote</p>
        <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
    </div>
    <div id="b7" class="content" style="display: none; background: #222">
        <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
        <div class="description">
            <h3>Quote</h3>
            <p>
                The largest category covering investment and management
                platforms, sales and trading analysis toosl, personal finance
                management & crypto exchanges.
            </p>
            <ul>
                <li>Personal Finance Management (PFM)</li>
                <li>Investment Data and Information Services</li>
                <li>Trading and Investment Platforms</li>
                <li>WealthTech Operations</li>
                <li>Distributed Ledger Technologies & Cryptocurrencies</li>
                <li>Robo Advisors</li>
            </ul>
        </div>
    </div>
    <div class="tile" onclick="openTab('b8', event);">
        <img class="icon-spacing" src="./assets/Icons/WealthTech.svg" />
        <p>WealthTech</p>
        <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
    </div>
    <div id="b8" class="content" style="display: none; background: #222">
        <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
        <div class="description">
            <h3>WealthTech</h3>
            <p>
                The largest category covering investment and management
                platforms, sales and trading analysis toosl, personal finance
                management & crypto exchanges.
            </p>
            <ul>
                <li>Personal Finance Management (PFM)</li>
                <li>Investment Data and Information Services</li>
                <li>Trading and Investment Platforms</li>
                <li>WealthTech Operations</li>
                <li>Distributed Ledger Technologies & Cryptocurrencies</li>
                <li>Robo Advisors</li>
            </ul>
        </div>
    </div>
</div>

Use the onclick attribute. Not a good idea, my suggestion is to use addEventListener. — Hancel Lin, Mar 08 '21 at 10:13
I would say the preferred way should be, please remove the inline styling, and toggle using classes. So that even in near future, if you want to change any colour then it would easier to change and scale if you anytime plan to write your css using SCSS/SASS/LESS. — Himanshu Saxena, Mar 08 '21 at 10:13

score 1 · Accepted Answer · answered Mar 08 '21 at 10:29

1

Adding inline is not preferred way of doing, you can use the features like toggle or remove to achieve your need like below

element.classList.add("active-tile");
element.classList.remove("active-tile");
element.classList.toggle("active-tile");

To toggle, add and remove class you can refer this

answered Mar 08 '21 at 10:29

GokulnathP

692
3
9

thanks - i've tried adding a `closeTab()` to the onclick with the function like so: ` function closeTab() { this.parentElement.style.display='none'; element.classList.remove("active-tile"); } ` can you see where i'm going wrong? – cts Mar 08 '21 at 11:56
Here you have to give element which you want to remove class (similar to openTab function element.target.calssList.add("active-tile");) – GokulnathP Mar 08 '21 at 12:07

score 0 · Answer 2 · answered Mar 08 '21 at 10:47

I have already answered similar question to this one in the below link.

How to remove style attribute added with jquery

The easiest way of doing this is by creating a CSS rule's stylesheet.

In that stylesheet, you should define 2 classes.

Let's suppose 1 for your desired CSS rules and the other for the default/none rules.

I am just showing you the simplest version of doing this thing but with another aspect.

$('#b1').on('click', function() {
  $('.c1').removeClass('c1');
  $(this).addClass('c2');
});

.c1 {
  color: red;
}

.c2 {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="b1">Change</button>
<p class="c1">This is a Test Line.</p>

Adding & removing CSS classes based on onclick

2 Answers2