We Keep Coding

Show/Hide Tab Arrows to Navigate Additional Tabs on Overflow

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>

A simple vertica menu accordion JavaScript Jquery

I'm trying to make a simple accordion menu
When you click on the menu the submenus are shown:
When you click "A" or "B" or "C", your respective submenu will be displayed
If the submenu of the letter is open, the only way to close it is to click on the letter again
did not get the way to just apply the jquery to the clicked class
https://jsfiddle.net/mafervemg/g0rb9xL1/
$(document).ready(function () {
$(".submenu").slideDown(); // open web there all submenu close
$(".UP").click(function () {
$(".submenu").slideUp();
});
$(".DOWN").click(function () {
$(".submenu").slideDown();
});
});
<p class="UP"> Click Here For Closet Sub Menu</p>
<p class="DOWN">Click Here For Open</p>
<ul class="menu">
<li>A</li>
<li>
<ul class="submenu">
<li>a 1</li>
<li>a 2</li>
<li>a 3</li>
<li>a 4</li>
</ul>
</li>
<li>B</li>
<li>
<ul class="submenu">
<li>b 1</li>
<li>b 2</li>
<li>b 3</li>
<li>b 4</li>
</ul>
</li>
<li>C</li>
<li>
<ul class="submenu">
<li>c 1</li>
<li>c 2</li>
<li>c 3</li>
<li>c 4</li>
</ul>
</li>
</ul>

You need to change a bit in your html and js
Have a look at Js below:
$(document).ready(function () {
$("submenu").slideDown(); // open web there all submenu close
$(".toggle").addClass('open');
$(".UP").click(function () {
$(".submenu").slideUp();
$(".toggle").removeClass('open');
});
$(".toggle").click(function(){
if($(this).hasClass("open")){
$(this).parent().find(".submenu").slideUp();
} else {
$(this).parent().find(".submenu").slideDown();
}
$(this).toggleClass('open');
})
$(".DOWN").click(function () {
$(".submenu").slideDown();
$(".toggle").addClass('open');
});
});
and change html
<p class="UP"> Click Here For Closet Sub Menu</p>
<p class="DOWN">Click Here For Open</p>
<ul class="menu">
<li><a href="#" class='toggle'>A</a>
<ul class="submenu">
<li>a 1</li>
<li>a 2</li>
<li>a 3</li>
<li>a 4</li>
</ul>
</li>
<li><a href="#" class='toggle'>B</a> <ul class="submenu">
<li>b 1</li>
<li>b 2</li>
<li>b 3</li>
<li>b 4</li>
</ul></li>
<li><a href="#" class='toggle'>C</a> <ul class="submenu">
<li>c 1</li>
<li>c 2</li>
<li>c 3</li>
<li>c 4</li>
</ul></li>
</ul>

Error:$ is not defined is because jQuery has not been included properly
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>

I slightly changed your code, Hope you can understand
$(document).ready(function() {
$("submenu").slideDown(); // open web there all submenu close
$('.toggle-menu').addClass('opened');
$(".UP").click(function() {
$(".submenu").slideUp();
$('.toggle-menu').removeClass('opened').addClass('closed');
});
$(".DOWN").click(function() {
$(".submenu").slideDown();
$('.toggle-menu').removeClass('closed').addClass('opened');
});
$('.toggle-menu').click(function() {
if ($(this).hasClass('opened')) $(this).removeClass('opened').addClass('closed').siblings('.submenu').slideUp();
else $(this).removeClass('closed').addClass('opened').siblings('.submenu').slideDown();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="UP"> Click Here For Closet Sub Menu</p>
<p class="DOWN">Click Here For Open</p>
<ul class="menu">
<li>
A
<ul class="submenu">
<li>a 1</li>
<li>a 2</li>
<li>a 3</li>
<li>a 4</li>
</ul>
</li>
<li>
B
<ul class="submenu">
<li>b 1</li>
<li>b 2</li>
<li>b 3</li>
<li>b 4</li>
</ul>
</li>
<li>
C
<ul class="submenu">
<li>c 1</li>
<li>c 2</li>
<li>c 3</li>
<li>c 4</li>
</ul>
</li>
</ul>

jQuery First Item for Each ID

I have two seperate lists and each of the list should add class active. Here is my HTML:
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
CSS
.active {
color: red;
}
JavaSript
$(document).ready(function () {
$("[id^='list'] .item").first().addClass("active");
});
As you can see only the #list1's first item getting the active class. How can i achive give the both list's first item active class.
Here is the fiddle: https://jsfiddle.net/iCromwell/rkvzhebd/1/

Try looping over the parent, and then target first .item
$(document).ready(function () {
$("[id^='list']").each(function(){
$(this).find('.item').first().addClass("active");
});
});
Fiddle

You have to loop through the list, the way you are approaching it, the class objects are being stacked in one selection list, and the first() is setting class to the first one only:
$(document).ready(function () {
$("[id^='list']").each(function(){
$(this).find('.item').first().addClass("active");
})
});
https://jsfiddle.net/rkvzhebd/4/

You can use jQuery first-child filter, such as:
$("ul li:first-child").addClass("active");

:first or .first() looks for first element in the matched set. So, that is functioning correctly. While in your case you need to target all the first child elements in the matched parents.
Use :first-child pseudoselector instead:
$('[id^="list"] .item:first-child').addClass('active');
.active{color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>

first() filter your result and return only first element - so only one element is selected. Use :first-child pseudo selector to achieve result.
$(document).ready(function () {
$("[id^='list'] .item:first-child").addClass("active");
});
$(document).ready(function () {
$("[id^='list'] .item:first-child").addClass("active");
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>

You can use $("[id^='list']").find('.item:first').addClass("active");
Explanation:
$("[id^='list']") will return a list of uls
Then in this list, you can search using .find. Since you only need first element, add :first selector
Add class to all elements fetched
$(document).ready(function() {
$("[id^='list']").find('.item:first').addClass("active");
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>

Consider using this code below:
$(document).ready(function () {
$('[id^="list"]').each(function(){
$(this).find('.item').first().addClass('active');
});
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>

You can use first-child selector on each ul instead of id^=list
$("ul li:first-child").addClass("active");
.active{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>

Use this:
$(document).ready(function () {
$("ul[id^='list'] :first-child").addClass("active");
});
Fiddle here:
https://jsfiddle.net/mxautp3L/

If you want to do it with javascript you can do it like this,
Here, we are selecting both the list ul tag $("[id^='list']") which returns an array of both list now we can iterate over the array using jquery each() tag which call the function sent in argument with the this attribute pointing to the each item in the array.
Now, we can add the class .active by simply doing $(this).find('item').first().addclass('active');
$(document).ready(function () {
$('[id^="list"]').each(function(){
$(this).find('.item').first().addClass('active');
});
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
link to fiddle
The whole thing can be done without javascript and using only css as follows
ul[id^='list'] :first-child {
color: red;
}
<ul id="list1">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
<ul id="list2">
<li class="item">Object 1</li>
<li class="item">Object 2</li>
<li class="item">Object 3</li>
</ul>
link to fiddle

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