Show/Hide Tab Arrows to Navigate Additional Tabs on Overflow - javascript

Right now, I have a tab structure that looks like the following:
As you can see, when the tabs reach the end of the line they wrap to the next line. I know how to hide the additional tabs; however, I want to introduce an arrow system to navigate to the additional tabs when the tabs overflow. Something that looks like below depending on the screen resolution:
I only want to have the arrows appear if there are additional tabs that are being hidden, this leads me to my question: How do I detect when the tabs wrap and insert the arrows?
I need this to work with responsive layouts.
Here is the code I am using to create the tabs (note: it includes hard-coded list items for the arrows):
<ul id="tabs" class="tab-links">
<li class="">Tables & Views</li>
<li class="">ERD</li>
<li class=""><i class="fa fa-caret-left"></i></li>
<li class="active"><a class="query-tab" href="#query1">Query 1</a></li>
<li class="">Query 2</li>
<li class="">Query 3</li>
<li class="">Query 4</li>
<li class="">Query 5</li>
<li class="">Query 6</li>
<li class="">Query 7</li>
<li class="">Query 8</li>
<li class="">Query 9</li>
<li class=""><i class="fa fa-caret-right"></i></li>
<!-- Hidden Tabs -->
<li class="">Query 10</li>
<li class="">Query 11</li>
<li class="">Query 12</li>
</ul>

The answer requested:
window.addEventListener('load', initTabs);
function initTabs() {
var listContainer = document.getElementById('tabs');
var buttonWidthCounter = 0;
var totalContainerWidth = listContainer.offsetWidth;
for (var i = 0; i < listContainer.children.length; i++) {
if (buttonWidthCounter + listContainer.children[i].offsetWidth > totalContainerWidth) {
//button overflow...add tab buttons
console.log('there is overflow...add tab arrow buttons...');
}
buttonWidthCounter += listContainer.children[i].offsetWidth;
}
}
li {
display: inline-block;
}
<ul id="tabs" class="tab-links">
<li class="">Tables & Views</li>
<li class="">ERD</li>
<li class=""><i class="fa fa-caret-left"></i></li>
<li class="active"><a class="query-tab" href="#query1">Query 1</a></li>
<li class="">Query 2</li>
<li class="">Query 3</li>
<li class="">Query 4</li>
<li class="">Query 5</li>
<li class="">Query 6</li>
<li class="">Query 7</li>
<li class="">Query 8</li>
<li class="">Query 9</li>
<li class=""><i class="fa fa-caret-right"></i></li>
<!-- Hidden Tabs -->
<li class="">Query 10</li>
<li class="">Query 11</li>
<li class="">Query 12</li>
</ul>
The answer I suggest:
Scrollbars are much easier to implement and are arguably better.
li{
display:inline-block;
}
ul{
white-space:nowrap;
}
html,body{
margin:0;
padding:0;
}
#container{
width:100vw;
overflow:scroll;
}
<div id="container">
<ul id="tabs" class="tab-links">
<li class="">Tables & Views</li>
<li class="">ERD</li>
<li class=""><i class="fa fa-caret-left"></i></li>
<li class="active"><a class="query-tab" href="#query1">Query 1</a></li>
<li class="">Query 2</li>
<li class="">Query 3</li>
<li class="">Query 4</li>
<li class="">Query 5</li>
<li class="">Query 6</li>
<li class="">Query 7</li>
<li class="">Query 8</li>
<li class="">Query 9</li>
<li class=""><i class="fa fa-caret-right"></i></li>
<!-- Hidden Tabs -->
<li class="">Query 10</li>
<li class="">Query 11</li>
<li class="">Query 12</li>
</ul>
</div>

Related

Moving li to next column

