Use toggleClass()
$(".theme-colors").toggleClass("shown");
Solution 1 :
Solution 2 :
You can use hasClass property which is not prefable nowadays
$(document).ready(function(){
$(".theme-button").click(function(){
if($( ".theme-colors" ).hasClass( "shown" )){
$(".theme-colors").removeClass("shown");
}
else{
$(".theme-colors").addClass("shown");
}
});
});
better solution is toggleClass property which is already do this control and do it
$(document).ready(function(){
$(".theme-button").click(function(){
$(".theme-colors").toggleClass("shown");
});
});
Solution 3 :
Here you go with a solution jsfiddle Link
$(document).ready(function(){
$(".theme-button").click(function(){
if ($(".theme-colors").hasClass("shown")) {
$(".theme-colors").removeClass("shown");
} else {
$(".theme-colors").addClass("shown");
}
});
}); .theme-colors.shown {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.theme-colors {
width: 280px;
position: fixed;
z-index: 1030;
top: 50%;
right: 0;
background: #fff;
-webkit-box-shadow: 0 1px 15px rgba(0,0,0,.04), 0 1px 6px rgba(0,0,0,.04);
box-shadow: 0 1px 15px rgba(0,0,0,.04), 0 1px 6px rgba(0,0,0,.04);
-webkit-transform: translate(280px,-50%);
transform: translate(280px,-50%);
-webkit-transition: -webkit-transform .4s ease-out;
transition: -webkit-transform .4s ease-out;
transition: transform .4s ease-out;
transition: transform .4s ease-out,-webkit-transform .4s ease-out;
padding-top: 10px;
padding-bottom: 10px;
}
body {
font-family: Nunito,sans-serif;
font-size: .8rem;
font-weight: 400;
color: #303030;
background: #f8f8f8;
}
.p-4 {
padding: 1.5rem!important;
}
.text-muted {
color: #909090!important;
}
.mb-2, .my-2 {
margin-bottom: .5rem!important;
}
p {
font-size: .85rem;
line-height: 1.3rem;
font-family: Nunito,sans-serif;
}
.justify-content-between {
-webkit-box-pack: justify!important;
-ms-flex-pack: justify!important;
justify-content: space-between!important;
}
.d-flex {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
}
.theme-colors .theme-color-purple {
border: 3px solid #922c88;
background: #922c88;
}
.theme-colors .theme-color {
width: 24px;
height: 24px;
display: inline-block;
border-radius: 20px;
-webkit-transition: background .25s;
transition: background .25s;
}
a {
color: #303030;
-webkit-transition: color .2s;
transition: color .2s;
}
.theme-colors .theme-color-blue {
border: 3px solid #145388;
background: #145388;
}
.theme-colors .theme-color-green {
border: 3px solid #576a3d;
background: #576a3d;
}
.theme-colors .theme-color-orange {
border: 3px solid #e2863b;
background: #e2863b;
}
.theme-colors .theme-color-red {
border: 3px solid #880a1f;
background: #880a1f;
}
.pl-4, .px-4 {
padding-left: 1.5rem!important;
}
.theme-colors .theme-button {
position: absolute;
left: -34px;
background: #fff;
padding: 13px 7px 13px 7px;
border-radius: .2rem;
color: #303030;
-webkit-box-shadow: -2px 0 5px rgba(0,0,0,.04);
box-shadow: -2px 0 5px rgba(0,0,0,.04);
font-size: 20px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #922c88;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="toggleshown" class="theme-colors"><div class="p-4"><p class="text-muted mb-2">Light Theme</p> <div class="d-flex flex-row justify-content-between mb-4"><a href="#" class="theme-color theme-color-purple active"></a><a href="#" class="theme-color theme-color-blue"></a><a href="#" class="theme-color theme-color-green"></a><a href="#" class="theme-color theme-color-orange"></a><a href="#" class="theme-color theme-color-red"></a></div> <p class="text-muted mb-2">Dark Theme</p> <div class="d-flex flex-row justify-content-between"><a href="#" class="theme-color theme-color-purple"></a><a href="#" class="theme-color theme-color-blue"></a><a href="#" class="theme-color theme-color-green"></a><a href="#" class="theme-color theme-color-orange"></a><a href="#" class="theme-color theme-color-red"></a></div></div> <div class="pb-0 pl-4 pt-4"><fieldset class="form-group" id="__BVID__10"><legend tabindex="-1" class="col-form-label pt-0" id="__BVID__10__BV_label_">Border Radius</legend><div tabindex="-1" role="group"><div role="radiogroup" tabindex="-1" class="" id="__BVID__11"><div class="custom-control custom-control-inline custom-radio"><input type="radio" name="radius" autocomplete="off" class="custom-control-input" value="rounded" id="__BVID__12"><label class="custom-control-label" for="__BVID__12">Rounded</label></div> <div class="custom-control custom-control-inline custom-radio"><input type="radio" name="radius" autocomplete="off" class="custom-control-input" value="flat" id="__BVID__13"><label class="custom-control-label" for="__BVID__13">Flat</label></div></div><!----><!----><!----></div></fieldset></div> <a href="#" class="theme-button"><i class="fa fa-cogs"></i></a></div>Use of .hasClass property
reference hasClass Documentation
Here you go with pure JavaScript solution
Problem :
I am Implementing theme which is the user can select a theme with a click so when I click on setting icon it’s run perfectly it’s opening but when I click on it again is not closing with jQuery 3.4.1.
Here is my jquery3.4.1 code
$(document).ready(function(){
$(".theme-button").click(function(){
$(".theme-colors").addClass("shown");
$(this).removeClass("shown");
});
});
and i want also in javascript
Here is CDN which is I’m using
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
My expectation is again clicked to close means open and close
jsfiddle Here
Comments
Comment posted by Barmar
I’ve been having lots of problems with jQuery 3.4.1 in jsfiddle. Going back to 3.3.1 usually fixes them.
Comment posted by Gosi
Instead of using click function to add class, why don’t you use toggle() instead?
Comment posted by Barmar
In this case I didn’t see any difference with the two versions. But where in your code is it supposed to close when you click a second time?
Comment posted by mplungjan
This works on jQuery edge and 3.4.1
Comment posted by mplungjan
There is a jQuery function for that: toggleClass
Comment posted by mplungjan
There is a jQuery function for that: toggleClass
Comment posted by Shiladitya
@DeveloperLion didn’t get your question
Comment posted by jsfiddle.net/1kxfmv5q
@DeveloperLion here you go with pure javascript