I have a slideToggle menu that is open on desktop view (>980px) and initially collapsed on mobile view.
I have added some jQuery in place that adds a class of 'mobile_refine' or 'desktop_refine' to dependent on screensize when either the page is loaded or resized in the browser.
I would like to add classes to the submenu titles dependant on whether the nav has one of the above classes and if the relevant submenu is open. For example my conditions would be:
if #refinement-menu has class .mobile_refine AND .list-group-item-holder is OPEN then add class 'mobileopen' to nearest .list-group-item.subfilter_ttl
if #refinement-menu has class .mobile_refine AND .list-group-item-holder is CLOSED then add class 'mobileclosed' to nearest .list-group-item.subfilter_ttl
if #refinement-menu has class .desktop_refine AND .list-group-item-holder is OPEN then add class 'desktopopen' to nearest .list-group-item.subfilter_ttl
if #refinement-menu has class .desktop_refine AND .list-group-item-holder is CLOSED then add class 'desktopclosed' to nearest .list-group-item.subfilter_ttl
I've tried to use if/else statement but I can't seem to get it to work:
$(function() {
// This will fire when document is ready:
$(window).resize(function() {
// This will fire each time the window is resized:
if ($ ('#refinement-menu').hasClass('desktop_refine') && ('.list-group-item-holder').is(':visible') ){
// if larger or equal
$('.subfilter_ttl').addClass('mobile_open');
} else {
// if smaller
$('.subfilter_ttl').removeClass('mobile_open');
}
}).resize();
});
The HTML/CSS for the page is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="http://swimmingcover.co.uk/refine/css/bootstrap.css" rel="stylesheet">
<link href="http://swimmingcover.co.uk/refine/css/test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main_content" class="container-fluid">
<div id="main_content_container">
<div class="row">
<aside id="sidebar_lft" class="col-md-12 col-lg-3">
<div id="refinement_menu_holder">
<header id="refinement_menu_hdr">
<span class="filter_ttl large_screen">Refine by...</span>
<span class="filter_ttl small_screen">Browse category...</span>
</header>
<nav class="side-menu subcategory-menu" id="refinement-menu">
<div class="list-group">
<span class="list-group-item subfilter_ttl">Item title 1</span>
<span class="list-group-item-holder">
<a href="#" class="list-group-item">Item 1 <span class="badge">(14)</span></a>
<a href="#" class="list-group-item">Item 2 <span class="badge">(14)</span></a>
<a href="#" class="list-group-item">Item 3 <span class="badge">(14)</span></a>
<a href="#" class="list-group-item">Item 4 <span class="badge">(14)</span></a>
<a href="#" class="list-group-item">Item 5 <span class="badge">(14)</span></a>
<a href="#" class="list-group-item">Item 6 <span class="badge">(14)</span></a>
<a href="#" class="list-group-item">Item 7 <span class="badge">(14)</span></a>
<a href="#" class="list-group-item">Item 8 <span class="badge">(14)</span></a>
<a href="#" class="list-group-item">Item 9 <span class="badge">(14)</span></a>
<a href="#" class="list-group-item">Item 10 <span class="badge">(14)</span></a>
<a href="#" class="list-group-item">Item 11 <span class="badge">(14)</span></a>
</span>
</div>
<div class="list-group">
<span class="list-group-item subfilter_ttl">Item title 2</span>
<span class="list-group-item-holder">
<a href="#" class="list-group-item">Item 1 <span class="badge">(14)</span></a>
<a href="#" class="list-group-item">Item 2 <span class="badge">(14)</span></a>
<a href="#" class="list-group-item">Item 3 <span class="badge">(14)</span></a>
<a href="#" class="list-group-item">Item 4 <span class="badge">(14)</span></a>
<a href="#" class="list-group-item">Item 5 <span class="badge">(14)</span></a>
<a href="#" class="list-group-item">Item 6 <span class="badge">(14)</span></a>
</span>
</div>
</div>
</nav>
</div>
</aside>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://swimmingcover.co.uk/refine/js/bootstrap.min.js"></script>
<script src="http://swimmingcover.co.uk/refine/js/test.js"></script>
</body>
</html>
Here's a jsFiddle to the code: http://jsfiddle.net/qftg03u0/
Essentially, on desktop if the submenu is open the the relevant subtitle should have a class 'desktopopen' and if the submenu is closed then the relevant subtitle should have a class 'desktopclosed'
For mobile if the submenu is open the the relevant subtitle should have a class 'mobileopen' and if the submenu is closed then the relevant subtitle should have a class 'mobileclosed'
Any ideas?
Your if/else statement is missing a
$after your&&operator.if ($ ('#refinement-menu').hasClass('desktop_refine') && ('.list-group-item-holder').is(':visible') ){