We Keep Coding

toggle menu with JavaScript. Target multiple variables with 1 click function

I am trying to make a menu that collapses on click.
I also want to add some more changes on that same function.
For instance I want to change the background of another object.
In this snippet you can see it works on only the first link. The other toggleable link is not targeted.
var pill = document.querySelector(".navpill");
var sub = document.querySelector(".submenu");
pill.onclick = () => {
sub.classList.toggle("collapse");
pill.classList.toggle("active");
}
.mainmenu {
background-color: #1f1f1f;
}
.navpill {
padding: 15px;
}
.navpill.active {
background: red;
}
.navpill a {
text-decoration: none;
color: white;
}
.submenu {
display: none;
}
.submenu.collapse {
display: block;
}
<div>
<ul class="mainmenu">
<li class="navpill">Link collapse 1
<ul class="submenu">
<li class="navpill">sub Link 1</li>
<li class="navpill">sub Link 1</li>
<li class="navpill">sub Link 1</li>
<li class="navpill">sub Link 1</li>
</ul>
</li>
<li class="navpill">Link collapse 2
<ul class="submenu">
<li class="navpill">sub Link 1</li>
<li class="navpill">sub Link 1</li>
<li class="navpill">sub Link 1</li>
</ul>
</li>
<li class="navpill">no link</li>
<li class="navpill">no link</li>
</ul>
</div>
From a previous answer I got this piece of code which makes it work on all the links, but I have no idea how to add more var and toggles to the function.
var pills = document.querySelectorAll(".expand");
pills.forEach(function(pill) {
pill.onclick = () => {
var sub = pill.querySelector(".submenu");
sub.classList.toggle("collapse");
}
});
I tried adding this to the code but it does not work.
var navpill = pill.querySelector(".navpill");
navpill.classList.toggle("active");
If possible I would also like a way of clearing what has been done when clicked on the next submenu.
If I use the code above. It stays open when I click on the second link and then they are both open. I want the first one to close if the second is clicked.

I think this is probably closer to what you want.
(It's unclear if you wanted the submenu items to be highlighted when they're clicked - currently, clicking them just collapses the menu anyway so you wouldn't see. Also I removed the hrefs because they aren't adding anything useful.)
var pills = document.querySelectorAll(".expand");
var subs = document.querySelectorAll(".submenu");
pills.forEach(function(pill) {
pill.addEventListener("click", function() {
var sub = pill.querySelector(".submenu");
var alreadyOpen = false;
if (sub.classList.contains("collapse")) alreadyOpen = true;
pills.forEach(function(pill2) {
pill2.classList.remove("active");
});
subs.forEach(function(sub2) {
sub2.classList.remove("collapse");
});
if (!alreadyOpen) {
sub.classList.toggle("collapse");
this.classList.add("active");
}
});
});
.expand.active {
background-color: red;
}
.expand.active > .submenu
{
background-color: #1f1f1f;
}
.mainmenu {
background-color: #1f1f1f;
}
.navpill {
padding: 15px;
color: white;
}
.submenu {
display: none;
}
.submenu.collapse {
display: block;
}
<div>
<ul class="mainmenu">
<li class="navpill expand">Link collapse 1
<ul class="submenu">
<li class="navpill">sub Link 1</li>
<li class="navpill">sub Link 1</li>
<li class="navpill">sub Link 1</li>
<li class="navpill">sub Link 1</li>
</ul>
</li>
<li class="navpill expand">Link collapse 2
<ul class="submenu">
<li class="navpill">sub Link 1</li>
<li class="navpill">sub Link 1</li>
<li class="navpill">sub Link 1</li>
<li class="navpill">sub Link 1</li>
</ul>
</li>
<li class="navpill">no link</li>
<li class="navpill">no link</li>
</ul>
</div>

Animate second level bullet points in slidify

