Adding and removing and toggle CSS classes is a effective method to highlight changes in web pages. jQuery provides different Attributes for .addClass(), .removeClass() and toggleClass methods.
addClass():
jQuery:
<script type=”text/javascript”>
$(document).ready(function(){
$(”p.list”).click(function(){
$(this).addClass(”active”);
});
});
</script>
The CSS:
<style type=”text/css”>
p{
float: left;
width: 33.3%;
padding: 0;
margin: 0;
}
.block {
margin-right: 10px;
padding: 20px;
background: #fff;
}
.active {background: #ccc;}
</style>
removeClass():
jQuery:
$(document).ready(function(){
$(”p.list”).click(function(){
$(this).removeClass(”list”);
});
});
The CSS:
<style type=”text/css”>
p {
float: left;
width: 33.3%;
padding: 0;
margin: 0;
margin-right: 10px;
padding: 20px;
}
.list{
margin-right: 10px;
padding: 20px;
background: #CCCCCC;
}
</style>
toggleClass():
jQuery:
<script>
$(document).ready(function(){
$(”p.list”).click(function(){
$(this).toggleClass(”active”);
});
});
</script>
The CSS:
<style type=”text/css”>
p{
float: left;
width: [...]

According to jQuery “The jQuery UI Draggable plugin makes selected elements draggable by mouse.”
In this tutorial I am going to show you how easily you can create a dragable elements.
HTML CODE:
<div class=”fixedDragableDiv”>
<div class=”fixedDragableDivBar”>Click Here To Drag</div>
<div class=”dragable”>OK You can see the effect here. This box is dragable
if you click on the Click Here To [...]