JQuery add/removeClass не работает

Question

Я пытаюсь повернуть стрелку, добавив класс css в инструкцию jquery. Это используется на вкладках show/hide, которые позволят мне показать, какой из них открыт на основе стрелок.

У меня было это работает на предыдущей странице, когда у меня было 3 вкладки, но я добавил четвертую вкладку на новую страницу, и теперь она не будет работать.

Он печатает мой console.log и не возвращает никаких ошибок, поэтому я пытаюсь понять, что я делаю неправильно.

Это 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> 

Это CSS класс, который им с помощью:

 #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); 
    } 

В соответствии с просьбой вот 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> 

Любые предложения будут высоко оценили!

Answer 1

Пробуйте использовать код ниже. Я уверен, что он будет работать в соответствии с вашими потребностями:

Модифицированный HTML-бит:

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

Добавлен turn класс по умолчанию и используется та же arrowDown.png вместо стрелка вверх.

Также } отсутствовал во второй таблице стилей CSS. Посмотрите на фрагмент кода исполняемого кода.

$("#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>

Answer 2

При добавлении класса, попробуйте это

1.First Удалить класс, который собирается быть добавить.

2.And than after Добавить класс анимации.

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

Answer 3

Являются ли ваши функции щелчка нажатием кнопки? Если бы не ваша глобальная переменная showhide всегда была одной, я бы рекомендовал удалить глобальную переменную и вместо этого вызвать changePanel() с переменной switch в качестве аргумента. Простым способом отладки вашей проблемы является добавление console.log (showhide) в начале вашей функции changePanel().

Синтаксис addClass и removeClass правильный.