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!
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.
Let's say I just add a simple little image: var image = scene.add.image(200,200,'simple-little-image.png'); Then later, I want to destory it. Not just hide it, but remove all of it's data and ...
Let's say I just add a simple little image: var image = scene.add.image(200,200,'simple-little-image.png'); Then later, I want to destory it. Not just hide it, but remove all of it's data and ...
I have multiple select elements that I need to get the same options using Javascript. They all have the same class. This code works with an id but not with class. I tried changing getElementById to ...
I have multiple select elements that I need to get the same options using Javascript. They all have the same class. This code works with an id but not with class. I tried changing getElementById to ...
I would like to use bluebird-q (https://github.com/petkaantonov/bluebird-q) as shim for Q in browser JS application. This is not possible out of the box as the bluebird-q library code starts with 2 ...
I would like to use bluebird-q (https://github.com/petkaantonov/bluebird-q) as shim for Q in browser JS application. This is not possible out of the box as the bluebird-q library code starts with 2 ...
I have an angular app that is rendering a table of employee details. There is a datapoint called Optional that determines if it should show up by default. My goal here is to hide these rows by ...
I have an angular app that is rendering a table of employee details. There is a datapoint called Optional that determines if it should show up by default. My goal here is to hide these rows by ...