CODEWITHSUNDEEP
javascriptjqueryhtmlfrontend
Martin
Martin

Reputation: 557

Changing background color on a series of tab in Javascript

Am working on an application and on the frontend I have some custom tabs which I want when one of them is clicked I capture the text on the tab e.g inpatient and the background color changes after the value is captured.

My goal is I want one tab to be clicked at a time. Basically, the background color of the currently clicked tab should change and the value captured (text on the tab) while the previous clicked tab background color reverts back to its original state.

Markup code

<div class="row">
    <div class="col-11 mx-auto d-flex jbiz-plans">
        <div class="col flex-fill benefit text-center">
        <img src="{{ asset('images/care.png')}}">  <br>
            Inpatient
        </div>
        <div class="col ml-1 flex-fill benefit text-center">
            <img src="{{ asset('images/care.png')}}">  <br>
            Outpatient
        </div>
        <div class="col ml-1 flex-fill benefit text-center">
            <img src="{{ asset('images/care.png')}}">  <br>
            Dental
        </div>
        <div class="col ml-1 flex-fill benefit text-center">
            <img src="{{ asset('images/care.png')}}">  <br>
            Optical
        </div>
        <div class="col ml-1 flex-fill benefit text-center">
            <img src="{{ asset('images/care.png')}}">  <br>
            Maternity
        </div>
    </div>
</div>

JavaScript logic I am using

let bgColor = false;
$(".benefit").click(function () {
    if (bgColor = !bgColor) {
        $(this).css("background-color", "#ba0c2f");
        $(this).css("color", "#fff");
        //alert($(this).text());
    } else {
        $(this).css("background-color", "#d6d2c5");
        $(this).css("color", "gray");
    }
});

Upvotes: 0

Views: 67

Answers (2)

Amit Sargar
Amit Sargar

Reputation: 281

Resetting color of all benefit to default and then setting the value of clicked element should work.

let bgColor = false;
$(".benefit").click(function () {
    $('.benefit').css("background-color", "");
    $('.benefit').css("color", "");
    if (bgColor = !bgColor) {
        $(this).css("background-color", "#ba0c2f");
        $(this).css("color", "#fff");
    } else {
        $(this).css("background-color", "#d6d2c5");
        $(this).css("color", "gray");
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
    <div class="col-11 mx-auto d-flex jbiz-plans">
        <div class="col flex-fill benefit text-center">
        <img src="{{ asset('images/care.png')}}">  <br>
            Inpatient
        </div>
        <div class="col ml-1 flex-fill benefit text-center">
            <img src="{{ asset('images/care.png')}}">  <br>
            Outpatient
        </div>
        <div class="col ml-1 flex-fill benefit text-center">
            <img src="{{ asset('images/care.png')}}">  <br>
            Dental
        </div>
        <div class="col ml-1 flex-fill benefit text-center">
            <img src="{{ asset('images/care.png')}}">  <br>
            Optical
        </div>
        <div class="col ml-1 flex-fill benefit text-center">
            <img src="{{ asset('images/care.png')}}">  <br>
            Maternity
        </div>
    </div>
</div>

Upvotes: 2

Max
Max

Reputation: 405

You could change your JavaScript to the below. It sets all elements with the class "benefit" to their default background-color and color then changes the element clicked to the new background-color and color:

$(".benefit").click(function () {
    // reset old values
    $('.benefit').css("color", "");
    $('.benefit').css("background-color", "");
    // update clicked element
    $(this).css("color", "gray");
    $(this).css("background-color", "#d6d2c5");
});

Does this achieve what you are looking for?

https://jsfiddle.net/52aL6wzd/

Upvotes: 0

Related Questions