Toggle second class once first class is completed?

Toggle second class once first class is completed? - javascript

To be precise I have:
$('.vidsh_sub_btn').on('click', function() {
$('.vidsub_rld_c').toggleClass('goright');
// toggle godown class while goright class is completed moving left to 75px
$('.vidsub_rld_c').toggleClass('godown');
$('.vidsub_rld_c').toggleClass('goleft');
$('.vidsub_rld_c').toggleClass('gotop');
});
.vidsubbtn_c {
position: absolute;
height: 34px;
width: 84px;
background: black;
overflow: hidden;
}
.vidsub_rld_c {
position: absolute;
height: 10px;
width: 10px;
background: white;
transition: all 700ms;
left: 0px;
z-index: 50;
}
.vidsub_rld_c.goright {
left: 75px;
}
.vidsub_rld_c.godown {
top: 25px;
}
.vidsub_rld_c.goleft {
left: 0px;
}
.vidsub_rld_c.gotop {
top: 0px;
}
.vidsh_sub_btn {
position: absolute;
z-index: 100;
margin-top: 2px;
margin-left: 2px;
height: 30px;
width: 80px;
overflow: hidden;
background: #8495a4;
-moz-border-radius: 2px;
border-radius: 2px;
font-family: Arial;
color: #ffffff;
font-size: 14px;
text-decoration: none;
border: 0;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vidsubbtn_c">
<div class="vidsub_rld_c"></div>
<input type="button" class="vidsh_sub_btn" value="Add" />
</div>
What I basically want is that vidsub_rld_c should complete a circle of the button which basically would look like a loading object.
But the way I have implemented in my script is that when the click event listener is called it executes all of the toggle classes at the same time which makes the loader looking like its not moving.
JSFiddle

You could toggle one class, and use CSS animations to create the effect.
fiddle
A basic example:
$('.vidsh_sub_btn').on('click', function() {
$('.vidsub_rld_c').toggleClass('animate');
});
.vidsubbtn_c {
position: absolute;
height: 34px;
width: 84px;
background: black;
overflow: hidden;
}
.vidsub_rld_c {
position: absolute;
height: 10px;
width: 10px;
background: white;
transition: all 700ms;
left: 0px;
z-index: 50;
}
.vidsub_rld_c.animate {
animation: moveAround 1s infinite;
}
#keyframes moveAround {
0% {
left: 0;
top: 0;
}
25% {
left: 75px;
top: 0;
}
50% {
left: 75px;
top: 25px;
}
75% {
left: 0;
top: 25px;
}
100% {
left: 0;
top: 0;
}
}
.vidsh_sub_btn {
position: absolute;
z-index: 100;
margin-top: 2px;
margin-left: 2px;
height: 30px;
width: 80px;
overflow: hidden;
background: #8495a4;
-moz-border-radius: 2px;
border-radius: 2px;
font-family: Arial;
color: #ffffff;
font-size: 14px;
text-decoration: none;
border: 0;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vidsubbtn_c">
<div class="vidsub_rld_c"></div>
<input type="button" class="vidsh_sub_btn" value="Add" />
</div>

You could use jQuery UI so you can chain your class toggles
like:
$('.vidsh_sub_btn').on('click', function() {
$('.vidsub_rld_c').toggleClass('goright', 2000).promise().done(function(){
$('.vidsub_rld_c').toggleClass('godown', 2000);
});
});
https://codepen.io/anon/pen/QajaPm

Updated fiddle.
You could use setInterval to complete the circle by toggling the classes continuously after every 'x' time, like :
$('.vidsh_sub_btn').on('click', function() {
setInterval(function() {
$('.vidsub_rld_c').toggleClass('godown');
$('.vidsub_rld_c').toggleClass('goright');
}, 700);
});
Code:
$('.vidsh_sub_btn').on('click', function() {
setInterval(function() {
$('.vidsub_rld_c').toggleClass('godown');
$('.vidsub_rld_c').toggleClass('goright');
}, 700);
});
.vidsubbtn_c {
position: absolute;
height: 34px;
width: 84px;
background: black;
overflow: hidden;
}
.vidsub_rld_c {
position: absolute;
height: 10px;
width: 10px;
background: white;
transition: all 700ms;
left: 0px;
z-index: 50;
}
.vidsub_rld_c.goright {
left: 75px;
}
.vidsub_rld_c.godown {
top: 25px;
}
.vidsh_sub_btn {
position: absolute;
z-index: 100;
margin-top: 2px;
margin-left: 2px;
height: 30px;
width: 80px;
overflow: hidden;
background: #8495a4;
-moz-border-radius: 2px;
border-radius: 2px;
font-family: Arial;
color: #ffffff;
font-size: 14px;
text-decoration: none;
border: 0;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vidsubbtn_c">
<div class="vidsub_rld_c"></div>
<input type="button" class="vidsh_sub_btn" value="Add" />
</div>

Related

is there a way for me to make a custom scrollbar appear on the left instead of the right?

I have a div for a menu which has overflow-x set to hidden. This makes the scrollbar appear when content overflows out of the div. currently the scrollbar is only on the right side, but I want to move it over to the left. Is this possible?
body::-webkit-scrollbar {
width: 0px;
}
body::-webkit-scrollbar-track {
background: transparent;
}
body::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 20px;
border: 3px solid transparent;
}
.CONT {
position: relative;
top: -25px;
left: 20px;
}
.CONT_2 {
position: relative;
top: 25px;
left: 20px;
height: 100px;
}
#words {
top: -2px;
left: 25px;
position: relative;
}
#words2 {
top: 2px;
left: 25px;
position: relative;
}
.DOC_CONTAINER {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 16px;
left: -4px;
color: #0088FF;
user-select: none;
cursor: pointer;
width: 280px;
z-index: 1;
overflow: hidden;
height: 46px;
}
#HTML_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 75px;
left: 15px;
}
#CSS_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 125px;
left: 15px;
}
#JAVA_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 175px;
left: 15px;
}
#JQUERY_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 225px;
left: 15px;
}
#LUA_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 275px;
left: 15px;
}
#ICON_1 {
position: absolute;
top: 0px;
left: 200px;
}
#icon2 {
position: absolute;
top: 2px;
left: 180px;
}
#ICON_2 {
position: absolute;
top: 4px;
left: 118px;
}
#icon3 {
position: absolute;
top: 2px;
left: 100px;
}
div.DOC_CONTAINER.expanded {
width: 390px;
height: 395px;
top: 16px;
left: -4px;
position: relative;
animation-name: Expand1;
animation-duration: 0.2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
div.WEBVAR_CONTAINER.EXPAND {
width: 390px;
height: 395px;
top: 35px;
left: -4px;
position: relative;
animation-name: Expand2;
animation-duration: 0.2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes Expand2 {
0% {
height: 70px;
}
100% {
height: 280px;
}
}
#keyframes Expand1 {
0% {
height: 70px;
}
100% {
height: 421px;
}
}
#SEP2 {
width: 390px;
height: 1px;
background-color: #2e2e2e;
position: absolute;
top: 65px;
left: -27px;
}
#SEP3 {
width: 390px;
height: 1px;
background-color: #2e2e2e;
position: relative;
top: 420px;
left: -27px;
}
#SEP4 {
width: 370px;
height: 1px;
background-color: #2e2e2e;
position: absolute;
top: 135px;
left: 0px;
}
#SEP5 {
width: 390px;
height: 1px;
background-color: #2e2e2e;
position: relative;
top: 420px;
left: -27px;
}
#CREDITS {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 30px;
left: 20px;
}
#ABOUT {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: absolute;
top: 100px;
left: 20px;
}
#COPY_RIGHT {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: absolute;
top: 170px;
left: 20px;
}
div.scroll {
margin: 4px, 4px;
padding: 4px;
background-color: #1f1f1f;
width: 350px;
height: 85vh;
top: 127px;
left: -5px;
position: absolute;
overflow-x: hidden;
text-align: justify;
border-bottom-right-radius: 20px;
}
.scroll::-webkit-scrollbar {
width: 5px;
color: #0088FF;
height: 25px;
}
.scroll::-webkit-scrollbar-track {
background: #2e2e2e;
}
.scroll::-webkit-scrollbar-thumb {
background: #0088FF;
}
.scroll::-webkit-scrollbar-thumb:hover {
background: #0088FF;
}
.flip {
transform: rotateX(180deg);
transition-duration: 0.2s;
}
.flip2 {
transform: rotateX(180deg);
transition-duration: 0.2s;
}
#MENU_LABEL {
color: #2E2E2E;
top: 11px;
left: 45vw;
position: absolute;
font-size: 20px;
font-family: verdana;
}
body {
height: 200vh;
background-color: #2E2E2E;
}
a {
color: #0088ff;
text-decoration: none;
}
a:hover {
color: #0056A3;
text-decoration: none;
}
.WEBVAR_CONTAINER {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 35px;
left: -4px;
color: #0088FF;
user-select: none;
cursor: pointer;
width: 390px;
z-index: 1;
overflow: hidden;
height: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll">
<div class="DOC_CONTAINER">
<div id="SEP3"></div>
<div id="words">Documentation</div>
<div id="ICON_1"><i class="fa-solid fa-angle-down"></i></div>
<script>
$(document).ready(function() {
$('#words').click(function(event) {
event.preventDefault();
$(".DOC_CONTAINER").toggleClass('expanded');
$("#ICON_1").toggleClass("flip");
});
});
</script>
<div class="CONT">
<div id="HTML_DOC">HTML</div>
<div id="CSS_DOC">CSS</div>
<div id="JAVA_DOC">Javascript</div>
<div id="JQUERY_DOC">Jquery</div>
<div id="LUA_DOC">Lua</div>
</div>
</div>
<div id="SEP2"></div>
<div class="WEBVAR_CONTAINER">
<div id="SEP5"></div>
<div id="words2">WebVar</div>
<div id="ICON_2"><i class="fa-solid fa-angle-down"></i></div>
<script>
$(document).ready(function() {
$('#words2').click(function(event) {
event.preventDefault();
$(".WEBVAR_CONTAINER").toggleClass('EXPAND');
$("#ICON_2").toggleClass("flip2");
});
});
</script>
<div class="CONT_2">
<div id="CREDITS">Credits</div>
<div id="ABOUT">About</div>
<div id="COPY_RIGHT">Copyright</div>
</div>
</div>
<div id="SEP4"></div>
</div>
I tried setting float but that didn't work. If there is a solution please enlighten me.

Easy way to move scrollbar to the left side:
.scroll-at-left {
width: 200px;
height: 95vh;
overflow-y: scroll;
transform: rotateY(180deg);
}
.scroll-at-left>section {
padding: 0 1em;
transform: rotateY(180deg);
}
<div class="scroll-at-left">
<section>
<p>I have a div for a menu which has overflow-x set to hidden. This makes the scrollbar appear when content overflows out of the div. currently the scrollbar is only on the left side, but I want to move it over to the right. Is this possible?</p>
<p>I have a div for a menu which has overflow-x set to hidden. This makes the scrollbar appear when content overflows out of the div. currently the scrollbar is only on the left side, but I want to move it over to the right. Is this possible?</p>
</section>
</div>

You can set the div to right text align and the text to left text align.
.scroll-at-left {
width: 200px;
height: 95vh;
overflow-y: scroll;
direction: rtl;
}
.scroll-at-left section {
padding: 0 1em;
direction: ltr;
}
<div class="scroll-at-left">
<section>
<p>The scroll bar should be on the left side now when you scroll. The section is set to left text align while the div is set to right text align. This is just filler text. It has no purpose other than to fill. This is even more filler text. Why are you reading this</p>
</section>
</div>

CSS / HTML layering problems

I have made a toggle-switch in HTML with a label and styled in css. When the toggle is on its working as intended, but when its off the label overlaps with the switch.
The toggle container wont layer on top of the label element. I have tried with z-index and different positions, but to no avail.
Built with React, and the CSS is in the pre-made App.css file.
React // HTML // Javascript
const toggleClasses = classNames('wrg-toggle', {
'wrg-toggle--checked': toggle,
'wrg-toggle--disabled': disabled
}, className);
return(
<div
onMouseOver={() => setHoveredElement(5)}
onMouseLeave={() => setHoveredElement(null)}
>
<div onClick={triggerToggle} className={toggleClasses}>
<div className="wrg-toggle-container">
<label htmlFor="grid">Enable grid</label>
<div className="wrg-toggle-check">
<span>{ getIcon('checked')}</span>
</div>
<div className="wrg-toggle-uncheck">
<span>{ getIcon('unchecked')}</span>
</div>
</div>
<div className="wrg-toggle-circle"></div>
<input type="checkbox" aria-label="Toggle Button" className="wrg-toggle-input" />
</div>
</div>
);
};
CSS code
.wrg-toggle {
touch-action: pan-x;
display: inline-block;
position: relative;
cursor: pointer;
background-color: transparent;
border: 0;
padding: 0;
margin-left: 5em;
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
.wrg-toggle-input {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.wrg-toggle-check, .wrg-toggle-uncheck {
position: absolute;
width: 10px;
height: 10px;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
opacity: 0;
}
.wrg-toggle-check {
z-index: 3;
left: 8px;
position: absolute;
opacity: 0;
}
.wrg-toggle-uncheck {
opacity: 1;
right: 10px;
top: 2px;
position:inherit;
z-index: 50;
opacity: 1;
background-color: white;
}
label {
float: right;
right: 0.5em;
width: 8em;
margin-left: 0px;
text-align: center;
margin-right: 20px;
background-color: #8E9092;
border-radius: 30px;
border-top-right-radius: 0;
border-bottom-right-radius: 0 ;
height: 24px;
border: solid 1px;
top: -1.3px;
position: relative;
z-index: 0;
}
.wrg-toggle-uncheck span,
.wrg-toggle-check span {
align-items: center;
display: flex;
height: 10px;
justify-content: center;
position: relative;
width: 10px;
}
.wrg-toggle-container{
width: 50px;
height: 24px;
padding: 0;
left: 10em;
border-radius: 30px;
background-color: #f5f6f8;
transition: all .2s ease;
border: solid 1px;
z-index: 100;
}
.wrg-toggle-container .wrg-toggle-check{
width: 50px;
height: 24px;
left: -0.3px;
border-radius: 30px;
background-color:#61dafb;
border: solid 1px;
top: 0px;
}
.wrg-toggle-circle{
transition: all .5s cubic-bezier(.23,1,.32,1) 0ms;
position: absolute;
top: 3px;
left: 1px;
width: 22px;
height: 21px;
border: 1px solid #4d4d4d;
border-radius: 50%;
background-color: #fafafa;
box-sizing: border-box;
z-index: 30;
}
.wrg-toggle--checked .wrg-toggle-check{
opacity: 1;
position:relative;
border-top: 2px;
border-left: -3px;
}
.wrg-toggle--checked .wrg-toggle-uncheck {
opacity: 0;
border: 0;
}
.wrg-toggle--checked .wrg-toggle-circle {
left: 27px;
}
.wrg-toggle--checked .wrg-toggle-circle:after {
content: "✔";
color: green;
}

Solved!
added a
.wrg-toggle-container .wrg-toggle-uncheck {
position: absolute;
z-index: 1;
}

CSS curtains, it rimains opened when the site is runned up

As u can see, my curtain is open every time u first run up the site. The curtain opens when u click Account and closes when u click it again. I need to have the curtain closes and open only when someone clicks Account. Then, I need also that, when u click Account, the world became of the gradient of the background and the background himself get white.
function open_ac_c() {
document.getElementById("ac_c").style.height = "100%";
document.querySelector('button.account_open_button').style.display = "none"
document.querySelector('button.account_close_button').style.display = "block"
}
function close_ac_c() {
document.getElementById("ac_c").style.height = "0%";
document.querySelector('button.account_open_button').style.display = "block"
document.querySelector('button.account_close_button').style.display = "none"
}
body {
background-color: #6f0da8;
margin: 0;
}
.topnav {
background: linear-gradient(90deg, #2c8a86, #1dada7, #04d6ce, #00fff6);
padding: 30px;
float: center;
}
.home {
background-color: transparent;
float: center;
position: absolute;
left: 0px;
top: 0px;
padding: 18.5px;
color: white;
font-size: 20px;
}
.home:hover{
background-color: #048b59;
}
.account{
background-color: transparent;
float: center;
position: absolute;
left: 86px;
top: 0px;
padding: 18.5px;
color: white;
font-size: 20px;
}
body {
font-family: 'Lato', sans-serif;
}
.ac_curtain {
position: fixed;
top: 1;
left: 100px;
background-color: transparent;
transition: 1s;
overflow: hidden;
}
.ac_curtain a {
padding: 8px;
text-decoration: none;
font-size: 20px;
color: #ffffff;
display: block;
}
.account_open_button {
position: absolute;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
position: absolute;
left: 85px;
top: 1px;
padding: 28px 53px;;
}
.account_close_button {
position: absolute;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
position: absolute;
left: 85px;
top: 1px;
padding: 30px 53px;;
}
<div class="topnav">
<dive class="home">Home</dive>
<dive class="account">Account</div>
</div>
<div id="ac_c" class="ac_curtain">
<div class="overlay-content">
Log in
Log out
Dashboard
Settings
</div>
</div>
<button onclick="open_ac_c()" class="account_open_button"></button>
<button onclick="close_ac_c()" class="account_close_button"></button>

On initial load, as the height of ac_curtain is not defined, hence it has a default height and thus it gets displayed on the initial load. Please add height: 0 in the ac_curtain class.
function open_ac_c() {
document.getElementById("ac_c").style.height = "100%";
document.querySelector('button.account_open_button').style.display = "none"
document.querySelector('button.account_close_button').style.display = "block"
}
function close_ac_c() {
document.getElementById("ac_c").style.height = "0%";
document.querySelector('button.account_open_button').style.display = "block"
document.querySelector('button.account_close_button').style.display = "none"
}
body {
background-color: #6f0da8;
margin: 0;
}
.topnav {
background: linear-gradient(90deg, #2c8a86, #1dada7, #04d6ce, #00fff6);
padding: 30px;
float: center;
}
.home {
background-color: transparent;
float: center;
position: absolute;
left: 0px;
top: 0px;
padding: 18.5px;
color: white;
font-size: 20px;
}
.home:hover{
background-color: #048b59;
}
.account{
background-color: transparent;
float: center;
position: absolute;
left: 86px;
top: 0px;
padding: 18.5px;
color: white;
font-size: 20px;
}
body {
font-family: 'Lato', sans-serif;
}
.ac_curtain {
position: fixed;
top: 1;
left: 100px;
background-color: transparent;
transition: 1s;
overflow: hidden;
height: 0;
}
.ac_curtain a {
padding: 8px;
text-decoration: none;
font-size: 20px;
color: #ffffff;
display: block;
}
.account_open_button {
position: absolute;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
position: absolute;
left: 85px;
top: 1px;
padding: 28px 53px;;
}
.account_close_button {
position: absolute;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
position: absolute;
left: 85px;
top: 1px;
padding: 30px 53px;;
}
<div class="topnav">
<div class="home">Home</div>
<div class="account">Account</div>
</div>
<div id="ac_c" class="ac_curtain">
<div class="overlay-content">
Log in
Log out
Dashboard
Settings
</div>
</div>
<button onclick="close_ac_c()" class="account_close_button"></button>
<button onclick="open_ac_c()" class="account_open_button"></button>

How to swap inside DIV data when up and down button press using js and jquery?

I have working code.in which I have one timeline. and each event inside timeline is connected to each other.
Here is one delete button that removes the particular data. and there is another one which copies the data.
But I want when I click on up button and down button.
Like when I click on up button. it should swap the third element data to second data and second data to third data.
and same working on down button.
Here is working example code please see it.
And help will be appreciated.
$(document).ready(function() {
$("#edit_button").click(function() {
$("#slide").css("display", "none");
})
$("#slide section").attr("contenteditable", "true");
var i = 1;
$("section").each(function() {
$(this).attr("id", i);
$(this).append("<div class='deleteStyle'>" + "&#10006" + "</div>");
$(this).append("<div class='deleteStyle2'>" + "&#10010" + "</div>");
$(this).append("<div class='deleteStyle3'>" + "&#x2191" + "</div>");
$(this).append("<div class='deleteStyle4'>" + "h" + "</div>");
i++;
});
$("#slide").on('click', '.deleteStyle', function() {
$(this).parent("section").remove()
});
$("#slide").on('click', '.deleteStyle2', function() {
var ele = $(this).closest("section").clone(true);
$(this).closest("section").after(ele);
});
$("#slide").on('click', '.deleteStyle4', function() {
var currentData = $(this).parent().next().html();
var currentString = "<section>" + currentData + "</section>";
console.log(currentString)
var abc1 = $(this).next().replaceWith(currentString);
console.log(abc1)
});
$("#slide").on('click', '.deleteStyle3', function() {
var previousData = $(this).parent().prev().html();
var previousString = "<section>" + previousData + "</section>";
console.log(previousString)
var abc = $(this).prev().replaceWith(previousString);
console.log(abc)
// $(this).parent().remove().html();
// $(this).closest("section").after(previousString);
// $(this).closest("section").before(currentString);
// console.log(currentData);
// console.log(previousData);
});
});
div[type="timeline/slideshow"]>section,
div[type="timeline"]>section {
margin: auto;
width: 500px;
z-index: 100;
opacity: 1;
border-left: 4px solid #00BCD4;
border-top: 1px solid grey;
min-height: 130px;
background-color: #b3e5fc2b;
border-radius: 4px;
margin-bottom: 55px;
position: relative;
top: 50px;
box-shadow: rgb(136, 136, 136) 3px 3px 1px;
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
}
/*div[type="timeline/slideshow"] > section:hover , div[type="timeline"] > section:hover {
opacity:1;
}
*/
div[type="timeline/slideshow"]::before,
div[type="timeline"]::before {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: .2rem;
background: white;
height: 55px;
}
div[type="timeline/slideshow"]>section::after,
div[type="timeline"]>section::after {
content: "";
position: absolute;
left: 50%;
bottom: -56px;
width: .2rem;
background: grey;
height: 54px;
}
div[type="timeline/slideshow"]>section>header,
div[type="timeline"]>section>header {
font-weight: 600;
color: cadetblue;
transform: translate(16px, 23px);
font-size: 30px;
font-family: arial;
padding: 3px;
position: relative;
word-wrap: break-word;
line-height: 31px;
}
div[type="timeline/slideshow"]>section>article,
div[type="timeline"]>section>article {
transform: translate(12px, 14px);
color: black;
font-size: 20px;
font-family: arial;
position: relative;
padding: 9px;
word-wrap: break-word;
line-height: 31px;
}
div[type="timeline"]>section:last-of-type::after {
display: none;
}
div[type="slideshow"] {
height: 471px;
position: relative;
top: 100px;
}
div[type="slideshow"]>section:not(.hideClass) {
margin: auto;
width: 900px;
max-height: 265px;
z-index: 100;
border-top: 1px solid grey;
border-left: 4px solid #00BCD4;
min-height: 250px;
background-color: #b3e5fc2b;
border-radius: 4px;
margin-bottom: 55px;
position: absolute;
overflow-x: hidden;
top: 21.4%;
left: 168px;
box-shadow: rgb(136, 136, 136) 3px 3px 1px;
}
div[type="slideshow"]>section:not(.hideClass)>header {
font-weight: 600;
color: cadetblue;
transform: translate(93px, 32px);
font-size: 34px;
font-family: arial;
position: relative;
word-wrap: break-word;
}
div[type="slideshow"]>section:not(.hideClass)>article {
transform: translate(87px, 39px);
max-width: 800px;
color: black;
font-size: 22px;
font-family: arial;
position: relative;
padding: 10px;
word-wrap: break-word;
}
/*.activeClass{
opacity: 1 !important;
}
*/
.hideClass {
opacity: 0;
min-height: 0 !important;
margin: 0 !important;
}
.hideClass header,
.hideClass article {
display: none;
}
#keyframes fadein {
0% {
opacity: 0
}
50% {
opacity: 0.5
}
100% {
opacity: 1
}
}
div[type="timeline"] br {
display: none;
}
.progressClass {
height: 4px;
display: none;
top: 46px;
left: 0px;
width: 100%;
position: fixed;
margin-left: -1px;
margin-top: -1px;
}
.color_arrow {
position: relative;
top: 228px;
color: #085153;
left: 93px;
}
.color_arrows {
position: relative;
top: 228px;
color: #085153;
left: 94% !important;
}
#media only screen and (max-width: 992px) {
div[type="timeline/slideshow"]>section,
div[type="timeline"]>section {
width: 650px;
}
.color_arrow {
left: -18px;
}
div[type="slideshow"]>section:not(.hideClass) {
width: 640px;
left: 14px;
}
.color_arrows {
left: 99% !important;
}
}
#media only screen and (max-width: 992px) {
div[type="slideshow"]>section {
width: 650px;
}
div[type="slideshow"]>section:not(.hideClass) {
width: 640px;
left: 18px;
}
}
#media only screen and (min-width: 1201px) and (max-width: 1299px) {
div[type="slideshow"]>section:not(.hideClass) {
width: 845px;
left: 154px;
}
}
#media only screen and (min-width: 992px) and (max-width: 1200px) {
div[type="slideshow"]>section:not(.hideClass) {
width: 698px;
left: 136px;
}
}
#slide {
display: block;
}
.edit_timeline {
margin: 4%;
}
.containers {
font-weight: 800;
font-style: arial;
font-size: 24px;
width: 500px;
height: 100px;
margin: 2%;
border: 1px solid grey;
}
#modal_timeline {
margin-left: 25px;
}
.deleteStyle {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 10px;
padding-top: 5px;
float: right;
right: 12px;
bottom: 80px;
color: white;
}
.deleteStyle2 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 10px;
padding-top: 5px;
float: right;
right: 17px;
bottom: 80px;
color: white;
}
.deleteStyle3 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 12px;
padding-top: 5px;
float: right;
right: 20px;
bottom: 80px;
color: white;
}
.deleteStyle4 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 12px;
padding-top: 5px;
float: right;
right: 24px;
bottom: 80px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containers">Click on Edit Timeline button to see the Timeline.</div>
<div class="demo">
<div type="timeline" id="slide">
<section>
<header>Title One</header>
<article>Content one</article>
</section>
<section>
<header>Title Two</header>
<article>Content one</article>
</section>
<section>
<header>Title Three</header>
<article>Content one</article>
</section>
<section>
<header>Title Four</header>
<article>Content one</article>
</section>
</div>
</div>
<button type="button" class="btn btn-success" id="modal_timeline" data-toggle="modal" data-target="#myModal">Edit Timeline</button>