I've got a simple ul like so :
ul.target {
font-family: calibri, verdana, arial;
min-height: 500px;
float: none;
column-count: 4;
column-width: 25%;
column-gap: 1rem;
column-rule: 1px solid gray;
box-sizing: border-box;
}
ul {
margin: auto;
list-style: none;
}
ul > li > ul {
break-after: column;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<ul class="target">
<li class="categ">category 1</li>
<li class="item">test 1</li>
<li class="item">test 2</li>
<li class="categ">category 2</li>
<li class="item">test 3</li>
<li class="item">test 4</li>
<li class="item">test 5</li>
<li class="item">test 6</li>
<li class="item">test 7</li>
<li class="item">test 8</li>
<li class="categ">category 3</li>
<li class="item">test 9</li>
<li class="item">test 10</li>
<li class="item">test 11</li>
<li class="item">test 12</li>
<li class="item">test 13</li>
<li class="item">test 14</li>
<li class="item">test 15</li>
<li class="item">test 16</li>
<li class="item">test 17</li>
<li class="item">test 18</li>
<li class="categ">category 4</li>
<li class="item">test 19</li>
<li class="item">test 20</li>
<li class="item">test 21</li>
<li class="item">test 22</li>
<li class="item">test 23</li>
<li class="item">test 24</li>
<li class="categ">category 5</li>
<li class="item">test 25</li>
<li class="item">test 26</li>
<li class="item">test 27</li>
<li class="item">test 28</li>
<li class="item">test 29</li>
<li class="item">test 30</li>
<li class="item">test 31</li>
<li class="item">test 32</li>
<li class="item">test 33</li>
</ul>
As you can see here, category 2 is at the very bottom and category 3 is in the middle. I want to be able to move them to the next column dynamically if they're at the very bottom. Knowing that the height might be larger and there could be a lot of other categories in each column, I want to push the LAST category of the column to the next column, thus modifying the rest of the columns accordingly. I don't have any idea on where to start...
EDIT, taken from comments :
To clarify somet hings :
My code is a small example of a larger code containing much more than that, so no the question is still about how can I move each category to the next column, trying to find another way of doing it won't work in my case as this is just a preview. I'm using JQuery in order to get the categories and the list of items, and then I don't know what to do to push the category to the next column using JS. It should just reposition to the next column if it's the last category of the current column.
You could apply the break-before property to the .categ class, but then you end up with three columns:
var item = $(".item")
var categ = $(".categ")
ul {
font-family: calibri, verdana, arial;
min-height: 500px;
float: none;
margin: auto;
list-style: none;
column-count: 4;
column-width: 25%;
column-gap: 1rem;
column-rule: 1px solid gray;
box-sizing: border-box;
}
.categ {
break-before: column;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<ul>
<li class="categ">category 1</li>
<li class="item">test 1</li>
<li class="item">test 2</li>
<li class="categ">category 2</li>
<li class="item">test 3</li>
<li class="item">test 4</li>
<li class="item">test 5</li>
<li class="item">test 6</li>
<li class="item">test 7</li>
<li class="item">test 8</li>
<li class="categ">category 3</li>
<li class="item">test 9</li>
<li class="item">test 10</li>
<li class="item">test 11</li>
<li class="item">test 12</li>
</ul>
You have to alter the DOM in order to get this to work. In the following snippet I've made "sublists" out of the .categ list items and all their following .item siblings (using jQuery as you'd included it in your snippet). I've also added a class to the top-most ul so as to differentiate it for styling. You could also use a class on the uls for the "sublists" instead of using the child selector as I did.
$(".categ").each((idx, cat) => $(cat).nextUntil(".categ", ".item").addBack().wrapAll("<li><ul>"));
ul.target {
font-family: calibri, verdana, arial;
min-height: 500px;
float: none;
column-count: 4;
column-width: 25%;
column-gap: 1rem;
column-rule: 1px solid gray;
box-sizing: border-box;
}
ul {
margin: auto;
list-style: none;
}
ul > li > ul {
break-after: column;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<ul class="target">
<li class="categ">category 1</li>
<li class="item">test 1</li>
<li class="item">test 2</li>
<li class="categ">category 2</li>
<li class="item">test 3</li>
<li class="item">test 4</li>
<li class="item">test 5</li>
<li class="item">test 6</li>
<li class="item">test 7</li>
<li class="item">test 8</li>
<li class="categ">category 3</li>
<li class="item">test 9</li>
<li class="item">test 10</li>
<li class="item">test 11</li>
<li class="item">test 12</li>
</ul>
Disclaimer, I'm a little unsure about what you're trying to do:
I think the problem is not the presentation rules (CSS) you apply to your data (HTML). I think the problem is dat your data does not provide enough context for you presentation rules to act upon.
What I think you're trying to do is to have 3 (or more) separate lists presented on something that looks like a footer. However your HTML structures does not seem to properly match this scheme.
Try to make your HTML more explicit. Why put everything in one list instead of one list per category? Then you could justify the categories the way you want by either floats or flex or even grid layouts. I don't see why you should need jQuery for this?
Or have I misinterpreted your question?

Finding a better way to implement navigation bar which has subcategories

I'm building a navigation bar. The link below is what I just have completed so far.https://jsfiddle.net/dsdzyp23/2/
<div class="navbar-01">
<div class="navbar-01-container">
<div class="main-container">
<div class="logo-center">
<img style="width: 240px;" src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg">
</div>
<button class="nav-toggle-btn">
<img style="width: 50px;" src="https://cdn2.iconfinder.com/data/icons/ui-icon-part-2/128/navigation-512.png">
</button>
<ul class="nav-categories">
<li>RUNWAY</li>
<li>WOMEN</li>
<li>MEN</li>
<li>CHILDREN</li>
</ul>
</div>
</div>
<div id="runway" class="navbar-sub">
<div class="main-container">
<div class="nav-sub-list">
<ul class="nav-sub-categories">
WOMEN
<li>Cruise 2018</li>
<li>Fall Winter 2017 Runway</li>
<li>Pre-Fall 2017</li>
</ul>
<!--
-->
<ul class="nav-sub-categories">
MEN
<li>Cruise 2018</li>
<li>Fall Winter 2017 Runway</li>
<li>Pre-Fall 2017</li>
</ul>
<!--
-->
<ul class="nav-sub-categories">
UNSKILLED WORKER
</ul>
</div>
</div>
</div>
</div>
Cause my subcategories are not wrapped with anchors, when my mouse leaves the anchor, the subcategories div closes, therefore I cannot reach to the content which are wrapped in the subcategories div.
I' am wondering if wrapping subcategories with anchor is the best way to implement a navigation bar? (Considering to responsive web design, it seems like wrapping together is the most easiest way to implement?)
Here's the standard way to make a menu. It's also dependent on requirements.
ul {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.nav-list {
text-align: center;
}
.nav-list-item {
display: inline-block;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.nav-list-item:hover .subnav-list {
display: block;
}
.subnav-list {
display: none;
width: 100px;
transform: translateX(-50%);
position: absolute;
top: 100%;
left: 50%;
}
<nav class="nav">
<ul class="nav-list">
<li class="nav-list-item">
Nav 1
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 2
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 3
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 4
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 5
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 6
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 7
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 8
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 9
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 10
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
</ul>
</nav>

jQuery UI Sortable Multiple element target

I have 2 list element
<div id="list-one">
<ul class="ul-one">
<li data-order="1">item 1</li>
<li data-order="2">item 2</li>
<li data-order="3">item 3</li>
</ul>
</div>
<br />
<div id="list-two">
<ul class="ul-two">
<li data-order="1">item 4</li>
<li data-order="2">item 5</li>
<li data-order="3">item 6</li>
</ul>
</div>
Can ul-two list element order follow ul-one order when I sort ul-one using jQuery Sortable ?
I want get the result like
<div id="list-one">
<ul class="ul-one">
<li data-order="2">item 2</li>
<li data-order="1">item 1</li>
<li data-order="3">item 3</li>
</ul>
</div>
<br />
<div id="list-two">
<ul class="ul-two">
<li data-order="2">item 5</li>
<li data-order="1">item 4</li>
<li data-order="3">item 6</li>
</ul>
</div>
just drag ul-one element
Thanks for the answer
Sorry for misunderstand the question.
This is a working solution. I added id tag to easy call
http://jsfiddle.net/39ZvN/1141/
Try this
<div id="list-one">
<ul class="sort ul-one">
<li data-order="1">item 1</li>
<li data-order="2">item 2</li>
<li data-order="3">item 3</li>
</ul>
</div>
<br />
<div id="list-two">
<ul class="sort ul-two">
<li data-order="1">item 4</li>
<li data-order="2">item 5</li>
<li data-order="3">item 6</li>
</ul>
</div>
$( '.sort li' ).each(function() {
var position = $(this).data('order');
$(this).siblings().eq(position+1).after(this);
});

Hide/show li items based on the category filter clicked

I have a list of li items whose categories have been added to the class. 1 means it is associated with that category, 0 means it is not. When first visiting the page, they will all appear "View All". Clicking "Fruits" will show all items that have "fruits-1" in them. Clicking "View All" will show ALL items.
Filter by:
<ul>
<li>View All</li>
<li>Fruits</li>
<li>Vegetables</li>
<li>Nuts</li>
<li>Desserts & Cakes</li>
</ul>
<ul>
<li class="fruits-1 nuts-0 vegetables-1 desserts-1">Product 1</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-1">Product 2</li>
<li class="fruits-1 nuts-1 vegetables-1 desserts-0">Product 3</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 4</li>
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 5</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 6</li>
<li class="fruits-0 nuts-0 vegetables-0 desserts-1">Product 7</li>
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 8</li>
</ul>
What should I do to these items (add classes or ID's or whatever) to make it so when I click a category, only the ones that belong to that category appear? and the rest are hidden?
Try this : you can use text of clicked anchor to find matching categories and show them. see below code
$(function(){
$('ul li a').click(function(e){
e.preventDefault();
var category = $(this).text().toLowerCase().split("&");
if(category[0]=="view all")
{
$('ul.category li').show();
}
else
{
//hide all categories
$('ul.category li').hide();
$.each(category, function(i, v){
$('ul.category li.'+v.trim()+"-1").show();
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li>View All</li>
<li>Fruits</li>
<li>Vegetables</li>
<li>Nuts</li>
<li>Desserts & Cakes</li>
</ul>
<ul class="category">
<li class="fruits-1 nuts-0 vegetables-1 desserts-1">Product 1</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-1">Product 2</li>
<li class="fruits-1 nuts-1 vegetables-1 desserts-0">Product 3</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 4</li>
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 5</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 6</li>
<li class="fruits-0 nuts-0 vegetables-0 desserts-1">Product 7</li>
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 8</li>
</ul>
$('.links li a').on('click',function(e){
e.preventDefault();
var className = $(this).text().toLowerCase();
$(".content li").not('.' + className).hide();
$(".content li" + "." + className).show();
})
.content li{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="links">
<li>Fruit </li>
<li>Veg </li>
<li>Nuts</li>
<li>Drinks</li>
</ul>
<ul class="content">
<li class="fruit veg nuts drinks">Product 1</li>
<li class="drinks">Product 2</li>
<li class="veg nuts drinks">Product 3</li>
<li class="veg nuts">Product 4</li>
</ul>
Let say you have this
<ul class="listed-values">
<li class="fruit,veg,nuts,drink">Product 1</li>
<li class="drink">Product 2</li>
<li class="veg,nuts,drink">Product 3</li>
<li class="veg,nuts">Product 4</li>
</ul>
and this one
<ul class="filter-ul">
<li>Fruit</li>
<li>Veg</li>
<li>Nuts</li>
<li>Drink</li>
</ul>
Here is jquery code
$(document).ready(function(){
$(".filter-ul li a").click(function(){
var text = $(this).text().toLowerCase();
$('ul.listed-values li').hide();
$('ul.listed-values li').filter(function(){
return $(this).attr('class').indexOf(text) != -1;
}).show();
})
})
Add a data-category attribute to each filter to indicate which category it should display. Then use that in a selector to match the class of the products.
The proper way to separate multiple classes is with spaces, not commas.
$("#filters a").click(function() {
var category = $(this).data("category");
$("#products li").hide();
$("#products li." + category).show();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="products">
<li class="fruit veg nuts drink">Product 1</li>
<li class="drink">Product 2</li>
<li class="veg nuts drink">Product 3</li>
<li class="veg nuts">Product 4</li>
</ul>
Filter by:
<ul id="filters">
<li>Fruit
</li>
<li>Veg
</li>
<li>Nuts
</li>
<li>Drinks
</li>
</ul>
In html classes are separated with spaces not with comma.
html code:
<ul class="products">
<li class="fruit veg nuts drink">Product 1</li>
<li class="drink">Product 2</li>
<li class="veg nuts drink">Product 3</li>
<li class="veg nuts">Product 4</li>
</ul>
<ul>
<li><a href="" class='category'>Fruit</a></li>
<li><a href="" class='category'>Veg</a></li>
<li><a href="" class='category'>Nuts</a></li>
<li><a href="" class='category'>Drinks</a></li>
</ul>
JS Code:
$(function() {
$(".category").on("click", function(e) {
e.preventDefault();
var products = $(".products").find("li");
products.show();
var cat = $(this).text();
products.not('.'+cat.toLowerCase()).hide();
});
});
You can find the working demo here : http://jsfiddle.net/crL054px/
Try this
JS Fiddle is here http://jsfiddle.net/cfzdq7f7/
HTML
<ul>
<li class="fruit veg nuts drink">Product 1</li>
<li class="drink">Product 2</li>
<li class="veg nuts drink">Product 3</li>
<li class="veg nuts">Product 4</li>
</ul>
<ul>
<li class="category">Fruit</li>
<li class="category">Veg</li>
<li class="category">Nuts</li>
<li class="category">Drinks</li>
</ul>
Javascript
$(document).ready(function() {
$(".category").click(function() {
if($(this).html() == "Fruit") {
$(".veg").hide();
$(".nuts").hide();
$(".drink").hide();
$(".fruit").show();
} else if($(this).html() == "Veg") {
$(".fruit").hide();
$(".nuts").hide();
$(".drink").hide();
$(".veg").show();
} else if($(this).html() == "Nuts") {
$(".fruit").hide();
$(".veg").hide();
$(".drink").hide();
$(".nuts").show();
} else if($(this).html() == "Drinks") {
$(".fruit").hide();
$(".nuts").hide();
$(".veg").hide();
$(".drink").show();
}
});
});
CSS
.fruit, .veg, .nuts, .drink {
display:none;
}
.category {
cursor:pointer;
}
Let me know if it is helpful

Float left and right in same UL

I have a unordered list
<ul id="smart-menu">
<li class="left">item 1</li>
<li class="left">item 2</li>
<li class="left">item 3</li>
<li class="right">item 4</li>
<li class="right">item 5</li>
</ul>
I want the items to be displayed horizontal. The items with the left class on the left site and the others on the right site.
I want to use smartmenus, for this reason I need a unordered list.
Here is the plunkr: http://plnkr.co/edit/GhgAWHv78qerLDcKgKDm?p=preview
On the basis of my understanding from your post, this is your desired result
.left{float:left}
.right{float:right}
ul{list-style:none}
<ul id="smart-menu">
<li class="left">item 1</li>
<li class="left">item 2</li>
<li class="left">item 3</li>
<li class="right">item 4</li>
<li class="right">item 5</li>
</ul>
You can use flex-box if you can have a "filler" element between left and right.
ul {
display: flex;
list-style: none;
}
.filler {
flex: 1 0 auto;
}
<ul id="smart-menu">
<li class="left">item 1</li>
<li class="left">item 2</li>
<li class="left">item 3</li>
<li class="filler"></li>
<li class="right">item 4</li>
<li class="right">item 5</li>
</ul>
check out this pen: http://codepen.io/anon/pen/pJpBjq
and here is a guide to flex-box

Categories