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
- 'ionic' is not recognized as an internal or external command
- OSError: cannot open resource - Python
- Python read file line count
- How to Encode & Decode using Base64 in Python?
- Unspecified error-The function is not implemented. Rebuild the library with Windows, GTK+ 2.x or Cocoa support.
- How to generate a Captcha verification code image with Python?
- How to show an image using path python PIL?
- How to remove Background from the images using Python?
Related Article