We Keep Coding

Link 'active' state on two separate HTML elements

I'm trying to mirror the 'active' state on two unordered lists using jquery/javascript. The first list is a slider/carousel and the 2nd list will be navigation links.
E.g.
<ul class="carousel">
<li class="active">Slider 1</li>
<li>Slider 2</li>
<li>Slider 3</li>
<li>Slider 4</li>
</ul>
<ul class="nav">
<li class="active"><a href'#">Link 1</a></li>
<li><a href'#">Link 2</a></li>
<li><a href'#">Link 3</a></li>
<li><a href'#">Link 4</a></li>
</ul>
So, the idea is that when the active state of the <li> in the carousel changes, so does the corresponding <li> in the 'nav' list.
Any help would be greatly appreciated.

I've created a working example here: https://jsfiddle.net/aj68mogk/14/
It was not working for you on JSFiddle because the script does not change the carousels .active class, thats done by the wp plugin.
I've put in a link to "fake" the action the plugin does (changing the carousel state).
There was a mistake in the part of code wich gets the index of the active carousel li.
So please ignore the code of my first answer and take the one of the JSFiddle. But dont forget to remove the fake link and its click function when using this on your page
Next thing is you have to select a Jquery version on JSFiddle, otherwise the $(document).ready() function is never entered, because its not pure js.
Hope this helps, if there are questions left, just leave a comment

I worked something out from several SO posts:
$(document).ready(function() {
$('.carousel').bind('DOMSubtreeModified', function(e) {
$(".nav>li.active").removeClass("active");
$(".nav>li").eq($(".carousel").index($("active"))).addClass("active");
});
});
Just add this to your Javascript and its done.
What it does: First you bind any DOM-Changes (you've said it's changed by a wp plugin or so) in the .carousel element to a new function. Inside the function you remove the active li tag, then you pick the index of the active carousel element and add the .active tag to the nav element with the index from the .carousel
Hope this helps
EDIT: There was a mistake in the code, some unneccesary line i kept in from testing. Please take the updated code

