I have a problem with my jQuery code. I would like to click on one of the previewed text that belongs to that button and the other was eventually closed.
The text should go down using slideDown() and disappear using slideUp(). How it could adjust to it did not make a mess?
HTML:
<div class="ata-pdf-wrapper ata-btn-video">
<a title="Videos">
<span>Videos</span>
<span> </span>
</a>
</div>
<div class="ata-pdf-wrapper ata-btn-pdf">
<a title="Download PDF">
<span>Download</span>
<span> </span>
</a>
</div>
<br/>
<br/>
<div class="ata-media-wrapper">
<div class="ata-downloads">
<ul>
<li>
<a title="DQA (free)" href="http://www.ataccama.com/en/products/dq-analyzer/download.html">DQA (free)</a>
</li>
<li>
<a title="Product Sheet" href="http://www.ataccama.com/dq-analyzer-product-sheet">Product Sheet</a>
</li>
<li>
<a title="User Guide" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/Ataccama%20DQA%209%20User%20Guide.pdf">User Guide</a>
</li>
<li>
<a title="Frequently Asked Questions" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/DQA%209%20FAQ.pdf">Frequently Asked Questions</a>
</li>
</ul>
</div>
<div class="ata-videos">
<ul>
<li>
<a title="Creating a Profile" href="https://www.youtube.com/watch?v=WC_VZ5z5q3E">Creating a Profile</a>
</li>
<li>
<a title="Understanding Profiling Results" href="https://www.youtube.com/watch?v=2L35k080ovQ">Understanding Profiling Results</a>
</li>
<li>
<a title="Advanced Profiling" href="https://www.youtube.com/watch?v=nQGBYkTXNPc">Advanced Profiling</a>
</li>
<li>
<a title="Email Analysis" href="https://www.youtube.com/watch?v=u45G0yo9sE4">Email Analysis</a>
</li>
</ul>
</div>
</div>
jQuery:
$(document).ready(function() {
$(".ata-pdf-wrapper.ata-btn-video").click(function(){
if ($(".ata-pdf-wrapper.ata-btn-video").hasClass("active")) {
$(".ata-media-wrapper").hide();
$(".ata-videos").fadeIn(500);
$(".entry-content").removeClass("shadow");
$(".ata-pdf-wrapper.ata-btn-video").removeClass("active");
} else{
$(".ata-pdf-wrapper.ata-btn-video").addClass("active");
$(".ata-media-wrapper").show();
$(".ata-videos").slideDown(500);
$(".entry-content").addClass("shadow");
};
});
$(".ata-pdf-wrapper.ata-btn-pdf").click(function(){
if ($(".ata-pdf-wrapper.ata-btn-pdf").hasClass("active")) {
$(".ata-media-wrapper").hide();
$(".ata-downloads").fadeIn(500);
$(".entry-content").removeClass("shadow");
$(".ata-pdf-wrapper.ata-btn-pdf").removeClass("active");
} else{
$(".ata-pdf-wrapper.ata-btn-pdf").addClass("active");
$(".ata-media-wrapper").show();
$(".ata-downloads").slideDown(500);
$(".entry-content").addClass("shadow");
};
});
});
The code is on jsFiddle.
If y understand what you want to do with those lists, something not messy is the following example.
$(document).ready(function() {
$(".ata-pdf-wrapper.ata-btn-video").click(function(ev){
var $currentTarget = $(ev.currentTarget);
if ($currentTarget.hasClass("active")) {
$(".ata-videos").slideUp(500);
$(".entry-content").removeClass("shadow");
$currentTarget.removeClass("active");
} else{
$currentTarget.addClass("active");
$(".ata-videos").slideDown(500);
$(".entry-content").addClass("shadow");
};
});
$(".ata-pdf-wrapper.ata-btn-pdf").click(function(ev){
var $currentTarget = $(ev.currentTarget);
if ($currentTarget.hasClass("active")) {
$(".ata-downloads").slideUp(500);
$(".entry-content").removeClass("shadow");
$currentTarget.removeClass("active");
} else{
$currentTarget.addClass("active");
$(".ata-downloads").slideDown(500);
$(".entry-content").addClass("shadow");
};
});
});
.ata-pdf-wrapper a {
display: inline-block;
background: #55d239;
border-radius: 20px;
text-align: center;
border: 2px solid #fff;
cursor: pointer;
}
.ata-pdf-wrapper a > span {
float: left;
padding: 6px 20px 5px 25px;
color: #fff;
}
.ata-pdf-wrapper.ata-btn-video a > span + span,
.ata-pdf-wrapper.ata-btn-pdf a > span + span,
.ata-pdf-wrapper a > span + span {
float: right;
width: 11px;
height: 18px;
padding: 10px 10px 10px 18px;
border-left: 1px solid #45bd2a;
}
.ata-pdf-wrapper a:hover,
.ata-pdf-wrapper.active a {
border: 2px solid #309319;
}
.ata-pdf-wrapper.ata-btn-video {
right: 200px;
}
.ata-downloads,
.ata-videos {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="ata-pdf-wrapper ata-btn-video">
<a title="Videos">
<span>Videos</span>
<span> </span>
</a>
</div>
<div class="ata-videos">
<ul>
<li>
<a title="Creating a Profile" href="https://www.youtube.com/watch?v=WC_VZ5z5q3E">Creating a Profile</a>
</li>
<li>
<a title="Understanding Profiling Results" href="https://www.youtube.com/watch?v=2L35k080ovQ">Understanding Profiling Results</a>
</li>
<li>
<a title="Advanced Profiling" href="https://www.youtube.com/watch?v=nQGBYkTXNPc">Advanced Profiling</a>
</li>
<li>
<a title="Email Analysis" href="https://www.youtube.com/watch?v=u45G0yo9sE4">Email Analysis</a>
</li>
</ul>
</div>
<div class="ata-pdf-wrapper ata-btn-pdf">
<a title="Download PDF">
<span>Download</span>
<span> </span>
</a>
</div>
<div class="ata-downloads">
<ul>
<li>
<a title="DQA (free)" href="http://www.ataccama.com/en/products/dq-analyzer/download.html">DQA (free)</a>
</li>
<li>
<a title="Product Sheet" href="http://www.ataccama.com/dq-analyzer-product-sheet">Product Sheet</a>
</li>
<li>
<a title="User Guide" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/Ataccama%20DQA%209%20User%20Guide.pdf">User Guide</a>
</li>
<li>
<a title="Frequently Asked Questions" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/DQA%209%20FAQ.pdf">Frequently Asked Questions</a>
</li>
</ul>
</div>
<br/> <br/>
Related
The idea is that the user can either download the file by clicking download or view it as a png in browser by clicking open/show/whatever.
I used a solution found on here to achieve a show/hide toggle div function. It worked perfectly for one list item, but I'm trying to find a way to use this with a list of about 30 entries. I know I could just copy and paste the code and make new classes for the divs and anchors but surely there's a better way. I'm new to web development so I apologise if the solution is an obvious one.
Here is an example. I want each entry to control it's own div toggle (click on open).
$('.list-link').click(function() {
$('.test-div').show(500);
$('.list-link').hide(0);
$('.Hide').show(0);
});
$('.Hide').click(function() {
$('.test-div').hide(500);
$('.list-link').show(0);
$('.Hide').hide(0);
});
.list-entry {
background-color: darkgrey;
width: 200px;
margin-bottom: 10px;
list-style: none;
}
.test-div {
width: 200px;
height: 100px;
background-color: blue;
display: none;
}
.Hide {
display: none;
}
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<ul class="list">
<li class="list-entry">
<p> test 1</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</li>
<div class="test-div"></div>
<li class="list-entry">
<p> test 2</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
</li>
<div class="test-div"></div>
<li class="list-entry">
<p> test 3</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
</li>
<div class="test-div"></div>
</ul>
https://codepen.io/pen/RwgaxRQ
Thanks in advance.
To do what you require you can use jQuery's DOM traversal methods, such as closest() and find(), to relate the element that raised the click event to those around it which you want to affect.
Also note that your HTML is invalid. ul can only contain li elements, not div, so you need to change the structure slightly.
With that said, try this:
$('.list-link').click(function() {
let $li = $(this).closest('li');
$li.find('.test-div').show(500);
$li.find('.list-link').hide();
$li.find('.Hide').show();
});
$('.Hide').click(function() {
let $li = $(this).closest('li');
$li.find('.test-div').hide(500);
$li.find('.list-link').show();
$li.find('.Hide').hide();
});
.list-entry {
background-color: darkgrey;
width: 200px;
margin-bottom: 10px;
list-style: none;
}
.test-div {
width: 200px;
height: 100px;
background-color: blue;
display: none;
}
.Hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="list">
<li class="list-entry">
<p> test 1</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
<div class="test-div"></div>
</li>
<li class="list-entry">
<p> test 2</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
<div class="test-div"></div>
</li>
<li class="list-entry">
<p> test 3</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
<div class="test-div"></div>
</li>
</ul>
Also note that I updated the demo to use jQuery v3.6.0, as 2.1.4 is very outdated.
I made a questionnaire to help people where should they go when they have a certain type of ticket. Right now I'm having trouble with make the "Back" button to show the previous "ul" or screen that the user seen. At first I'm going to remove the 'active' class of the current "ul" but it won't work. Could show me how to make the back button ?
Thanks
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="js.js"></script>
</head>
<body>
<section class="question_wrapper">
<ul class="tab active">
<li class="active">
<p>Do you have a ticket ?</p>
yes
no
</li>
</ul>
<ul class="tab" id="tab1">
<li>
<p>Which Ticket do you have ?</p>
Type 1
Type 2
Type 3
Type 4
Type 5
Type 6
<button type="button">Back</button>
</li>
</ul>
<ul class="tab" id="tab2">
<li>
<p>Go buy some ticket then</p>
<button>Back</button>
</li>
</ul>
<ul class="tab" id="tab3">
<li>
<p>Please go to hall A</p>
<button>Back</button>
</li>
</ul>
<ul class="tab" id="tab4">
<li>
<p>Please go to hall B</p>
<button>Back</button>
</li>
</ul>
<ul class="tab" id="tab4">
<li>
<p>Please go to hall C</p>
<button>Back</button>
</li>
</ul>
</section>
</body>
</html>
CSS
.question_wrapper {
display: flex;
justify-content: center;
}
ul {
list-style: none;
border: 1px solid black;
text-align: center;
padding-left: 0;
width: 40rem;
height: 20rem;
display: flex;
justify-content: center;
align-items: center;
}
.tab {
display: none;
}
.tab.active {
display: flex;
}
JS/JQuery
$(document).ready(function(){
$(function() {
$(".tab a").click(function() {
$(this).parent().addClass("active").siblings(".active").removeClass("active");
var tabContents = $(this).attr("href");
$(tabContents).addClass("active").siblings(".active").removeClass("active");
return false;
});
});
$(":button").on("click", function(){
$(this).parent().removeClass("active");
});
});
I have made a few changes to the button click.
$(':button') to $('button')
On click, remove active classname from all ul except the first ul
There is a mistake I found in your code that I found, which is you are using only one li in each ul, but for each items under ul, you should be using a li and if you need more elements, you can use them.
Update
Updated the snippet with the functionality to go back to previous ul instead of the first one.
I am keeping an additional attribute with each ul to identify the level they are in, so when I click on the back button, I am identifying the currentLevel and finding the next one using the currentLevel.
$(document).ready(function(){
$(function() {
$(".tab a").click(function() {
$(this).parent().addClass("active").siblings(".active").removeClass("active");
var tabContents = $(this).attr("href");
$(tabContents).addClass("active").siblings(".active").removeClass("active");
return false;
});
});
$("button").on("click", function(){
let currentLevel = $(this).closest('.tab').attr('data-level');
let prevLevel = parseInt(currentLevel) - 1;
$('.tab').removeClass("active");
$('.tab').each(function(index, item) {
if(parseInt($(item).attr('data-level')) === prevLevel) {
$(item).addClass('active');
}
})
});
});
.question_wrapper {
display: flex;
justify-content: center;
}
ul {
list-style: none;
border: 1px solid black;
text-align: center;
padding-left: 0;
width: 40rem;
height: 20rem;
display: flex;
justify-content: center;
align-items: center;
}
.tab {
display: none;
}
.tab.active {
display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="question_wrapper">
<ul class="tab main-tab active" data-level='1'>
<li class="active">
<p>Do you have a ticket ?</p>
yes
no
</li>
</ul>
<ul class="tab" data-level='2' id="tab1">
<li>
<p>Which Ticket do you have ?</p>
Type 1
Type 2
Type 3
Type 4
Type 5
Type 6
<button type="button">Back</button>
</li>
</ul>
<ul class="tab" id="tab2" data-level='3'>
<li>
<p>Go buy some ticket then</p>
<button>Back</button>
</li>
</ul>
<ul class="tab" id="tab3" data-level='3'>
<li>
<p>Please go to hall A</p>
<button>Back</button>
</li>
</ul>
<ul class="tab" id="tab4" data-level='3'>
<li>
<p>Please go to hall B</p>
<button>Back</button>
</li>
</ul>
<ul class="tab" id="tab5" data-level='3'>
<li>
<p>Please go to hall C</p>
<button>Back</button>
</li>
</ul>
</section>
How not to add a class to a block that does not have a class of foot-items? When I click on "Link", still the foot-active class is added and removed, even though this foot-menu does not have a class of foot-items, like the b condition was written.
$(document).on('click', '.foot-title', function(e){
if ($('.foot-menu').hasClass('foot-items')) {
$(this).parent().toggleClass('foot-active');
}
});
html, body {
margin: 0;
padding: 0;
}
.link {
text-decoration: none;
color: #ddd;
}
.menu {
display: none;
}
.foot-active .menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foot-menu foot-items">
<div class="foot-title">
More
</div>
<div class="menu">
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
</div><!-- .b-menu -->
</div>
<div class="foot-menu">
<div class="foot-title">
Link
</div>
</div>
I also tried through .each(), but it did not work out.
$('.foot-title').each(function() {
$(this).click(function() {
$('.foot-menu').each(function(i) {
if ($(this).hasClass('foot-items')) {
$(this).toggleClass('foot-active');
}
});
});
});
$(document).on('click', '.foot-items.foot-menu', function(e){
$(this).toggleClass('foot-active');
});
html, body {
margin: 0;
padding: 0;
}
.link {
text-decoration: none;
color: #ddd;
}
.menu {
display: none;
}
.foot-active .menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foot-menu foot-items">
<div class="foot-title">
More
</div>
<div class="menu">
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
</div><!-- .b-menu -->
</div>
<div class="foot-menu">
<div class="foot-title">
Link
</div>
</div>
If your aim is to add click event only with class foot-items and foot-menu, You can change your click event on .foot-items.foot-menu. No need to trigger it each time.
When checking for the class foot-items you need to do it based on the clicked element so you need to do:
$(this).parent()
Hope this helps :)
$(document).on('click', '.foot-title', function(e){
if ($(this).parent().hasClass('foot-items')) {
$(this).parent().toggleClass('foot-active');
console.log(".foot-active added or removed");
}
});
html, body {
margin: 0;
padding: 0;
}
.link {
text-decoration: none;
color: #ddd;
}
.menu {
display: none;
}
.foot-active .menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foot-menu foot-items">
<div class="foot-title">
More
</div>
<div class="menu">
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
</div><!-- .b-menu -->
</div>
<div class="foot-menu">
<div class="foot-title">
Link
</div>
</div>
<ul class="dropdown-menu wm_search_div" ng-show="searchDivShow">
<li ng-repeat="user in searchUserList">
<a href="javascript:void(0);" class="wm_clearfix3">
<img ng-src="{{user.faceIcon}}" class="pull-left wm_search_uface"/>
<div class="pull-left wm_ml5">
<div class="wm_search_uname" ng-bind="user.username"></div>
<span ng-bind="'账号：'+user.account" class="wm_search_uacc"></span>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);" class="wm_clearfix3">
<img ng-src="resources/images/default_faceicon.jpg" class="pull-left wm_search_uface"/>
<div class="pull-left wm_ml5">
<div class="wm_search_uname">fdsfsfds</div>
<span class="wm_search_uacc">fsdfds</span>
</div>
</a>
</li>
</ul>
.wm_clearfix3{
overflow: auto;
height: 1%;
}
I added a clearfix css class in my label,and it was working well when I had not add angular codes into my HTML.But when I added angular into HTML,the clearfix class became don't work.The cut picture like this:
Maybe because of 'ng-repeat'?Can somebody help me?
You don't need to add ng-class unless you are adding a class with logic. So just add class is enough
Why use 'ng-class' if you have not an angular expression ?
try with:
ng-class="{wm_clearfix3}"
or:
.wm_clearfix3{
overflow: auto;
height: 1%;
clear: both;
}
Does the solution at the below JSFiddle link help you out at all?
https://jsfiddle.net/6vm4csjb/
ul {
list-style: none;
}
[class*="wm_clearfix"] {
display: inline-block;
width: 100%;
}
[class*="wm_clearfix"]:before, [class*="wm_clearfix"]:after {
display: table;
content: " ";
}
img {
display: inline-block;
width: 20px;
height: 20px;
}
.pull-left {
float: left;
}
<ul class="dropdown-menu wm_search_div" ng-show="searchDivShow">
<li ng-repeat="user in searchUserList">
<a href="javascript:void(0);" class="wm_clearfix3">
<img ng-src="{{user.faceIcon}}" class="pull-left wm_search_uface"/>
<div class="pull-left wm_ml5">
<div class="wm_search_uname" ng-bind="user.username"></div>
<span ng-bind="'账号：'+user.account" class="wm_search_uacc"></span>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);" class="wm_clearfix3">
<img ng-src="resources/images/default_faceicon.jpg" class="pull-left wm_search_uface"/>
<div class="pull-left wm_ml5">
<div class="wm_search_uname">fdsfsfds</div>
<span class="wm_search_uacc">fsdfds</span>
</div>
</a>
</li>
</ul>
I am fairly new to jQuery and I am making a results page where the user can switch between list and grid view. It does seem to work but when I have a lot of results it seems to be buggy. Can anyone see why this may be?
CODEPEN DEMO
Any help would be much appreciated.
JS
$('.btn.grid').click(function() {
if (!$(this).hasClass("active")) {
$(this).addClass("active");
$('.results-wrapper .grid_12').removeClass("grid_12").addClass("grid_3");
$('.wrapper .results').addClass("grid-view-active");
if ($(".btn.list").hasClass("active")) {
$(".btn.list").removeClass("active");
$('.wrapper .results').removeClass("list-view-active");
}
}
});
$('.btn.list').click(function() {
if (!$(this).hasClass("active")) {
$(this).addClass("active");
$('.results-wrapper .grid_3').removeClass("grid_3").addClass("grid_12");
$('.wrapper .results').addClass("list-view-active");
if ($(".btn.grid").hasClass("active")) {
$(".btn.grid").removeClass("active");
$('.wrapper .results').removeClass("grid-view-active");
}
}
});
HTML
<span class="btn grid active">grid</span>
<span class="btn list">list</span>
<div class="wrapper">
<div class="results-wrapper">
<ul class="results">
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
</ul>
</div>
</div>
CSS
.btn {
background: #ccc;
cursor: pointer;
display: inline-block;
height: 35px;
width: 35px;
}
.btn.active {
background: red;
}
li {
float: left;
height: 200px;
width: 200px;
}
li img {
max-width: 100%;
max-height: 100%;
}
.grid_3 {
width: 25%;
}
.grid_12 {
width: 100%;
}
var gridButton = $('.btn.grid');
var listButton = $('.btn.list');
var isGridActive = true;
gridButton.click(function() {
if(!isGridActive) {
toggleFunction();
}
});
listButton.click(function() {
if(isGridActive) {
toggleFunction();
}
});
var toggleFunction = function(){
listButton.toggleClass("active");
gridButton.toggleClass("active");
if(isGridActive) {
$('.results-wrapper .grid_3').removeClass("grid_3").addClass("grid_12");
$('.wrapper .results').addClass("list-view-active").removeClass("grid-view-active");
} else {
$('.results-wrapper .grid_12').removeClass("grid_12").addClass("grid_3");
$('.wrapper .results').addClass("grid-view-active").removeClass("list-view-active");
}
isGridActive = !isGridActive;
};
If anyone can make that if statement any better that would be excellent.