Please refer the jsfiddle for your referance. Here on mouse down and up key pressed item will be selected.
https://jsfiddle.net/webdev_sudhi/avudyb2t/3/
$(document).ready(function() {
$("#edit_button").click(function() {
$("#slide").css("display", "none");
})
$("#slide section").attr("contenteditable", "true");
var i = 1;
$("section").each(function() {
$(this).attr("id", i);
$(this).append("<div class='deleteStyle'>" + "&#10006" + "</div>");
$(this).append("<div class='deleteStyle2'>" + "&#10010" + "</div>");
$(this).append("<div class='deleteStyle3'>" + "&#x2191" + "</div>");
$(this).append("<div class='deleteStyle4'>" + "h" + "</div>");
i++;
});
$("#slide").on('click', '.deleteStyle', function() {
$(this).parent("section").remove()
});
$("#slide").on('click', '.deleteStyle2', function() {
var ele = $(this).closest("section").clone(true);
$(this).closest("section").after(ele);
});
$("#slide").on('click', '.deleteStyle4', function() {
var currentData = $(this).parent().next().html();
var currentString = "<section>" + currentData + "</section>";
console.log(currentString)
var abc1 = $(this).next().replaceWith(currentString);
console.log(abc1)
});
$("#slide").on('click', '.deleteStyle3', function() {
//added new code here
var previousData = $(this).parent().prev();
$preTitle = $(previousData).find('header').text();
$preContent = $(previousData).find('article').text();
$(this).parent().find('header').text($preTitle);
$(this).parent().find('article').text($preContent);
//end here
var previousString = "<section>" + previousData + "</section>";
console.log(previousString)
var abc = $(this).prev().replaceWith(previousString);
console.log(abc)
// $(this).parent().remove().html();
// $(this).closest("section").after(previousString);
// $(this).closest("section").before(currentString);
// console.log(currentData);
// console.log(previousData);
});
});
div[type="timeline/slideshow"]>section,
div[type="timeline"]>section {
margin: auto;
width: 500px;
z-index: 100;
opacity: 1;
border-left: 4px solid #00BCD4;
border-top: 1px solid grey;
min-height: 130px;
background-color: #b3e5fc2b;
border-radius: 4px;
margin-bottom: 55px;
position: relative;
top: 50px;
box-shadow: rgb(136, 136, 136) 3px 3px 1px;
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
}
/*div[type="timeline/slideshow"] > section:hover , div[type="timeline"] > section:hover {
opacity:1;
}
*/
div[type="timeline/slideshow"]::before,
div[type="timeline"]::before {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: .2rem;
background: white;
height: 55px;
}
div[type="timeline/slideshow"]>section::after,
div[type="timeline"]>section::after {
content: "";
position: absolute;
left: 50%;
bottom: -56px;
width: .2rem;
background: grey;
height: 54px;
}
div[type="timeline/slideshow"]>section>header,
div[type="timeline"]>section>header {
font-weight: 600;
color: cadetblue;
transform: translate(16px, 23px);
font-size: 30px;
font-family: arial;
padding: 3px;
position: relative;
word-wrap: break-word;
line-height: 31px;
}
div[type="timeline/slideshow"]>section>article,
div[type="timeline"]>section>article {
transform: translate(12px, 14px);
color: black;
font-size: 20px;
font-family: arial;
position: relative;
padding: 9px;
word-wrap: break-word;
line-height: 31px;
}
div[type="timeline"]>section:last-of-type::after {
display: none;
}
div[type="slideshow"] {
height: 471px;
position: relative;
top: 100px;
}
div[type="slideshow"]>section:not(.hideClass) {
margin: auto;
width: 900px;
max-height: 265px;
z-index: 100;
border-top: 1px solid grey;
border-left: 4px solid #00BCD4;
min-height: 250px;
background-color: #b3e5fc2b;
border-radius: 4px;
margin-bottom: 55px;
position: absolute;
overflow-x: hidden;
top: 21.4%;
left: 168px;
box-shadow: rgb(136, 136, 136) 3px 3px 1px;
}
div[type="slideshow"]>section:not(.hideClass)>header {
font-weight: 600;
color: cadetblue;
transform: translate(93px, 32px);
font-size: 34px;
font-family: arial;
position: relative;
word-wrap: break-word;
}
div[type="slideshow"]>section:not(.hideClass)>article {
transform: translate(87px, 39px);
max-width: 800px;
color: black;
font-size: 22px;
font-family: arial;
position: relative;
padding: 10px;
word-wrap: break-word;
}
/*.activeClass{
opacity: 1 !important;
}
*/
.hideClass {
opacity: 0;
min-height: 0 !important;
margin: 0 !important;
}
.hideClass header,
.hideClass article {
display: none;
}
#keyframes fadein {
0% {
opacity: 0
}
50% {
opacity: 0.5
}
100% {
opacity: 1
}
}
div[type="timeline"] br {
display: none;
}
.progressClass {
height: 4px;
display: none;
top: 46px;
left: 0px;
width: 100%;
position: fixed;
margin-left: -1px;
margin-top: -1px;
}
.color_arrow {
position: relative;
top: 228px;
color: #085153;
left: 93px;
}
.color_arrows {
position: relative;
top: 228px;
color: #085153;
left: 94% !important;
}
#media only screen and (max-width: 992px) {
div[type="timeline/slideshow"]>section,
div[type="timeline"]>section {
width: 650px;
}
.color_arrow {
left: -18px;
}
div[type="slideshow"]>section:not(.hideClass) {
width: 640px;
left: 14px;
}
.color_arrows {
left: 99% !important;
}
}
#media only screen and (max-width: 992px) {
div[type="slideshow"]>section {
width: 650px;
}
div[type="slideshow"]>section:not(.hideClass) {
width: 640px;
left: 18px;
}
}
#media only screen and (min-width: 1201px) and (max-width: 1299px) {
div[type="slideshow"]>section:not(.hideClass) {
width: 845px;
left: 154px;
}
}
#media only screen and (min-width: 992px) and (max-width: 1200px) {
div[type="slideshow"]>section:not(.hideClass) {
width: 698px;
left: 136px;
}
}
#slide {
display: block;
}
.edit_timeline {
margin: 4%;
}
.containers {
font-weight: 800;
font-style: arial;
font-size: 24px;
width: 500px;
height: 100px;
margin: 2%;
border: 1px solid grey;
}
#modal_timeline {
margin-left: 25px;
}
.deleteStyle {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 10px;
padding-top: 5px;
float: right;
right: 12px;
bottom: 80px;
color: white;
}
.deleteStyle2 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 10px;
padding-top: 5px;
float: right;
right: 17px;
bottom: 80px;
color: white;
}
.deleteStyle3 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 12px;
padding-top: 5px;
float: right;
right: 20px;
bottom: 80px;
color: white;
}
.deleteStyle4 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 12px;
padding-top: 5px;
float: right;
right: 24px;
bottom: 80px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="containers">Click on Edit Timeline button to see the Timeline.</div>
<div class="demo">
<div type="timeline" id="slide">
<section>
<header>Title One</header>
<article>Content one</article>
</section>
<section>
<header>Title Two</header>
<article>Content one</article>
</section>
<section>
<header>Title Three</header>
<article>Content one</article>
</section>
<section>
<header>Title Four</header>
<article>Content one</article>
</section>
</div>
</div>
<button type="button" class="btn btn-success" id="modal_timeline" data-toggle="modal" data-target="#myModal">Edit Timeline</button>