If you don't have access to the code of Wordpress plugin you have no direct way to do it , but can use a setTimeOut function. This is not the cleanest of the approaches , but I guess there is no other option.
setInterval(function() {
if ($(".carousel li").hasClass("active")) {
var active = $(".carousel").find(".active");
var index = $(active).index();
index = index + 1;
$(".nav li:nth-child(" + index + ")").addClass("active");
}
}, 1000);
.active {
color: red;
}
.active a {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="carousel">
<li class="">Slider 1</li>
<li class="active">Slider 2</li>
<li>Slider 3</li>
<li>Slider 4</li>
</ul>
<ul class="nav">
<li class="">
Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>Link 4
</li>
</ul>

Simple Dropdown with arrows in jquery

I'm trying to have a simple dropdown with product listings which will filter the products on click, so the dropdown is Onclick.
Issue -
I have multiple products in a category, i'm trying to have a dropdown which will collapse other products which are not used on click.
The current script i have collapses everything and opens it up again and not able to attach a class to it to show downarrow when opened.
It is way too buggy is there any other way to achieve this or a tutorial / script or something.
Here is the jsfiddle.
$('.topnav li a').click(function(){
if($(this).parent().children().is('ul'))
{
$(this).parent().find('ul').slideToggle();
}
else
{
if($(this).parent().parent().is('ul.topnav'))
{
$('.topnav').find('ul').slideUp();
}
else
{
$('.topnav').find('ul').slideUp();
$(this).parent().parent().slideDown('slow');
}
}
});

i dont have specific solution for your problem,
but still you can take a look at this Select2 jquery plugin, you can have many facilities like searching and displaying image, just check this link Select2 - DropDown
hope this will help you...

please look below link
http://www.script-tutorials.com/click-action-multilevel-css3-dropdown-menu/
You can check demo over there for multilevel dropdown menu.

Changed a little bit of code(html and script) from your jsfiddle see if that is what you are looking for
http://jsfiddle.net/nextg_tech/4N3wA/
script
$('.topnav li a').click(function(){
if($(this).parent().children().is('ul'))
{
$(this).parent().find('ul').slideToggle();
}
else
{
if($(this).parent().parent().is('ul.topnav'))
{
$('.topnav').find('ul').slideUp();
}
else
{
$('.topnav').find('ul').slideUp();
$(this).parent().parent().slideDown('slow');
}
}
});
html
<div class="container">
<ul class="productfilters topnav">
<li>All</li>
<li class="hasarrow">
Product 1
<ul class="ddone">
<li class="hasarrow">Sub Product 1
<ul class="ddone">
<li>Sub 2 Product 1</li>
<li>Sub 2 Product 1</li>
<li>Sub 2 Product 1</li>
<li>Sub 2 Product 1</li>
</ul>
</li>
<li>Sub Product 2</li>
<li>Sub Product 3</li>
</ul>
</li>
<li class="hasarrow">Product 2
<ul class="ddone">
<li>Sub Product of 2</li>
<li>Sub Product of 2</li>
<li>Sub Product of 2</li>
<li>Sub Product of 2</li>
</ul>
</li>
</ul>
</div>

Making a dropdown list in html/jquery, without following any tutorials

First of all, i know that there are tons of tutorials out there to show how to make a dropdown list, but i wanted to try myself with my limited knowledge to make a very simple one, and i am aware that i am probably doing it wrong, but still i wanna try it.
So this is my problem now, i have set up ul and li in html and i have setup a simple jquery code that it will slideDown the submenu when mouse enters and slideUp the submenu when mouse leaves, but it doesn't work correctly at all.
Code:
<div style="width:200px; height:400px;">
<ul id="ul" class="menu" style="border:thin solid #090;">
<li id="li">Test
<ul id="ull">
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
<li id="li">Test 2A
<ul id="ull">
<li>Test 3A</li>
<li>Test 4A</li>
</ul>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#ul ul").css({"color":"red","font-size":"30px"}).hide();
});
$("#li").mouseenter(function(){
$("#ull").slideDown(400).show();
});
$("#li").mouseleave(function(){
$("#ull").slideUp(400).hide(100);
});
</script>
All this, is inside one html, i am not using anything else, expet a CSS where the class "menu" is just this display:inline-block;
The problem is that dropdown menu doesn't work as it should. When i move my mouse over the Test the sub-menu appears, but this doesn't happen at Test 2A, plus when the dropdown list "drops", Test 2A follows below it aswell.
I can't explain the problem easily so i setup a jsfiddle which will help you understand.
Once again, i know that this is not right and i should have done it by using some other way, but i wanted to try using the few things i've learned so far to make a simple dropdown list.
Thanks in advance.

Id must be unique.
<li id="li">Test
<li id="li">Test 2A
Change to different id's or use a class
Corrected Fiddle
And do not take li and ul as Id's or classes.Those are reserved key words.Creates mess.

In my opinion, the best solution is to change id at one of the two minor ul and add a row in your function that call it.
<div style="width:200px; height:400px;">
<ul id="ul" class="menu" style="border:thin solid #090;">
<li id="li">Test
<ul id="ull">
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
<li id="li">Test 2A
<ul id="lull">
<li>Test 3A</li>
<li>Test 4A</li>
</ul>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#ul ul").css({"color":"red","font-size":"30px"}).hide();
});
$("#li").mouseenter(function(){
$("#ull").slideDown(400).show();
$("#lull").slideDown(400).show();
});
$("#li").mouseleave(function(){
$("#ull").slideUp(400).hide(100);
$("#lull").slideUp(400).hide(100);
});
</script>

jQuery .click() .show() function issues

