Jquery add/removeClass not functioning

Question

I have been trying to make an arrow rotate by adding a css class to a jquery statement. This is used on show/hide tabs which will allow me to show which one is open based on the arrows.

I had this working on a previous page when i had 3 tabs but i added a 4th tab on a new page and now it wont work.

It is printing my console.log and not returning any errors so im struggling to understand what im doing wrong.

This is the JQuery:

<script>
    $("#border-information").click (function() {
        $("#showhide-information").show(500);
        $(".arrowup").addClass("turn");
        } );

    $("#border-resources").click (function() {
        $("#showhide-resource").show(500);
        $(".arrowdown2").addClass("turn");
        } );

    $("#border-comment").click (function() {
        $("#showhide-comment").show(500);
        $(".arrowdown3").addClass("turn");
    } );

    $("#border-timelapse").click (function() {
        $("#showhide-timelapse").show(500);
        $(".arrowdown4").addClass("turn");
    } );

var showHide="one";


$("#border-information").click (function() {
    showHide="one";
    changePanel();
} );

$("#border-resources").click (function() {
    showHide="two";
    changePanel();
} );

$("#border-comment").click (function() {
    showHide="three";
    changePanel();
} );

$("#border-timelapse").click (function() {
    showHide="four";
    changePanel();
} );

function changePanel(){
    switch(showHide){

        case "one":
        //My code
        console.log("my code 1 is working");
        $("#showhide-comment").hide(500);
        $("#showhide-resource").hide(500);
        $("#showhide-timelapse").hide(500);
        $(".arrowdown2").removeClass("turn");
        $(".arrowdown3").removeClass("turn");
        $(".arrowup").removeClass("turn");
        $(".arrowdown4").removeClass("turn");
        break;

        case "two":
        //My code
        console.log("my code 2 is working");
        $("#showhide-information").hide(500);
        $("#showhide-comment").hide(500);
        $("#showhide-timelapse").hide(500);
        $(".arrowup").addClass("turn");
        $(".arrowdown3").removeClass("turn");
        $(".arrowdown4").removeClass("turn");
        break;

        case "three":
        //My code
        console.log("my code 3 is working");
        $("#showhide-information").hide(500);
        $("#showhide-resource").hide(500);
        $("#showhide-timelapse").hide(500);
        $(".arrowup").addClass("turn");
        $(".arrowdown2").removeClass("turn");
        $(".arrowdown4").removeClass("turn");
        break;

         case "four":
        //My code
        console.log("my code 4 is working");
        $("#showhide-information").hide(500);
        $("#showhide-resource").hide(500);
        $("#showhide-comment").hide(500);
        $(".arrowup").addClass("turn");
        $(".arrowdown2").removeClass("turn");
        $(".arrowdown3").removeClass("turn");
        break;

        default:
        //My default code
    }
}
;
</script>