I am trying to get the second (lower) level bullet points in io2012 to animate separately from their parent bullet point, like this:
>* First level animates by itself
>+ Second level then animates by itself
>* Another first level animates by itself
I've tried several workarounds with HTML like using >* in place of >+ while attempting to indent the bullet with <div style="padding-left: 1em">>* Second level animated by itself.
However this just indents the text but not the bullet point. My experimentation with <li style="padding-left: 1em">...</li> similarly failed.
If there is no HTML solution, does the solution involve either of CSS or JavaScript?

If you are willing to go with a slightly hacky workaround, I have had success inserting .fragment at the start of paragraphs and bullets that I wanted to animate (some other things with my slides were conflicting with the >- shortcut, though I still have not figured out what).
In any case, this should work, even if it is a bit kludgy.
- .fragment First level animates by itself
- .fragment Second level then animates by itself
- .fragment Another first level animates by itself
(.fragment adds a div class "fragment" to the following paragraph or item)

If you want a sub level menu to increment, you could set a counter-increment in the css like demonstrated in the following snippet:
ol {
counter-reset: item
}
li {
display: block;
}
li:before {
content: counters(item, ".")" ";
counter-increment: item
}
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two</li>
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</ol>
</li>
<li>four</li>
</ol>
However if numerical lists is not what you had in mind, there are a number of ways you can increment a list using various list-style types
h2.title {
font-size: 20px;
font-weight: 800;
margin-left:-20px;
padding: 12px;
counter-increment: ordem;
}
li.heading {
font-size: 16px;
font-weight: bold;
padding: 12px;
list-style-type:none;
}
.bullet {
counter-reset: bullet;
padding-left: 12px;
}
.bullet li {
list-style-type: none;
}
.bullet li:before {
counter-increment: bullet;
content: counter(ordem)"." counter(bullet)" ";
}
ol.none {
list-style:none!important
}
li.s2sub::before {
counter-increment:none!important;
content:none!important;
}
li.s2sub {
list-style:upper-alpha;
}
li.s3sub::before {
counter-increment:none!important;
content:none!important;
}
li.s3sub {
list-style-type:circle;
}
li.roman::before {
counter-increment:none!important;
content:none!important;
}
li.roman {
list-style:lower-roman inside;
}
<body>
<ol>
<h2 class="title">Section 1</h2>
<li class="heading">Heading 1</li>
<ol class="bullet">
<li>text 1 one</li>
<li>text 1 two</li>
<li>text 1 three</li>
<li>text 1 four</li>
</ol>
<li class="heading">Heading 2</li>
<ol class="bullet">
<li class="roman">Item 1</li>
<li class="roman">Item 2</li>
<li class="roman">Item 3</li>
</ol>
<h2 class="title">Section 2</h2>
<ol class="bullet">
<li>First item
<ol>
<li class="s2sub">First subitem</li>
<li class="s2sub">Second subitem</li>
</ol>
</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h2 class="title">Section 3</h2>
<ol class="bullet">
<li>First item
<ol>
<li class="s3sub">First subitem</li>
<li class="s3sub">Second subitem</li>
</ol>
</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</ol>
</body>
Hope this helps

CSS and jQuery universal tree menu

I want to create universal tree menu, with ul li ul. And I've made something like this using just CSS:
CSS
.category-list {
}
.category-list li ul {
display: none;
}
.category-list li:hover > ul {
display: block;
}
HTML
<ul class="category-list">
<li>
Category 1
<ul>
<li>Sub-category 1</li>
<li>Sub-cateagory 1</li>
<li>Sub-category 1</li>
</ul>
</li>
<li>
Category 2
<ul>
<li>Sub-category 2</li>
<li>Sub-category 2</li>
<li>Sub-category 2</li>
</ul>
</li>
</ul>
https://jsfiddle.net/usz9ycmj/1/
--
And I want to make similar effect, but on click, so just current clicked tab displays its parent content.
Even more important for me is the ability to add and remove class on specific action:
.category-list li.current -- while is currently clicked (active)
.category-list li -- removed while different li is clicked (active)
Just, the trigger li has two different states for active and inactive. It changes the colors and arrow from closed to opened to give it a look of a tree menu - I bet You get the point.
I want the simple jquery code, if someone has time to help. feel welcome.