Could anyone please let me know what i'm doing wrong.
I have:
//My HTML
<div>
<ul>
<li id="test">Main Item 1</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li>Main Item 2</li>
<li>Main Item 3</li>
</ul>
</div>
//My CSS
.list-in-list {
display:none;
}
//My jQuery
$(document).ready(function() {
$('#test').click(function() {
alert("hello");
});
});
My final goal is to show that none displayed content if you press a list item, so that it expands neatly. However, i can't seem to get that alert() appearing in any way. Should i use an id for all list items in the main list, or is it enough with a class?
/W

you can add .next function to show next ul for any li curreny click by user. you have to change id test to one class name to make effect in all click of main li
HTML would be like
<div>
<ul>
<li class="main">Main Item 1</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li class="main" >Main Item 2</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li class="main">Main Item 3</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</ul>
</div>
and JQuery function is below
$(document).ready(function() {
$('.main').click(function() {
$(this).next(".list-in-list").slideToggle();
});
});
for detail you can check link

Should i use an id for all list items in the main list, or is it enough with a class?
IDs are unique. Your JavaScript code will not work properly if you have multiple identical IDs. If you're planning on adding a similar attribute to all of your list items you'd use a class in this case (and reference it with . instead of #). In this case you'd call the click function using:
$('li.myClass').click(...);
If you only have one list, however, you can simply add the ID to the ul and use the click function as:
$('ul#myId > li').click(...);
Note that it would be marginally quicker with the classes in this case.
You'd then reference your inner ul using:
$('li.myClass > ul.list-in-list');
Or, depending on which of the above you went with:
$('ul#myId > li > ul.list-in-list');
(You'd use > here to select only the direct child. If you used ul#myId li you'd also be selecting the li elements which belong to any inner ul)

Your code works fine I do believe you have not included Jquery on your page - or maybe the path to it is not valid. Check your network tab to see if you get an http error retrieving jquery.
You can show the hidden li by doing the following:
$(document).ready(function() {
$('#test').click(function(e) {
$(this).find('.list-in-list').show();
});
});
Your code works fine:
Demo
In this case classes would be better than ids because Id's have to be unique on your page. You can use classes like in the demo below by adding a class to your outer li elements. Just change the binding from #test to whatever class you give your li elements.
$('.clickAbleLi').click(function(e) {
$(this).find('.list-in-list').show();
});
Demo

You close your </li> tag before your "list-in-list". You should close your </li> tag after your inside list ;) Like this :
<div>
<ul>
<li id="test">Main Item 1
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Main Item 2</li>
<li>Main Item 3</li>
</ul>
</div>

It sholud work but Try moving the ID attribute to the A instead of LI if you experience problems

List doesn't want to toggle

I have a (semantically incorrect) HTML like this:
<ul>
<li class="year">2009</li>
<li>Project 1</li>
<li>Project 2</li>
<li>Project 3</li>
</ul>
<ul>
<li class="year">2008</li>
<li>Project 4</li>
<li>Project 5</li>
<li>Project 6</li>
</ul>
<ul>
<li class="year">2007</li>
<li>Project 7</li>
<li>Project 8</li>
<li>Project 9</li>
</ul>
and a jQuery script like this:
$(function() {
$('.year').click(function() {
$('ul').find('li:not(.year)').slideUp('fast');
$(this).closest('ul').find('li:not(.year)').toggle('fast');
})
})
It works almost as needed. By default all ul li-s are hidden except those having the class year. When the user clicks on a year, any opened year's links slide up and the clicked year's links slide down. The problem is that if I click on a year when it's opened it first slides up (being intercepted by the first line) and then slides down via the toggle line. I'd like it to stay closed with the slide up line not intercepting the currently clicked year.
Hope this makes sense.
Any help appreciated.

May be you should use the :hidden or :visible selector to distinguish which are already shown.
$(function() {
$('.year').click(function() {
$('ul').find('li:not(.year)').slideUp('fast');
$(this).closest('ul').find('li:not(.year):hidden').toggle('fast');
})
})

In therms of the :not is it not true that you can only use filter as opposed to find expressions in here e.g. :not(:blah) or :not([blah] but not :not(.blah)?