Toggle/Switch two classes using jquery

To switch two classes on an html element we use toggleClass. This will remove first class and add second class and vice versa.

<style>
    .myClass {
    color:blue;
    }
    .primary {
    color:black;
    }
</style>
<input type="button" value="Toggle class" onclick="ToggleClass()" />
<div id="myDiv" class="myClass">
    This is a div
</div>


<script type="text/javascript">
    function ToggleClass () {
        $("#myDiv").toggleClass("primary");
}

</script>

Comments

Post a Comment

Popular posts from this blog

Using Progress Bar In C#

Image
Using Progress Bar in C#: Progress Bar is very commonly used control in many applications to display the progress of task being performed. Progress Bar is displayed when copying files, deleting files or installing some software. How to use Progress Bar: ·          Start New Windows Form Application. ·          Go to Toolbox. ·          Select Progress Bar and Drag it to your Form. To make Progress Bar working you need to know some properties of Progress Bar Progress Bar.Maximum: Defines how long it should run Progress Bar.Step: Defines how much it should increase current position of Progress Bar. Progress Bar.Style: How should it look like? There is also a very basic method which is used to run Progress Bar properly. Progress Bar.PerformStep() Let’s see an example. In this example we will copy files and folders from one location to another and show the progress bar wh...
Read more

Get elements by class name in javascript

To get elements using class name we use getElementsByClassName method available with document object. This method takes name of class an argument.  It returns array of elements because more than one element(s) can have same class. < input type ="button" value ="Get By Class" onclick =" GetByClassName() " /> < div id ="myDiv" class ="myClass">     This is a div </ div > < script type ="text/javascript">   function GetByClassName() {         var elements = document.getElementsByClassName( "myClass" );         if (elements.length > 0) {             alert(elements[0].innerHTML);         }     else       alert( "No matching element found" );    }   </ script >
Read more

Jquery serer side datatables in asp.net

In this post we will learn how we can implement jquery   server side datatables in asp.net mvc application. We need to add datatables library to our page, we can add references of libray from datatables <a href="https://datatables.net/" target="_blank">website</a>. We need to create an html table on which we will apply datatable. <table class="table table-striped table-bordered table-hover table-checkable order-column dataTable" id="tblInventoryItems">   <thead>     <tr>       <th>Item Name</th>       <th>Item Price</th>       <th>Item Quantity</th>       <th></th>     </tr>   </thead>   <tbody></tbody> </table> Then we need the code which will apply the datatable to above html table. Below is the code to apply datatable $("yourtableid").DataTable({         "p...
Read more