Here is a working code.
Please read the comments and let me know if something not clear.
// listen to the click event
var all_items = $('.category-list>li').click(function(event) {
// stop the propagation - this will abort the function when you click on the child li
event.stopPropagation();
var elm = $(this);
// remove the class from all the items
all_items.not(elm).removeClass('current');
// add class if it's not the current item
elm.toggleClass('current', !elm.is('.current'));
});
.category-list {
}
.category-list li ul {
display: none;
}
.category-list li.current > ul {
display: block;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<ul class="category-list">
<li>
Category 1
<ul>
<li>Sub-category 1</li>
<li>Sub-category 1</li>
<li>Sub-category 1</li>
</ul>
</li>
<li>
Category 2
<ul>
<li>Sub-category 2</li>
<li>Sub-category 2</li>
<li>Sub-category 2</li>
</ul>
</li>
</ul>
http://jsbin.com/tocewe/edit?html,css,js

Parsing JSON with jQuery Mustache template [duplicate]

I have a list, and each item is linked, is there a way I can alternate the background colors for each item?
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>

How about some lovely CSS3?
li { background: green; }
li:nth-child(odd) { background: red; }

If you want to do this purely in CSS then you'd have a class that you'd assign to each alternate list item. E.g.
<ul>
<li class="alternate">Link 1</li>
<li>Link 2</li>
<li class="alternate">Link 3</li>
<li>Link 4</li>
<li class="alternate">Link 5</li>
</ul>
If your list is dynamically generated, this task would be much easier.
If you don't want to have to manually update this content each time, you could use the jQuery library and apply a style alternately to each <li> item in your list:
<ul id="myList">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
And your jQuery code:
$(document).ready(function(){
$('#myList li:nth-child(odd)').addClass('alternate');
});

You can achieve this by adding alternating style classes to each list item
<ul>
<li class="odd">Link 1</li>
<li>Link 2</li>
<li class="odd">Link 2</li>
<li>Link 2</li>
</ul>
And then styling it like
li { backgorund:white; }
li.odd { background:silver; }
You can further automate this process with javascript (jQuery example below)
$(document).ready(function() {
$('table tbody tr:odd').addClass('odd');
});

This is set background color on even and odd li:
li:nth-child(odd) { background: #ffffff; }
li:nth-child(even) { background: #80808030; }

Try adding a pair of class attributes, say 'even' and 'odd', to alternating list elements, e.g.
<ul>
<li class="even">Link 1</li>
<li class="odd">Link 2</li>
<li class="even">Link 3</li>
<li class="odd">Link 4</li>
<li class="even">Link 5</li>
</ul>
In a <style> section of the HTML page, or in a linked stylesheet, you would define those same classes, specifying your desired background colours:
li.even { background-color: red; }
li.odd { background-color: blue; }
You might want to use a template library as your needs evolve to provide you with greater flexibility and to cut down on the typing. Why type all those list elements by hand?

Since you using standard HTML you will need to define separate class for and manual set the rows to the classes.

You can do it by specifying alternating class names on the rows. I prefer using row0 and row1, which means you can easily add them in, if the list is being built programmatically:
for ($i = 0; $i < 10; ++$i) {
echo '<tr class="row' . ($i % 2) . '">...</tr>';
}
Another way would be to use javascript. jQuery is being used in this example:
$('table tr:odd').addClass('row1');
Edit: I don't know why I gave examples using table rows... replace tr with li and table with ul and it applies to your example

If you use the jQuery solution it will work on IE8:
jQuery
$(document).ready(function(){
$('#myList li:nth-child(odd)').addClass('alternate');
});
CSS
.alternate {
background: black;
}
If you use the CSS soloution it won't work on IE8:
li:nth-child(odd) {
background: black;
}

You can by hardcoding the sequence, like so:
li, li + li + li, li + li + li + li + li {
background-color: black;
}
li + li, li + li + li + li {
background-color: white;
}

Display Items in a news sticker

I am trying to accomplish some different thing which is something similar to the feature of news ticker. Before I ask this I tried to get it work using different different news ticker jquery plugins. But still no Luck.
This is markup I am using and let me to explain my requirement through it.
<div class="container">
<ul class="feeds" id="feeds">
<li class="category">category 01</li>
<li class="category-item">Sub category 01</li>
<li class="category-item">Sub category 02</li>
<li class="category-item">Sub category 03</li>
<li class="category-item">Sub category 04</li>
<li class="category">category 02</li>
<li class="category-item">Sub category 01</li>
<li class="category-item">Sub category 02</li>
<li class="category-item">Sub category 03</li>
<li class="category-item">Sub category 04</li>
</ul>
</div>
I need to display these list item like a news stick in a horizontal bar. How I need to display it is one category item with following two subcategory items in a row. If particular category have more than two subcategory then I need to display next two subcategory items and like wise. When displaying subcategory secondly the main category name should be still display in the row.
Finally I tried with Jquery Advance News Ticker plugin. It was close but not 100%
$('#feeds').newsTicker({
row_height: 40,
max_rows: 1,
duration: 3000,
pauseOnHover: 0
});
So anybody can tell me how to accomplish this with javascript or can I know is there any jquery pluging to do this.
UPDATE : CSS -
> .container {
background: #1e1e1e;
height: 40px;
.feeds {
list-style: none;
float: left;
margin: 0;
padding: 0;
display: table;
> li {
display: inline-block;
color: #FFFFFF;
display: inline-block;
padding-right: 50px;
//display: table-cell;
vertical-align: middle;
padding-top: 5px;
}
> li.category {
background: #a11041;
margin: 7px 30px 0;
padding: 3px 10px;
}
}
}
Hope somebody will help me out regarding this.
Any idea would be greatly appreciated.
Thank you.

I can't find an existing solution for what you want, but if you are planning on writing your own solution this may help.
It uses a somewhat different HTML structure, but I think this is what you're trying to achieve.
HTML:
<div id="feed">
<ul>
<li>
Category 1
<ul>
<li>Subcategory 1</li>
<li>Subcategory 2</li>
<li>Subcategory 3</li>
</ul>
</li>
<li>
Category 2
<ul>
<li>Subcategory 1</li>
<li>Subcategory 2</li>
<li>Subcategory 3</li>
<li>Subcategory 4</li>
<li>Subcategory 5</li>
<li>Subcategory 6</li>
<li>Subcategory 7</li>
<li>Subcategory 8</li>
</ul>
</li>
</ul>
</div>
With CSS you make sure that the viewport (#feed) only shows one category name and two subcategories. Then, with JavaScript, you allow the user to go to the next two subcategories by changing the top or margin-top of the sub-ul-element. If the user reached the bottom of subcategories, it goes to the next category. If the user reached the last category, it goes to the first category again.
Working example: http://jsfiddle.net/Ln73X/1/

I never get why people like to use plugins so much, it just uses a lot of space (size vise)!
anyways I had to do this a while ago, I didn't use a plugin, just pure css and jQuery. this example provides an always animating news sticker. if you want an example like the one you provided you can easily implement it, or if it is too difficult for you let me know and I'll provide you one.
first you have to set the overflow of the container to hidden in css and then put the ul inside another div (let's call it #box).
and as for your jQuery:
$('#box ul li:first-child').animate({marginTop:'-110px',paddingTop:'0px'},4980,'linear');
setTimeout(function(){
$('#box ul li:first-child').finish().appendTo('#box ul').css('margin-top','0px').css('padding-top','10px');
},5000);
setInterval(function(){
$('#box ul li:first-child').animate({marginTop:'-110px',paddingTop:'0px'},4980,'linear');
setTimeout(function(){
$('#box ul li:first-child').finish().appendTo('#box ul').css('margin-top','0px').css('padding-top','10px');
},5000);
},5020);
the marginTop in the animation should be the negative of the height of your li. (in this example it is -110px)
here is the demo:
http://codepen.io/anon/pen/ClzLy