In this tutorial I will show you how to replace the class using jQuery. When the user click the grid view it will be listed in grid view, if the user click the list view the content will be listing.
I here used jQuery attribute method function for changing from one css class to another css class.
The following example working perfectly, it will work dynamically on button click. You can also customize using the following concept and apply to change the css using jQuery. You should refer the latest version of the jQuery.
<script type="text/javascript">
function changetoGrid() {
$(".sp-list").attr('class', 'col-sm-12 sp-list');
}
function changetoList() {
$(".sp-list").attr('class', 'col-sm-6 sp-list');
}
</script>
<input type="radio" name="view-filter" id="list-view" onclick="changetoList();" class="list-view-radio view-radio" checked><label for="list-view" style="float:right"><i class="fa fa-list-ul"></i> List View</label>
<input type="radio" name="view-filter" id="grid-view" onclick="changetoGrid();" class="grid-view-radio view-radio"><label for="grid-view" style="float:right"><i class="fa fa-th"></i> Grid View</label>
<article class="block-item">
<img src="http://www.placecage.com/g/300/300">
<div class="entry-content">
<h1 class="entry-title">Entry One</h1>
<div class="col-sm-6 sp-list">
<div class="text">
<h6 class="cust-head"><span class="key">Front Camera: </span> 1.2MP</h6>
<h6 class="cust-head">
<span class="key">Rear : </span> 8MP
</h6>
</div>
</div>
<div class="col-sm-6 sp-list">
<!-- Search form -->
<div class="text">
<h6 class="cust-head"><span class="key">Front Camera: </span> 1.2MP</h6>
<h6 class="cust-head">
<span class="key">Rear : </span> 8MP
</h6>
</div>
</div>
<div class="clearfix"></div>
<p>
This is my short description text for this item.
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</article>
Output:
Post your comments / questions
Recent Article
- How to use if else statement in c++?
- How to use godaddy domain name with another godaddy hosting account?
- Restore of database 'DATABASE' failed. (Microsoft.SqlServer.Management.RelationalEngineTasks)
- How to programmatically modifying the AppSetting value in web.config using c#?
- TypeError [ERR_INVALID_CALLBACK]: Callback must be a function. Received undefined
- How to calculate the age from jQuery ui datepicker using c#?
- How to calculate days difference between two dates in c#?
- Changing date format in jQuery ui datepicker
Related Article