Develop Reference

Multiple Accordion Nesting Using Vanilla JavaScript

I am trying to achieve multiple accordion lists with dynamic height concepts, I am debugging for hours and not able to understand where I went wrong. The code I have tried so far.
The scenario I was trying on is when the main categories are clicked with the dynamic height it will show off and that same scenario will happen for its sub-categories also. I am stuck on how to take the inner sibling method.
Note: I am trying to achieve this in vanilla javascript.
Any help will be appreciated !!
var headers = document.querySelectorAll('.first-ul-1 .ul, .sub-ul-1-a ul');
window.addEventListener("DOMContentLoaded", () => {
for (var i = 0; i < headers.length; i++) {
headers[i].addEventListener('click', openAccordion);
}
function openAccordion(e) {
var parent = this.parentElement;
var article = this.nextElementSibling;
if (!parent.classList.contains('open')) {
parent.classList.add('open');
article.style.maxHeight = article.scrollHeight + 'px';
} else {
parent.classList.remove('open');
article.style.maxHeight = '0px';
}
}
.drop-down-menu,
.sub-ul-2-a{
max-height: 0px;
overflow: hidden;
transition: max-height 350ms ease-in-out;
}
<nav id="navigation" class="main-nav">
<ul class="main-nav-list first-ul-1">
<li>
<p href="#">Types</p>
<div class="drop-down-menu">
<div class="menu-container">
<ul class="main-nav-list sub-ul-1-a">
<li>
<a href="#">Type
of season</a>
<ul class="main-nav-list sub-ul-2-a">
<li>
<a href="#">Summer
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>

I have an unordered list and i want to scroll to clickable element

This list is horizontal in the mobile view - using display:inline-block and its scrollable.
<ul>
<li>Home<li>
<li>Accounts<li>
<li>Contact US<li>
<li>About us</li>
<li>Last button</li>
</ul>
You can't see the last button because you need to scroll to it, what I want to happen is when you click on " About US " it scrolls to its location and then you will see " Last Button "
Basically scroll in the X axis to the element clicked.

You can use an anchor to "focus" the div. I.e:
<ul id="ulList">
<li>Home<li>
<li>Accounts<li>
<li>Contact US<li>
<li id="about">About us</li>
<li>Last button</li>
</ul>
and then use the following javascript:
location.href = "#";
location.href = "#about";
You can use a library if needed Check jQuery.ScrollTo,
Edited :
var about= document.getElementById('about');
var top = about.offsetTop;
// Now we tell the div to scroll to that position using scrollTop:
document.getElementById('ulList').scrollTop = top;

Try using bootstrap scrolling Nav module:
JavaScript
<script>
$(".navbar-nav li a").click(function(event) {
if (!$(this).parent().hasClass('dropdown'))
$(".navbar-collapse").collapse('hide');
}); </script>
<ul id="ulList" class="navbar-nav ml-auto" style="z-index:1;">
<li>Home<li>
<li>Accounts<li>
<li>Contact US<li>
<li id="about">About us</li>
<li>Last button</li>
</ul>
<div class="about" id="ulList">
<div class="container">
test
</div>
</div>

Javascript: Issue when using .click method

Firsty here is the html which corresponds with the code
<div class="grid_12">
<ul id="categories">
<li class="filter">Categories:</li>
<li id="ny"> New York</li>
<li id="sc">Spanish Cities</li>
<li id="gv">A Glasgow Viewpoint</li>
<li id="sch">Some Churches</li>
<li id="bh">Barcelona Highlights</li>
<li id="mp">Martin’s Pictures</li>
</ul>
</div>
<!-- end .grid_12 - CATEGORIES -->
The idea here is that when each of these links are pressed a var id is changed to the correct number depending on which is clicked
Here is the code i have used to do this
if (nyView.click) {
id = 1;
} else if (scView.click) {
id = 2;
} else if (gvView.click) {
id = 3;
} else if (schView.click) {
id = 4;
} else if (bhView.click) {
id = 5;
} else if (mpView.click) {
id = 6;
}
the view vars are simply locators to find the correct div element so they are done like this
nyView = document.getElementById('ny');
scView = document.getElementById('sc');
gvView = document.getElementById('gv');
schView = document.getElementById('sch');
bhView = document.getElementById('bh');
mpView = document.getElementById('mp');
My issue is that no matter the element i clicked i only get the orginal... for me it seems like the code groups it all together so when u click the ny link it takes this as all other divs are clicked. This was tested as when i clicked the ny link innerHTML in all divs was executed... i am completely stuck as to why this is so would greatly appreciate the help

You don't need inline event handlers
You can use event delegation
Use index to get the clicked element index in ul
HTML
<div class="grid_12">
<ul id="categories">
<li class="filter">Categories:</li>
<li id="ny"> New York
</li>
<li id="sc">Spanish Cities
</li>
<li id="gv">A Glasgow Viewpoint
</li>
<li id="sch">Some Churches
</li>
<li id="bh">Barcelona Highlights
</li>
<li id="mp">Martin’s Pictures
</li>
</ul>
</div>
Javascript
var id;
$('#categories').on('click', 'li>a', function () {
id = $(this).closest('li').index();
});
Demo: http://jsfiddle.net/tusharj/q9xbqck0/3/

When you say nyView.click you are referring to the function definition and that would always be treated as true value, so you would get first condition always.
var id;
$('#categories').on('click', 'li', function(){
id = this.id; // id = $(this).index();
});

My approach is very different, maybe someone else can work with your logic. I can't. My approach:
<div class="grid_12">
<ul id="categories">
<li class="filter">Categories:</li>
<li class="licategory" data-val="ny" data-id="1"> New York</li>
<li class="licategory" data-val="sc" data-id="1">Spanish Cities</li>
<li class="licategory" data-val="gv" data-id="1">A Glasgow Viewpoint</li>
<li class="licategory" data-val="sch data-id="1"">Some Churches</li>
<li class="licategory" data-val="bh" data-id="1">Barcelona Highlights</li>
<li class="licategory" data-val="mp" data-id="1">Martin’s Pictures</li>
</ul>
$("li").on("click",function(){
$("this").data("val");
$("this").data("id");
})

Add one common class like .categoryin all li and get the index()
$(".category").click(function(){
// console.log(this.id);
alert($(this).index())
});
Fiddle

nyView.click returns a function that's why value of id =1 always no matter which link you clicked.....try this code
<!doctype html>
<html>
<head>
<script>
function getImageCategories(element) {
var nyView = document.getElementById('ny');
var scView = document.getElementById('sc');
var gvView = document.getElementById('gv');
var schView = document.getElementById('sch');
var bhView = document.getElementById('bh');
var mpView = document.getElementById('mp');
var id=0;
if (element.parentNode === (nyView)) {
id = 1;
} else if (element.parentNode===scView) {
id = 2;
} else if (element.parentNode===gvView) {
id = 3;
} else if (element.parentNode===schView) {
id = 4;
} else if (element.parentNode===bhView) {
id = 5;
} else if (element.parentNode===mpView) {
id = 6;
}
alert(id);
}
</script>
</head>
<body>
<div class="grid_12">
<ul id="categories">
<li class="filter">Categories:</li>
<li id="ny"> New York</li>
<li id="sc">Spanish Cities</li>
<li id="gv">A Glasgow Viewpoint</li>
<li id="sch">Some Churches</li>
<li id="bh">Barcelona Highlights</li>
<li id="mp">Martin’s Pictures</li>
</ul>
</div>
</body>
</html>

How to set the active class on progress bubbles in Javascripts

I am trying to set the active class on my progress bubbles with a click of a button on my web page
<div ng-show="step.one" class="progress-bubble-container">
<ul class="progress-bubbles">
<li id="gs1" class="active">1</li>
<li id="gs2">2</li>
<li id="gs3">3</li>
<li id="gs4">4</li>
</ul>
</div>
I have four steps and each step pass in the step number to my javascript method
<a ng-click="SubmitRegistration(1)" class="btn btn-primary main-btn pull-right next-step">Register</a>
I tried something like this:
$scope.setNavigation = function(num) {
var nextStep;
nextStep = num + 1;
return $("#gs" + nextStep).addClass('active');
};
This is not working. What am I doing wrong here?

you can do that with simple counter
your html:
<ul>
<li class="step"></li>
<li class="step"></li>
<li class="step"></li>
</ul>
<div class="stepContent"></div>
<div class="stepContent"></div>
<div class="stepContent"></div>
your js:
var steps = $(".step"),
cntns = $(".stepContent"),
current = 0;
//default step activation
setStep(current);
steps.click(function(e){
current = $(this).index();
setStep(current);
});
function setStep(num){
step.removeClass("isActive").eq(num).addClass("isActive");
cntns.removeClass("isActive").eq(num).addClass("isActive");
}

How to get the prev and next elements of a particular class which are not siblings

Here is my code :
<ul>
<li class="active">
<div class="course_video_heading"><span class="minus"></span> Introduction <div class="course_duration" align="right">1m 21s</div></div>
<ul>
<li class="course_video viewed">
Welcome <div class="course_duration" align="right">1m 21s</div>
</li>
<li class="course_video viewed">
I need to select this <div class="course_duration" align="right">1m 21s</div>
</li>
</ul>
</li>
<li>
<div class="course_video_heading"><span class="plus"></span> Warm up <div class="course_duration" align="right">1h 15m</div></div>
<ul>
<li class="course_video viewed current">
Roll down <div class="course_duration" align="right">57s</div>
</li>
<li class="course_video">
Roll down with demi pointe variation <div class="course_duration" align="right">57s</div>
</li>
<li class="course_video" data-file="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" data-image="http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg">
Side roll down <div class="course_duration" align="right">57s</div>
</li>
<li class="course_video">
Side roll down variation with contraction <div class="course_duration" align="right">57s</div>
</li>
<li class="course_video">
Class exercise <div class="course_duration" align="right">57s</div>
</li>
</ul>
</li>
<li>
<div class="course_video_heading"><span class="plus"></span> Brushes <div class="course_duration" align="right">1h 5m</div></div>
<ul>
<li class="course_video">
Welcome <div class="course_duration" align="right">1m 21s</div>
</li>
</ul>
</li>
</ul>
My requirement : There is a element, <li class="course_video viewed current">, I need the previous li which has course_video class. In this case it would be :
<li class="course_video viewed">
I need to select this <div class="course_duration" align="right">1m 21s</div>
</li>
What have I tried :
$(".current").prev(".course_video")
This is not working as it is in different li
Note : It is not the duplicate of following questions :)
jQuery to find nearest Div of Parent
Getting next closest select element with jquery
jquery find closest previous sibling with class

Try this : read the index of current li and if it is 0 then find the previous li of its parent li and then find the course_video. And if index is not 0, then find previous li using prev()
var index = $(".current").index();
if(index==0)
{
var previousLi = $(".current").closest('li').prev('li').find("li.course_video:last");
}
else
{
var previousLi = $(".current").prev(".course_video");
}

var vindex;
$().ready(function () {
$("li .course_video").each(function (index) {
if ($(this).hasClass('current')) {
vindex = index;
}
});
$("li .course_video").each(function (index) {
if (index == vindex - 1) {
alert($(this)[0].outerHTML);
}
});
});
this code will help you.

$('.current').parents('li').prev().find('li:last')
Here's the jsFiddle

You can do it easily with a function that checks the index of the item: if the index is 0 then you'll select the last li in the previous ul.
Element.prototype.previousLi = function() {
var i = $(this).index(),
n = this.parentElement.previousSibling.children.length;
if (i) return this.parentElement.children[i-1];
else return this.parentElement.previousSibling.children[n-1];
}
Then you can do:
var el = $(".course_video.viewed.current")[0];
var previous = el.previousLi();

Try this code , it will give you the desired result :
<script>
var currentLI = $("li.current");
prevLi=$(currentLI).parent('ul').parent('li').prev('li').find('li.viewed:last');
alert($(prevLi).html());
</script>