jQuery addClass example

Change class name on click in jQuery

by artoo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
<div class="row"> 
<div id="toggle_controls"></div>
</div>
</div>


<div class="container my-3 controls" id="controls">
<div class="row">

<div class="col-md-4">

	
	
<!--FONT STUFF-->



<div class="row widget py-4">
<div class="col-md-6">	
<div class="dropdown"><button type="button" id="family_menu" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Select Family</button><div id="family" class="dropdown-menu scrollable-menu "><a class="dropdown-item" style="font-size:16px; font-family:ABeeZee" rel="0" value="ABeeZee">ABeeZee</a><a class="dropdown-item" style="font-size:16px; font-family:Abel" rel="1" value="Abel">Abel</a><a class="dropdown-item" style="font-size:16px; font-family:Abhaya Libre" rel="2" value="Abhaya Libre">Abhaya Libre</a><a class="dropdown-item" style="font-size:16px; font-family:Abril Fatface" rel="3" value="Abril Fatface">Abril Fatface</a><a class="dropdown-item" style="font-size:16px; font-family:Aclonica" rel="4" value="Aclonica">Aclonica</a><a class="dropdown-item" style="font-size:16px; font-family:Acme" rel="5" value="Acme">Acme</a><a class="dropdown-item" style="font-size:16px; font-family:Actor" rel="6" value="Actor">Actor</a><a class="dropdown-item" style="font-size:16px; font-family:Adamina" rel="7" value="Adamina">Adamina</a><a class="dropdown-item" style="font-size:16px; font-family:Advent Pro" rel="8" value="Advent Pro">Advent Pro</a><a class="dropdown-item" style="font-size:16px; font-family:Aguafina Script" rel="9" value="Aguafina Script">Aguafina Script</a><a class="dropdown-item" style="font-size:16px; font-family:Akronim" rel="10" value="Akronim">Akronim</a><a class="dropdown-item"...

CSS

.widget {background-color:#ccc; z-index:-1}

.controls {position:absolute; left:5px; top:5px; z-index:-10; transform: translatex(-110%); transition:transform 0.5s ease-in-out; z-index:300 ! important}
.show {transform: translatex(0%); transition:transform 0.3s ease-in-out}
#toggle_controls {z-index:2000; position:absolute; left:5px; top:5px; width:30px; height:30px; background-color:#ee2200; border-radius:15px; border:#222 1px solid}

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

JavaScript

$("#toggle_controls").on('click', function(){
    $(".controls").toggleClass("show");


});