I made some changes to you script to solve the problem:
Javascript: I used just one event to determine when you click up or down, but i had to add a data attribute with the name of the direction of the buttons to find out which button makes the call.
$(document).ready(function () {
$("#edit_button").click(function () {
$("#slide").css("display", "none");
})
$("#slide section").attr("contenteditable", "true");
var i = 1;
$("section").each(function () {
$(this).attr("id", i);
$(this).append("<div class='deleteStyle'>" + "&#10006" + "</div>");
$(this).append("<div class='deleteStyle2'>" + "&#10010" + "</div>");
$(this).append("<div class='deleteStyle3' data-direction='up'>" + "&#x2191" + "</div>");
$(this).append("<div class='deleteStyle4' data-direction='down' >" + "h" + "</div>");
i++;
});
$("#slide").on('click', '.deleteStyle', function () {
$(this).parent("section").remove()
});
$("#slide").on('click', '.deleteStyle2', function () {
var ele = $(this).closest("section").clone(true);
$(this).closest("section").after(ele);
});
$("#slide").on('click', '.deleteStyle3, .deleteStyle4 ', function (e) {
var direction = $(e.currentTarget).data().direction,
$currentSection = $(this).parent(),
$sectionToMove = direction === 'up' ? $(this).parent().prev() : $(this).parent().next(),
currentSectionData = $currentSection.html(),
sectionToMoveData = $sectionToMove.html();
$currentSection.html(sectionToMoveData);
$sectionToMove.html(currentSectionData);
});
});
div[type="timeline/slideshow"]>section,
div[type="timeline"]>section {
margin: auto;
width: 500px;
z-index: 100;
opacity: 1;
border-left: 4px solid #00BCD4;
border-top: 1px solid grey;
min-height: 130px;
background-color: #b3e5fc2b;
border-radius: 4px;
margin-bottom: 55px;
position: relative;
top: 50px;
box-shadow: rgb(136, 136, 136) 3px 3px 1px;
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
}
/*div[type="timeline/slideshow"] > section:hover , div[type="timeline"] > section:hover {
opacity:1;
}
*/
div[type="timeline/slideshow"]::before,
div[type="timeline"]::before {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: .2rem;
background: white;
height: 55px;
}
div[type="timeline/slideshow"]>section::after,
div[type="timeline"]>section::after {
content: "";
position: absolute;
left: 50%;
bottom: -56px;
width: .2rem;
background: grey;
height: 54px;
}
div[type="timeline/slideshow"]>section>header,
div[type="timeline"]>section>header {
font-weight: 600;
color: cadetblue;
transform: translate(16px, 23px);
font-size: 30px;
font-family: arial;
padding: 3px;
position: relative;
word-wrap: break-word;
line-height: 31px;
}
div[type="timeline/slideshow"]>section>article,
div[type="timeline"]>section>article {
transform: translate(12px, 14px);
color: black;
font-size: 20px;
font-family: arial;
position: relative;
padding: 9px;
word-wrap: break-word;
line-height: 31px;
}
div[type="timeline"]>section:last-of-type::after {
display: none;
}
div[type="slideshow"] {
height: 471px;
position: relative;
top: 100px;
}
div[type="slideshow"]>section:not(.hideClass) {
margin: auto;
width: 900px;
max-height: 265px;
z-index: 100;
border-top: 1px solid grey;
border-left: 4px solid #00BCD4;
min-height: 250px;
background-color: #b3e5fc2b;
border-radius: 4px;
margin-bottom: 55px;
position: absolute;
overflow-x: hidden;
top: 21.4%;
left: 168px;
box-shadow: rgb(136, 136, 136) 3px 3px 1px;
}
div[type="slideshow"]>section:not(.hideClass)>header {
font-weight: 600;
color: cadetblue;
transform: translate(93px, 32px);
font-size: 34px;
font-family: arial;
position: relative;
word-wrap: break-word;
}
div[type="slideshow"]>section:not(.hideClass)>article {
transform: translate(87px, 39px);
max-width: 800px;
color: black;
font-size: 22px;
font-family: arial;
position: relative;
padding: 10px;
word-wrap: break-word;
}
/*.activeClass{
opacity: 1 !important;
}
*/
.hideClass {
opacity: 0;
min-height: 0 !important;
margin: 0 !important;
}
.hideClass header,
.hideClass article {
display: none;
}
#keyframes fadein {
0% {
opacity: 0
}
50% {
opacity: 0.5
}
100% {
opacity: 1
}
}
div[type="timeline"] br {
display: none;
}
.progressClass {
height: 4px;
display: none;
top: 46px;
left: 0px;
width: 100%;
position: fixed;
margin-left: -1px;
margin-top: -1px;
}
.color_arrow {
position: relative;
top: 228px;
color: #085153;
left: 93px;
}
.color_arrows {
position: relative;
top: 228px;
color: #085153;
left: 94% !important;
}
#media only screen and (max-width: 992px) {
div[type="timeline/slideshow"]>section,
div[type="timeline"]>section {
width: 650px;
}
.color_arrow {
left: -18px;
}
div[type="slideshow"]>section:not(.hideClass) {
width: 640px;
left: 14px;
}
.color_arrows {
left: 99% !important;
}
}
#media only screen and (max-width: 992px) {
div[type="slideshow"]>section {
width: 650px;
}
div[type="slideshow"]>section:not(.hideClass) {
width: 640px;
left: 18px;
}
}
#media only screen and (min-width: 1201px) and (max-width: 1299px) {
div[type="slideshow"]>section:not(.hideClass) {
width: 845px;
left: 154px;
}
}
#media only screen and (min-width: 992px) and (max-width: 1200px) {
div[type="slideshow"]>section:not(.hideClass) {
width: 698px;
left: 136px;
}
}
#slide {
display: block;
}
.edit_timeline {
margin: 4%;
}
.containers {
font-weight: 800;
font-style: arial;
font-size: 24px;
width: 500px;
height: 100px;
margin: 2%;
border: 1px solid grey;
}
#modal_timeline {
margin-left: 25px;
}
.deleteStyle {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 10px;
padding-top: 5px;
float: right;
right: 12px;
bottom: 80px;
color: white;
}
.deleteStyle2 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 10px;
padding-top: 5px;
float: right;
right: 17px;
bottom: 80px;
color: white;
}
.deleteStyle3 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 12px;
padding-top: 5px;
float: right;
right: 20px;
bottom: 80px;
color: white;
}
.deleteStyle4 {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: cadetblue;
padding-left: 12px;
padding-top: 5px;
float: right;
right: 24px;
bottom: 80px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containers">Click on Edit Timeline button to see the Timeline.</div>
<div class="demo">
<div type="timeline" id="slide">
<section>
<header>Title One</header>
<article>Content one</article>
</section>
<section>
<header>Title Two</header>
<article>Content one</article>
</section>
<section>
<header>Title Three</header>
<article>Content one</article>
</section>
<section>
<header>Title Four</header>
<article>Content one</article>
</section>
</div>
</div>
<button type="button" class="btn btn-success" id="modal_timeline" data-toggle="modal" data-target="#myModal">Edit Timeline</button>

Attaching 2 jQuery "click events" only work once

Once I click on the image tag it opens the sidebar and it rotates the arrow to the right and when i click again it closes the sidebar and rotate back the arrow but the function doesn't work anymore after that and this is my problem here....
$(document).ready(function() {
$("img").on("click", function() {
$('#right-panel').addClass("visible");
$('#leftarrow').rotate({
animateTo: 180
});
$("img").on("click", function() {
$('#right-panel').removeClass("visible");
$('#leftarrow').rotate({
animateTo: 0
});
});
});
});
body {
font-family: "Segoe ui light", san-serif;
color: orange;
margin: 0px;
padding: 0px;
overflow: hidden;
}
h3 {
font-size: 48px;
font-weight: 400;
color: orange !important;
cursor: pointer;
}
.main {
/*border: 1px solid black;*/
}
/* right panel */
#right-panel {
position: absolute;
right: -120px;
top: 0px;
background-color: #f0f0f0;
width: 200px;
height: 100%;
display: block;
margin: 0px;
padding: 0px;
transition: right 0.3s linear;
}
#right-panel.visible {
right: 0px;
transition: right 0.3s linear;
}
/* absence box */
.absence-box {
border-radius: 7px;
background-color: rgb(56, 56, 56);
position: relative;
left: 15px;
top: 50px;
width: 50px;
height: 50px;
z-index: 64;
cursor: pointer;
transition: background 1s;
}
.absence-box:active {
background-color: #000;
}
.absence-box:hover {
background-color: #abaaaa;
}
.absence-box p:hover {
color: black;
position: relative;
font-size: 34px;
font-family: segoe ui light;
top: 0px;
left: 14px;
}
.absence-box p {
color: white;
position: relative;
font-size: 34px;
font-family: segoe ui light;
top: 0px;
left: 14px;
transition: color 1s;
}
/* presence box */
.presence-box {
border-radius: 7px;
background-color: rgb(67, 204, 196);
position: relative;
left: 15px;
top: 40px;
width: 50px;
height: 50px;
z-index: 64;
cursor: pointer;
}
.presence-box p {
color: white;
position: relative;
font-size: 34px;
font-family: segoe ui light;
top: 0px;
left: 14px;
}
/* Working box */
.working-box {
border-radius: 7px;
background-color: rgb(69, 105, 166);
position: relative;
left: 15px;
top: 30px;
width: 50px;
height: 50px;
z-index: 64;
cursor: pointer;
}
.working-box p {
color: white;
position: relative;
font-size: 34px;
font-family: segoe ui light;
top: 0px;
left: 10px;
}
h6 {
color: gray;
font-size: 12px;
}
.absence-box h6 {
position: relative;
top: -60px;
right: -65px;
}
.presence-box h6 {
position: relative;
top: -60px;
right: -65px;
}
.working-box h6 {
position: relative;
top: -60px;
right: -65px;
white-space: nowrap;
}
img {
cursor: pointer;
position: relative;
top: 20px;
left: 20px;
}
img.leftarrow {
background-image: src('imgs/leftarrow.png');
}
img.rightarrow {
background-image: url("imgs/rightarrow.png");
background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://beneposto.pl/jqueryrotate/js/jQueryRotateCompressed.js"></script>
<!-- Right panel -->
<div id="right-panel">
<img src="imgs/leftarrow.png" id="leftarrow" />
<!-- absence box -->
<div class="absence-box">
<p>A</p>
<h6>Absence</h6>
</div>
<!-- presence box -->
<div class="presence-box">
<p>P</p>
<h6>Presence</h6>
</div>
<!-- Working box -->
<div class="working-box">
<p>W</p>
<h6>Working on Order</h6>
</div>
</div>

Just use the toggleClass function to add / remove the class "visible":
$(document).ready(function(){
$("img").on("click", function(){
$('#right-panel').toggleClass("visible");
});
});
For rotating the image I would recommend you to use CSS3:
.visible img {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: transform 300ms ease;
transition: transform 300ms ease;
}

I think, you want something like this
$(document).ready(function(){
$("img").on("click", function(){
var
rotate = 0;
if (!$('#right-panel').hasClass("visible")) {
rotate = 180;
}
$('#leftarrow').rotate({animateTo: rotate});
$('#right-panel').toggleClass("visible");
});
});

You likely meant
$("img").on("click", function() {
$('#right-panel').toggleClass("visible");
$('#leftarrow').rotate({
animateTo: $('#right-panel').hasClass("visible") ? 180 : 0
});
});
body {
font-family: "Segoe ui light", san-serif;
color: orange;
margin: 0px;
padding: 0px;
overflow: hidden;
}
h3 {
font-size: 48px;
font-weight: 400;
color: orange !important;
cursor: pointer;
}
.main {
/*border: 1px solid black;*/
}
/* right panel */
#right-panel {
position: absolute;
right: -120px;
top: 0px;
background-color: #f0f0f0;
width: 200px;
height: 100%;
display: block;
margin: 0px;
padding: 0px;
transition: right 0.3s linear;
}
#right-panel.visible {
right: 0px;
transition: right 0.3s linear;
}
/* absence box */
.absence-box {
border-radius: 7px;
background-color: rgb(56, 56, 56);
position: relative;
left: 15px;
top: 50px;
width: 50px;
height: 50px;
z-index: 64;
cursor: pointer;
transition: background 1s;
}
.absence-box:active {
background-color: #000;
}
.absence-box:hover {
background-color: #abaaaa;
}
.absence-box p:hover {
color: black;
position: relative;
font-size: 34px;
font-family: segoe ui light;
top: 0px;
left: 14px;
}
.absence-box p {
color: white;
position: relative;
font-size: 34px;
font-family: segoe ui light;
top: 0px;
left: 14px;
transition: color 1s;
}
/* presence box */
.presence-box {
border-radius: 7px;
background-color: rgb(67, 204, 196);
position: relative;
left: 15px;
top: 40px;
width: 50px;
height: 50px;
z-index: 64;
cursor: pointer;
}
.presence-box p {
color: white;
position: relative;
font-size: 34px;
font-family: segoe ui light;
top: 0px;
left: 14px;
}
/* Working box */
.working-box {
border-radius: 7px;
background-color: rgb(69, 105, 166);
position: relative;
left: 15px;
top: 30px;
width: 50px;
height: 50px;
z-index: 64;
cursor: pointer;
}
.working-box p {
color: white;
position: relative;
font-size: 34px;
font-family: segoe ui light;
top: 0px;
left: 10px;
}
h6 {
color: gray;
font-size: 12px;
}
.absence-box h6 {
position: relative;
top: -60px;
right: -65px;
}
.presence-box h6 {
position: relative;
top: -60px;
right: -65px;
}
.working-box h6 {
position: relative;
top: -60px;
right: -65px;
white-space: nowrap;
}
img {
cursor: pointer;
position: relative;
top: 20px;
left: 20px;
}
img.leftarrow {
background-image: src('imgs/leftarrow.png');
}
img.rightarrow {
background-image: url("imgs/rightarrow.png");
background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://beneposto.pl/jqueryrotate/js/jQueryRotateCompressed.js"></script>
<!-- Right panel -->
<div id="right-panel">
<img src="http://www.valencia.org/images/leftArrow.png" id="leftarrow" height="32"/>
<!-- absence box -->
<div class="absence-box">
<p>A</p>
<h6>Absence</h6>
</div>
<!-- presence box -->
<div class="presence-box">
<p>P</p>
<h6>Presence</h6>
</div>
<!-- Working box -->
<div class="working-box">
<p>W</p>
<h6>Working on Order</h6>
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Toggle second class once first class is completed? - javascript

You could use jQuery UI so you can chain your class toggles like: $('.vidsh_sub_btn').on('click', function() { $('.vidsub_rld_c').toggleClass('goright', 2000).promise().done(function(){ $('.vidsub_rld_c').toggleClass('godown', 2000); }); }); https://codepen.io/anon/pen/QajaPm

Related

is there a way for me to make a custom scrollbar appear on the left instead of the right?

CSS / HTML layering problems

CSS curtains, it rimains opened when the site is runned up

How to swap inside DIV data when up and down button press using js and jquery?

Attaching 2 jQuery "click events" only work once

Categories

Resources