This is the CSS Class that im using:

        #wrapper {
        background-color: #1B9AA1;
        width: 100%;
        overflow:hidden;
    } 

    body {
        margin: 0;
        font-family: Arial;
        height: 100%;
        width: 100%;
    }

    .container {
        background-color: #1B9AA1;
        width:100%;
    }

    #sidebar {
        width: 100%;
        background-color: #1B9AA1;
        overflow: hidden;
        height: 70%;
    }

    #resources-text {
        font-size: 26px;
        font-weight: none;
        display: inline-block;
        padding-left: 3px;
        color: white;
    }

    #information-text {
        font-size: 26px;
        font-weight: none;
        padding-left: 36px;
        color: white;
        margin: 0;
        float: left;
        display: inline-block;
    }

    .description {
        font-size: 13.5px;
        color: white;
        display: inline-block;
        padding-left: 3px;
    }

    .region {
        font-size: 13.5px;
        color: white;
        padding-left: 60px;
    }

    #resources {
        color: white;
        font-size: 26px;
        padding-left: 100px; 
        font-weight: none;
        margin: 0;
        margin-top: 1px;
    }

    .resource-body {
        color: white;
        font-size: 13.5px;
        padding-left: 105px;
    }

    #timelapse {
        color: white;
        font-size: 26px;
        margin: 0;
        padding-left: 100px;
    }

     .timelapse-body {
        color: white;
        font-size: 13.5px;
        padding-left: 105px;
    }

   .dacast {
       float: left;
       width: 47%;
       background-color: black;
       clear: after;
       margin-left: 40px;
       margin-bottom: 20px;
    }

    .slides {
        margin-left: 40px;
        display: inline-block;
        margin-right: 20px;
        width: 47%;
        position: relative;
        z-index: 0;
    }

     .comment-title {
        margin: 0;
        margin-top: 1px;
    }

    .comment-title {
        color: white;
        font-size: 26px;
        font-weight: none;
    }

    #showhide-information {
        padding-left: 105px;
    }

    .comment-display {
        width: 90%;
        height: 417px;
        border: none;
        background-color: white;
        max-height: 417px;
        overflow-y: scroll;
        margin: auto;
    }

    .comment-comment {
        width: 55%;
        height: 40px;
        margin-left: 4%;
        float: left;
        display: inline-block;
        border: none;
        border-radius: 10px 10px 10px 10px;
    }

    .indent {
        padding-left: 15px;
    }

    .comment-button {
        width: 30%;
        margin-right: 4%;
        float: right;
        display: inline-block;
        height: 40px;
        color: black;
        font-weight: none;
        background-color: white;
        padding: 0;
        border: none;
        border-radius: 10px 10px 10px 10px;
    }

    .livestream {
        background-color: #1B9AA1;
    }

    #showhide-resource {
        display: none;
    }

    #showhide-comment {
        display: none;
    }

    #showhide-timelapse {
        display: none;
    }

    .pdf {
        height: 20px;
    }

    .arrowup {
        float: left;
        display: inline-block;
        padding-left: 40px;
    }

    .arrowdown2 {
        float: left;
        display: inline-block;
        padding-left: 40px;
    }

    .arrowdown3 {
        float: left;
        display: inline-block;
        padding-left: 40px;
    }

    .arrowdown4 {
        float: left;
        display: inline-block;
        padding-left: 40px;
    }

    #border-information {
        border-width: 2px 0px 2px 0px;
        border-color: white;
        border-style: solid;
        margin: 0;
        margin-top: 1px;
        height: 26px;
        width: 100%;
        cursor: pointer;
    }

     #border-resources {
        border-width: 2px 0px 2px 0px;
        border-color: white;
        border-style: solid;
        margin: 0;
        margin-top: 1px;
        height: 26px;
        width: 100%;
        cursor: pointer;
    }

     #border-comment {
        border-width: 2px 0px 2px 0px;
        border-color: white;
        border-style: solid;
        margin: 0;
        margin-top: 1px;
        height: 26px;
        width: 100%;
        cursor: pointer;
    }

    #border-timelapse {
        border-width: 2px 0px 2px 0px;
        border-color: white;
        border-style: solid;
        margin: 0;
        margin-top: 1px;
        height: 26px;
        width: 100%;
        cursor: pointer;

    .turn { 
        transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }

As requested here is the HTML:

