CODEWITHSUNDEEP
javascriptjquery
Smithy
Smithy

Reputation: 847

Switch panels and add according classes

So I got these panels and they work nice, but if I click two times on the same navigation item (Standard, Plus), the class disappears… Also, for example if I click on "Free" panel, and afterwards on "Standard" button it does not switch it… Any ideas what is wrong here..? Here's a pen: https://codepen.io/anon/pen/Wyzgmj

$(".pricing-select__item--ent").on('click', function() {

        $(".pricing-panel").removeClass("pricing-panel--selected");

        if($(".pricing-select__item--tms").hasClass("pricing-select__item--selected--color")) {
            $(".pricing-select__item--tms").removeClass("pricing-select__item--selected--color");
            $(this).addClass("pricing-select__item--selected--color");

            $(".pricing-panel--ent").addClass("pricing-panel--selected");
        }
    });

    $(".pricing-select__item--tms").on('click', function() {

        $(".pricing-panel").removeClass("pricing-panel--selected");

        if($(".pricing-select__item--ent").hasClass("pricing-select__item--selected--color")) {
            $(".pricing-select__item--ent").removeClass("pricing-select__item--selected--color");
            $(this).addClass("pricing-select__item--selected--color");

            $(".pricing-panel--tms").addClass("pricing-panel--selected");
        }
    });

    $(".pricing-panel").click(function() {
        $(".pricing-panel").removeClass("pricing-panel--selected");
        $(this).addClass("pricing-panel--selected");

        if($(this).hasClass("pricing-panel--tms")) {
            $(".pricing-select__item--ent").removeClass("pricing-select__item--selected--color");
            $(".pricing-select__item--tms").addClass("pricing-select__item--selected--color");
        }

        if($(this).hasClass("pricing-panel--ent")) {
            $(".pricing-select__item--tms").removeClass("pricing-select__item--selected--color");
            $(".pricing-select__item--ent").addClass("pricing-select__item--selected--color");
        }
    });

Upvotes: 0

Views: 27

Answers (1)

Lavanya E
Lavanya E

Reputation: 216

Just Add this Code at end of your .pricing-select__item--ent click function

$(".pricing-panel--ent").addClass("pricing-panel--selected");

Just Add this Code at end of your .pricing-select__item--tms click function

$(".pricing-panel--tms").addClass("pricing-panel--selected");

for example:

 $(".pricing-select__item--ent").on('click', function() {

    $(".pricing-panel").removeClass("pricing-panel--selected");

    if($(".pricing-select__item--tms").hasClass("pricing-select__item--selected--color")) {
        $(".pricing-select__item--tms").removeClass("pricing-select__item--selected--color");
        $(this).addClass("pricing-select__item--selected--color");

        $(".pricing-panel--ent").addClass("pricing-panel--selected");
    }
    $(".pricing-panel--ent").addClass("pricing-panel--selected"); //here
});

$(".pricing-select__item--tms").on('click', function() {

    $(".pricing-panel").removeClass("pricing-panel--selected");

    if($(".pricing-select__item--ent").hasClass("pricing-select__item--selected--color")) {
        $(".pricing-select__item--ent").removeClass("pricing-select__item--selected--color");
        $(this).addClass("pricing-select__item--selected--color");

        $(".pricing-panel--tms").addClass("pricing-panel--selected");
    }
    $(".pricing-panel--tms").addClass("pricing-panel--selected"); //here
});

Upvotes: 1

Related Questions