<body>

    <div class="container">
    <div class="livestream">
    <video id="myvideo" class="dacast" height="540px" controls>
    <source src="https://s3-eu-west-1.amazonaws.com/icevideos/140520+Stalbans+Construction+2025/140520.STALBANS.Contruction2025.HIGH.mp4"></source>
    </video>
    </div>
    <a class="overlay"></a>
    <div class="powerpoint">
    <iframe class="slides" src="https://docs.google.com/presentation/d/1lbTjJ5q4fr1X4rgryWEAmkq-WuWJIoseU7Q1NyqXc44/embed?start=false&loop=false&delayms=3000" frameborder="0" height="540px" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
    </div>
    <div class="sidebar-background">
    <div id="sidebar">
        <div class="information">
        <div id="border-information">
    <img src="http://cpdonline.tv/ice-events/arrowUp.png" class="arrowup" height="26px"><p id="information-text">About this event</p>
    </div>
    <div id="showhide-information" class="panels">
    <span class="region">
        <p class="event-float">Event Date - 05/11/2015</p>
        <p>Event Time: 17:30 - 19:30    <br>


        <p>Speakers: <br>

    <span class="indent"><strong> - Cath Schefer</strong> - UK Managing Director, MWH</span><br>
    <span class="indent"><strong> - Professor David Kennedy</strong> - Deputy Director of the Cardiff School of Engineering and professor of Structural Engineering, Cardiff University</span></br>
    <span class="indent"><strong> - Alun Davies</strong> - Business Executive, Alun Griffiths Contractors Ltd</span></br>
    <span class="indent"><strong> - Dawn Turner</strong> - Head of Pension Fund Management, Environment Agency</span>

    </p>


    <span class="description" name="information">
        <p> 
            Presentations will be given on our four strategic themes of;
<br />
<span class="indent">- Resilience <br /></span>
<span class="indent">- Urbanisation <br /></span>
<span class="indent">- Industry Transformation <br /> </span>
<span class="indent">- Resource Scarcity</span>
            <br />
            </p>

<span class="indent">- London</p>
    </span>
<br /> 

    </div>
            </div>
    <div>
    <div id="border-resources">
    <img src="http://cpdonline.tv/ice-events/arrowDown.png" class="arrowdown2" height="26px"><p id="resources">Resources</p>
    </div>
    <div id="showhide-resource">
    <div class="resource-body" name="resources">
    <p>Additional resources available to go with this lecture:</p>
    <p class="indent"> - <img class="pdf" src="/new.cpd/ice-events/livestream/img/pdf.png"> This is a pdf.pdf</p>
    </div>
    </div>
    </div>

    <div>
    <div id="border-timelapse">
    <img src="http://cpdonline.tv/ice-events/arrowDown.png" class="arrowdown4" height="26px"><p id="timelapse">Timelapse</p>
    </div>
    <div id="showhide-timelapse">
    <div class="timelapse-body" name="timelapse">
    <br>
    <div id="jump">10:00 - This is something</div>
    <br>
    <div id="jump2">20:00 - This is something</div>
    <br>

    </div>
    </div>
    </div>

    <div id="border-comment">

    <div id="comments">
    <p class="comment-title">
    <img src="http://cpdonline.tv/ice-events/arrowDown.png" class="arrowdown3" height="26px"><p id="timelapse">Live Chat</p>
    </p>
    </div>
    </div>
    <div id="showhide-comment">

    <p>ebfgksbgjklsdbghklsg</p>
        </div>
    <br
    </div>

Any suggestions will be highly appreciated!

Answer 1

While adding class, try this

1.First Remove the class that going to be add.

2.And than after Add the animation class.

$(".arrowup").removeClass("turn");
$(".arrowup").addClass("turn");

Answer 2

Is your click functions triggering? If not your global showhide variable will always be one, I'd recommend dropping the global variable and instead calling changePanel() with the switch variable as an argument. A simple way to debug your issue is to add a console.log(showhide) at the beginning of your changePanel() function.

The syntax for addClass and removeClass are correct.

Answer 3

Try with below code. I am sure it will work as per your need:

Modified the HTML a bit:

<img src="http://cpdonline.tv/ice-events/arrowDown.png" class="arrowup turn" height="26px"><p id="information-text">About this event</p>

Added a turn class by default and used same arrowDown.png instead of up arrow.

Also } was missing in second-last CSS style sheet. Have a look at runnable code snippet.

 $("#border-information").click (function() { showHide="one"; changePanel(); $(".turn").removeClass("turn"); $(".arrowup").addClass("turn"); $("#showhide-information").show(500); }); $("#border-resources").click (function() { showHide="two"; changePanel(); $(".turn").removeClass("turn"); $(".arrowdown2").addClass("turn"); $("#showhide-resource").show(500); }); $("#border-comment").click (function() { showHide="three"; changePanel(); $(".turn").removeClass("turn"); $(".arrowdown3").addClass("turn"); $("#showhide-comment").show(500); }); $("#border-timelapse").click (function() { showHide="four"; changePanel(); $(".turn").removeClass("turn"); $(".arrowdown4").addClass("turn"); $("#showhide-timelapse").show(500); }); var showHide="one"; function changePanel(){ switch(showHide){ case "one": //My code console.log("my code 1 is working"); $("#showhide-comment").hide(500); $("#showhide-resource").hide(500); $("#showhide-timelapse").hide(500); break; case "two": //My code console.log("my code 2 is working"); $("#showhide-information").hide(500); $("#showhide-comment").hide(500); $("#showhide-timelapse").hide(500); break; case "three": //My code console.log("my code 3 is working"); $("#showhide-information").hide(500); $("#showhide-resource").hide(500); $("#showhide-timelapse").hide(500); break; case "four": //My code console.log("my code 4 is working"); $("#showhide-information").hide(500); $("#showhide-resource").hide(500); $("#showhide-comment").hide(500); break; default: //My default code } } 

 #wrapper { background-color: #1B9AA1; width: 100%; overflow:hidden; } body { margin: 0; font-family: Arial; height: 100%; width: 100%; } .container { background-color: #1B9AA1; width:100%; } #sidebar { width: 100%; background-color: #1B9AA1; overflow: hidden; height: 70%; } #resources-text { font-size: 26px; font-weight: none; display: inline-block; padding-left: 3px; color: white; } #information-text { font-size: 26px; font-weight: none; padding-left: 36px; color: white; margin: 0; float: left; display: inline-block; } .description { font-size: 13.5px; color: white; display: inline-block; padding-left: 3px; } .region { font-size: 13.5px; color: white; padding-left: 60px; } #resources { color: white; font-size: 26px; padding-left: 100px; font-weight: none; margin: 0; margin-top: 1px; } .resource-body { color: white; font-size: 13.5px; padding-left: 105px; } #timelapse { color: white; font-size: 26px; margin: 0; padding-left: 100px; } .timelapse-body { color: white; font-size: 13.5px; padding-left: 105px; } .dacast { float: left; width: 47%; background-color: black; clear: after; margin-left: 40px; margin-bottom: 20px; } .slides { margin-left: 40px; display: inline-block; margin-right: 20px; width: 47%; position: relative; z-index: 0; } .comment-title { margin: 0; margin-top: 1px; } .comment-title { color: white; font-size: 26px; font-weight: none; } #showhide-information { padding-left: 105px; } .comment-display { width: 90%; height: 417px; border: none; background-color: white; max-height: 417px; overflow-y: scroll; margin: auto; } .comment-comment { width: 55%; height: 40px; margin-left: 4%; float: left; display: inline-block; border: none; border-radius: 10px 10px 10px 10px; } .indent { padding-left: 15px; } .comment-button { width: 30%; margin-right: 4%; float: right; display: inline-block; height: 40px; color: black; font-weight: none; background-color: white; padding: 0; border: none; border-radius: 10px 10px 10px 10px; } .livestream { background-color: #1B9AA1; } #showhide-resource { display: none; } #showhide-comment { display: none; } #showhide-timelapse { display: none; } .pdf { height: 20px; } .arrowup { float: left; display: inline-block; padding-left: 40px; } .arrowdown2 { float: left; display: inline-block; padding-left: 40px; } .arrowdown3 { float: left; display: inline-block; padding-left: 40px; } .arrowdown4 { float: left; display: inline-block; padding-left: 40px; } #border-information { border-width: 2px 0px 2px 0px; border-color: white; border-style: solid; margin: 0; margin-top: 1px; height: 26px; width: 100%; cursor: pointer; } #border-resources { border-width: 2px 0px 2px 0px; border-color: white; border-style: solid; margin: 0; margin-top: 1px; height: 26px; width: 100%; cursor: pointer; } #border-comment { border-width: 2px 0px 2px 0px; border-color: white; border-style: solid; margin: 0; margin-top: 1px; height: 26px; width: 100%; cursor: pointer; } #border-timelapse { border-width: 2px 0px 2px 0px; border-color: white; border-style: solid; margin: 0; margin-top: 1px; height: 26px; width: 100%; cursor: pointer; } .turn { transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="container"> <div class="livestream"> <video id="myvideo" class="dacast" height="540px" controls> <source src="https://s3-eu-west-1.amazonaws.com/icevideos/140520+Stalbans+Construction+2025/140520.STALBANS.Contruction2025.HIGH.mp4"></source> </video> </div> <a class="overlay"></a> <div class="powerpoint"> <iframe class="slides" src="https://docs.google.com/presentation/d/1lbTjJ5q4fr1X4rgryWEAmkq-WuWJIoseU7Q1NyqXc44/embed?start=false&loop=false&delayms=3000" frameborder="0" height="540px" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe> </div> <div class="sidebar-background"> <div id="sidebar"> <div class="information"> <div id="border-information"> <img src="http://cpdonline.tv/ice-events/arrowDown.png" class="arrowup turn" height="26px"><p id="information-text">About this event</p> </div> <div id="showhide-information" class="panels"> <span class="region"> <p class="event-float">Event Date - 05/11/2015</p> <p>Event Time: 17:30 - 19:30 <br> <p>Speakers: <br> <span class="indent"><strong> - Cath Schefer</strong> - UK Managing Director, MWH</span><br> <span class="indent"><strong> - Professor David Kennedy</strong> - Deputy Director of the Cardiff School of Engineering and professor of Structural Engineering, Cardiff University</span></br> <span class="indent"><strong> - Alun Davies</strong> - Business Executive, Alun Griffiths Contractors Ltd</span></br> <span class="indent"><strong> - Dawn Turner</strong> - Head of Pension Fund Management, Environment Agency</span> </p> <span class="description" name="information"> <p> Presentations will be given on our four strategic themes of; <br /> <span class="indent">- Resilience <br /></span> <span class="indent">- Urbanisation <br /></span> <span class="indent">- Industry Transformation <br /> </span> <span class="indent">- Resource Scarcity</span> <br /> </p> <span class="indent">- London</p> </span> <br /> </div> </div> <div> <div id="border-resources"> <img src="http://cpdonline.tv/ice-events/arrowDown.png" class="arrowdown2" height="26px"><p id="resources">Resources</p> </div> <div id="showhide-resource"> <div class="resource-body" name="resources"> <p>Additional resources available to go with this lecture:</p> <p class="indent"> - <img class="pdf" src="/new.cpd/ice-events/livestream/img/pdf.png"> This is a pdf.pdf</p> </div> </div> </div> <div> <div id="border-timelapse"> <img src="http://cpdonline.tv/ice-events/arrowDown.png" class="arrowdown4" height="26px"><p id="timelapse">Timelapse</p> </div> <div id="showhide-timelapse"> <div class="timelapse-body" name="timelapse"> <br> <div id="jump">10:00 - This is something</div> <br> <div id="jump2">20:00 - This is something</div> <br> </div> </div> </div> <div id="border-comment"> <div id="comments"> <p class="comment-title"> <img src="http://cpdonline.tv/ice-events/arrowDown.png" class="arrowdown3" height="26px"><p id="timelapse">Live Chat</p> </p> </div> </div> <div id="showhide-comment"> <p>ebfgksbgjklsdbghklsg</p> </div> <br </div>