Filter nested elements using javascript

Filter nested elements using javascript - javascript

I have a nested list with groups and subgroups, and links contained therein.
function filtersearch() {
var input, filter, ul, tr, search, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("list");
tr = ul.getElementsByTagName("li");
for (i = 0; i < tr.length; i++) {
search = tr[i].getElementsByTagName("a")[0];
txtValue = search.textContent || search.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
<input id="myInput" class="RxSearchbox" onkeyup="filtersearch()" placeholder="Filter" title="Filter list" type="text">
<div id="list">
<ul>
<li>
Group 1
<ul>
<li>
Subgroup1
<ul class="nav">
<li>
link1
</li>
<li>
link2
</li>
<li>
link3
</li>
<li>
link4
</li>
<li>
link5
</li>
</ul>
</li>
<li>
Subgroup2
<ul class="nav">
<li>
link6
</li>
<li>
link7
</li>
<li>
link8
</li>
<li>
link9
</li>
<li>
link10
</li>
</ul>
</li>
<li>
Subgroup3
<ul class="nav">
<li>
link11
</li>
<li>
link12
</li>
<li>
link13
</li>
<li>
link14
</li>
<li>
link15
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I have an input box and am using Javascript to try to filter that list (e.g. if you type in "1", it would only show "1", "10", "11", "12", "13" etc., but it's only doing so on the parent element (i.e. will only show "Group 1") and not the children.
How can I get the script to filter all elements of li, parents and children, not just the parent?

Based on your HTML structure, the following JS code shall work fine.
P.S. Only unhide_parent() function was needed on top of your code.
function filtersearch() {
var input, filter, ul, tr, search, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("list");
tr = ul.getElementsByTagName("li");
for (i = 0; i < tr.length; i++) {
search = tr[i].getElementsByTagName("a")[0];
txtValue = search.textContent || search.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
unhide_parent(tr[i])
} else {
tr[i].style.display = "none";
}
}
}
unhide_parent = (ele) => {
if(ele.parentNode.parentNode.style.display=="none") {
ele.parentNode.parentNode.style.display='';
unhide_parent(ele.parentNode.parentNode)
}
};
<input id="myInput" class="RxSearchbox" onkeyup="filtersearch()" placeholder="Filter" title="Filter list" type="text">
<div id="list">
<ul>
<li>
Group 1
<ul>
<li>
Subgroup1
<ul class="nav">
<li>
link1
</li>
<li>
link2
</li>
<li>
link3
</li>
<li>
link4
</li>
<li>
link5
</li>
</ul>
</li>
<li>
Subgroup2
<ul class="nav">
<li>
link6
</li>
<li>
link7
</li>
<li>
link8
</li>
<li>
link9
</li>
<li>
link10
</li>
</ul>
</li>
<li>
Subgroup3
<ul class="nav">
<li>
link11
</li>
<li>
link12
</li>
<li>
link13
</li>
<li>
link14
</li>
<li>
link15
</li>
</ul>
</li>
</ul>
</li>
<li>
Group 2
<ul>
<li>
Subgroup-dup-1
<ul class="nav">
<li>
link-dup-1
</li>
<li>
link-dup-2
</li>
<li>
link-dup-3
</li>
<li>
link-dup-4
</li>
<li>
link-dup-5
</li>
</ul>
</li>
<li>
Subgroup-dup-2
<ul class="nav">
<li>
link-dup-6
</li>
<li>
link-dup-7
</li>
<li>
link-dup-8
</li>
<li>
link-dup-9
</li>
<li>
link-dup-10
</li>
</ul>
</li>
<li>
Subgroup-dup-3
<ul class="nav">
<li>
link-dup-11
</li>
<li>
link-dup-12
</li>
<li>
link-dup-13
</li>
<li>
link-dup-14
</li>
<li>
link-dup-15
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

I would start by placing a data attribute data-id within each li that corresponds with the link number. Then get all the .nav li elements using querySelectorAll('.nav li') this will return everyone of the list elements. Then you can iterate over these using a forEach loop checking the el.dataset.id to see if it includes the input.value, if it does we have a match.
You can then reference these however you wish, hidden elements you turn visible or highlighting the list-items a tag...
function filtersearch() {
const input = document.getElementById("myInput");
const lists = document.querySelectorAll('.nav li')
lists.forEach((list, i) => {
const dataId = list.dataset.id
dataId.includes(input.value) && input.value !== '' ?
list.children[0].classList.add('green') :
list.children[0].classList.remove('green')
})
}
.green {
background-color: lightgreen;
color: darkgreen;
}
<input id="myInput" class="RxSearchbox" onkeyup="filtersearch()" placeholder="Filter" title="Filter list" type="text">
<div id="list">
<ul>
<li>
Group 1
<ul>
<li>
Subgroup1
<ul class="nav">
<li data-id="1">
link1
</li>
<li data-id="2">
link2
</li>
<li data-id="3">
link3
</li>
<li data-id="4">
link4
</li>
<li data-id="5">
link5
</li>
</ul>
</li>
<li>
Subgroup2
<ul class="nav">
<li data-id="6">
link6
</li>
<li data-id="7">
link7
</li>
<li data-id="8">
link8
</li>
<li data-id="9">
link9
</li>
<li data-id="10">
link10
</li>
</ul>
</li>
<li>
Subgroup3
<ul class="nav">
<li data-id="11">
link11
</li>
<li data-id="12">
link12
</li>
<li data-id="13">
link13
</li>
<li data-id="14">
link14
</li>
<li data-id="15">
link15
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Related

My sub menu is still not working properly (jQuery)

I'm creating a sub menu using jquery. I have made the code as below. But there is still something that is not working properly. What I want is, when the start, the menu is closed. Currently, all menus are open. How do I do it, can anyone help me?
$('.list-menu > li').click(function () {
var child = $(this).children('ul');
if(child.length===0){
$(this).children().addClass("active");
return;
}
$('.list-menu ul').not(child).slideUp('normal');
child.slideDown('normal');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-menu">
<li class="menu-1">
Getting Started
<ul class="submenu">
<li id="sub-1">Child 1
</li>
<li id="sub-2">Child 2
</li>
</ul>
</li>
<li class="menu-2">
Controlling How Data is Indexed
<ul class="submenu">
<li id="sub-3">Child 1
</li>
<li id="sub-4">Child 2
</li>
</ul>
</li>
<li class="menu-3">
Uploading and Indexing Data
<ul class="submenu">
<li id="sub-5">Child 1
</li>
<li id="sub-6">Child 2
</li>
</ul>
</li>
<li>
<a href="#">
Querying For More Information
</a>
</li>
</ul>

You can set the child ul elements to display: none on page load using CSS:
ul > li > ul { display: none; }
$('.list-menu > li').click(function() {
var child = $(this).children('ul');
$(this).children().addClass("active");
$('.list-menu ul').not(child).slideUp('normal');
child.slideToggle('normal');
});
ul > li > ul { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-menu">
<li class="menu-1">
Getting Started
<ul class="submenu">
<li id="sub-1">Child 1
</li>
<li id="sub-2">Child 2
</li>
</ul>
</li>
<li class="menu-2">
Controlling How Data is Indexed
<ul class="submenu">
<li id="sub-3">Child 1
</li>
<li id="sub-4">Child 2
</li>
</ul>
</li>
<li class="menu-3">
Uploading and Indexing Data
<ul class="submenu">
<li id="sub-5">Child 1
</li>
<li id="sub-6">Child 2
</li>
</ul>
</li>
<li>
Querying For More Information
</li>
</ul>

html menu and sub menu active

I assign an active class in my menu, but the active class is not removed from the mobile menu, it always remains active. And also, if the subcategory is selected, I want the category itself to have an active class. I tried, I couldn't. Thank you in advance to the friends who helped.
For example, if category1.php page is open, "category" has the deactivated class.
function updateMenu(url) {
const active = document.querySelector('.menu-item.active');
if (active !== null) {
active.classList.remove('active');
}
const links = Array.from(document.querySelectorAll('.menu-item'));
links.forEach(function(li){
let anchor = li.querySelector("a");
if(url.indexOf(anchor.href) > -1){
li.classList.add("active");
}
});
}
updateMenu(window.location.href);
<div class="header_side_container">
<div class="header_builder_component">
<nav class="main-menu">
<ul id="menu-main-menu" class="menu">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</nav>
</div>
</div>
<!--Mobil-->
<nav class="mobile_menu">
<ul id="menu-top_menu-1">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</ul>
</nav>

window.location.pathname is the property you need. Once you have it, you can find the filename (last part of the whole pathname) by using .substr and .lastIndexOf.
In this code snippet, the active item is the parent of JS, I used that as an example since the location.href for these SO snippets is https://stacksnippets.net/js, hence the pathname is /js, and finally, the filename is js.
Check the code and you'll see what I mean
HIH
function updateMenu(url) {
const active = document.querySelector('.menu-item.active');
if (active !== null) {
active.classList.remove('active');
}
const links = Array.from(document.querySelectorAll('.menu-item'));
links.forEach(function(li){
let anchor = li.querySelector("a");
if(anchor.href.indexOf(url) > -1) {
const parentLI = $(li).parents('.menu-item').get(0)
if(parentLI)
parentLI.classList.add("active");
else
li.classList.add("active");
}
});
}
const pathname = window.location.pathname, filename=pathname.substr(pathname.lastIndexOf('/') + 1);
updateMenu(filename);
li.active > a span{
font-weight: bold !important;
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header_side_container">
<div class="header_builder_component">
<nav class="main-menu">
<ul id="menu-main-menu" class="menu">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="js">
<span>JS</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</ul>
</nav>
</div>
</div>
<!--Mobil-->
<nav class="mobile_menu">
<ul id="menu-top_menu-1">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="js">
<span>JS too</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</ul>
</nav>

how to hide child elements child elements in jQuery

I have a menu populating from MySQL table and PHP up to some nested sub levels.
my menu like this:
A
B
C
If click on A first time it is showing all the child elements and again I click child elements of A it displaying child elements also fine.
But the problem is when I click on the B after open all the levels items of A it shows B sub elements fine. But again if I click A it showing all the elements except child child elements also.
I used jQuery for this.
So I want to bring back to the original state? ( only expand the top child elements, not the sub child elements ),
how to do that?
//this is my jquery code for elements clickable in menu.
$(document).ready(function() {
$(".lichild").parent().hide();
$(".limain").click(function() {
$(this).children('ul').show();
$(this).siblings(".limain").children('ul').hide();
});
$(".lichild").click(function() {
$(this).children('ul').show();
$(this).siblings().children('ul').hide()
});
});
<!-- This is the html I am generating using a PHP function -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="limain">A
<ul>
<li class="lichild">A1
<ul>
<li class="lichild">a2</li>
<li class="lichild">a1
<ul>
<li class="lichild">aaaaaa</li>
<li class="lichild">abbbbbb</li>
</ul>
</li>
</ul>
</li>
<li class="lichild">A2</li>
<li class="lichild">A3</li>
<li class="lichild">A4</li>
<li class="lichild">A5</li>
</ul>
<li class="limain">B
<ul>
<li class="lichild">B1</li>
<li class="lichild">B2</li>
</ul>
</li>
<li class="limain">C
<ul>
<li class="lichild">C1</li>
<li class="lichild">C2</li>
<li class="lichild">C3</li>
<li class="lichild">A6
<ul>
<li class="lichild">A8
<ul>
<li class="lichild">A10
<ul>
<li class="lichild">A13
</li>
<li class="lichild">A14
</li>
</ul>
</li>
<li class="lichild">A11
</li>
</ul>
</li>
<li class="lichild">A9
</li>
</ul>
</li>
<li class="lichild">A7
</li>
</ul>
</li>
<li class="limain">D
<ul>
<li class="lichild">D1</li>
<li class="lichild">D2
</li>
</ul>
</li>
</ul>

Use find inside siblings and hide it.
$(".lichild").parent().hide();
$(".limain").click(function() {
$(this).children('ul').show();
$(this).siblings(".limain").find('ul').hide(); // Change in this line
});
$(".lichild").click(function() {
$(this).children('ul').show();
$(this).siblings().children('ul').hide()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li class="limain">
A
<ul>
<li class="lichild">
A1
<ul>
<li class="lichild">a2</li>
<li class="lichild">
a1
<ul>
<li class="lichild">aaaaaa</li <li class="lichild">abbbbbb</li>
</ul>
</li>
</ul>
</li>
<li class="lichild">A2</li>
<li class="lichild">A3</li>
<li class="lichild">A4</li>
<li class="lichild">A5</li>
</ul>
<li class="limain">
B
<ul>
<li class="lichild">B1</li>
<li class="lichild">B2</li>
</ul>
</li>
<li class="limain">
C
<ul>
<li class="lichild">C1</li>
<li class="lichild">C2</li>
<li class="lichild">C3</li>
<li class="lichild">
A6
<ul>
<li class="lichild">
A8
<ul>
<li class="lichild">
A10
<ul>
<li class="lichild">A13
</li>
<li class="lichild">A14
</li>
</ul>
</li>
<li class="lichild">A11
</li>
</ul>
</li>
<li class="lichild">A9
</li>
</ul>
</li>
<li class="lichild">A7
</li>
</ul>
</li>
<li class="limain">
D
<ul>
<li class="lichild">D1</li>
<li class="lichild">D2
</li>
</ul>
</li>
</ul>

$(document).ready(function () {
$(".lichild").parent().hide();
$(".limain").click(function () {
$(this).children('ul').show();
$(this).siblings().find('ul').hide();
});
$(".lichild").click(function () {
$(this).children('ul').show();
$(this).siblings('li').find('ul').hide()
});
});

Collapse and Expand Tree structure in Javascript

I need a help on collapse and Expand using Javascript.
Here is my running code (.html)
<h2>Test</h2>
<html lang="en">
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-16">
<title></title>
<script type="text/javascript">
function toggleDisplay(element)
{
element.style.display = element.style.display === 'none' ? '' : 'none';
};
function toggleDisplayAll(elements)
{
for(var i=0; i<elements.length; i++)
{
toggleDisplay(elements[i]);
}
}
</script>
</head>
<body>
<ul>
<a onclick="toggleDisplayAll(this.parentNode.getElementsByTagName('ul')); return false;" href="#">Name:</a>
<ul style="display:none;">
<a onclick="toggleDisplayAll(this.parentNode.getElementsByTagName('ul')); return false;" href="#">Address: </a>
<ul style="display:none;">
<a onclick="toggleDisplayAll(this.parentNode.getElementsByTagName('li')); return false;" href="#">Subject: </a>
<ul style="display:none;">
<li style="display:none;">Id
</li>
</ul>
</ul>
</ul>
</ul>
</body>
</html>
If you run this html, you will get out put as
Name
on click of Name, it is showing all the child elements
Name:
Address:
Subject:
On click of Subject it is showing Id
Name:
Address:
Subject:
. Id
What i want here is each child should open only on parent click.
When run the html, only Name will dispaly
Name:
On click of Name, only Address will be displayed as a child element.
Name:
Address:
Onclick of Address, only Subject will display
Name:
Address:
Subject:
Than finally on click of Subject, id will show up
Name:
Address:
Subject:
. Id
How to implement this tree structure. what i am doing wrong here. please suggest me.

Check this:
$('.expand').click(function() {
$('ul', $(this).parent()).eq(0).toggle();
});
ul li ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a class="expand">Root</a>
<ul>
<li>
<a class="expand">Child</a>
<ul>
<li>
<a class="expand">Super Child</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Edit
If you don't want to use jQuery, you can try this:
var expander = document.querySelectorAll('.expand');
for (var i = 0; i < expander.length; ++i) {
expander[i].onclick = function() {
var ul = this.parentElement.querySelectorAll('ul')[0];
if (ul.offsetHeight > 0) {
ul.style.display = 'none';
} else {
ul.style.display = 'block';
}
}
}
ul li ul {
display: none;
}
<ul>
<li>
<a class="expand">Root</a>
<ul>
<li>
<a class="expand">Child</a>
<ul>
<li>
<a class="expand">Super Child</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>

You want to target just the first child element, instead of looping through all of them. You should also try to separate your logic from your markup. Give unobtrusive JavaScript a read.
function toggle() {
var ls = this.parentNode.getElementsByTagName('ul')[0],
styles, display;
if (ls) {
styles = window.getComputedStyle(ls);
display = styles.getPropertyValue('display');
ls.style.display = (display === 'none' ? 'block' : 'none');
}
}
var eles = document.querySelectorAll('.ele');
Array.prototype.slice.call(eles).forEach(function (e) {
e.addEventListener('click', toggle);
});
ul ul {
display: none;
}
.ele {
cursor: pointer;
}
.ele:hover {
color: red;
}
<ul>
<li><span class="ele">One</span>
<ul>
<li><span class="ele">Two</span>
<ul>
<li><span class="ele">Three</span>
<ul>
<li><span class="ele">Four</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

In pure JavaScript
document.querySelector('.tree-structure').addEventListener('click', (e) => {
const el = e.target;
const sibling = el.nextSibling.nextSibling;
if (el && el.className == 'toggle' && sibling) {
sibling.classList.toggle('show');
}
});
ul ul {
display: none;
}
.show {
display: block;
}
<ul class="tree-structure">
<li>
<button class="toggle">1st Level</button>
<ul>
<li>
<button class="toggle">2nd Level</button>
<ul>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
</ul>
</li>
<li>
<button class="toggle">2nd Level</button>
<ul>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<button class="toggle">1st Level</button>
<ul>
<li>
<button class="toggle">2nd Level</button>
<ul>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
</ul>
</li>
<li>
<button class="toggle">2nd Level</button>
<ul>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

How to collapse a menu on loading the page

Been using this javascript code to make my lists clickable to collapse but when I load the page with it attached it seems to expand the lists on loading. My question is with the javascript code is it possible to make it collapse apon page load so users have to click the text to expand it.
Heres the full code with the javascript
<UL id="example_tree">
<LI><span><strong>A</Strong></span>
<UL>
<LI><span><p>Aimees Travel</p></span></LI>
<LI><span><p>Airport Parking</p></span></LI>
<LI><span><p>Arriva Bolton</p></span></LI>
<LI><span><p>Arriva Winsford</p></span></LI>
<LI><span><p>Arriva Wythenshawe</p></span></LI>
</UL>
</LI>
<LI><span><strong>B</Strong></span>
<UL>
<LI><span><p>Bakers Coaches</p></span></LI>
<LI><span><p>Belle Vue</p></span></LI>
<LI><span><p>Bullocks Coaches</p></span></LI>
</UL>
</LI>
<LI><span><strong>C</Strong></span>
<UL>
<LI><span><p>Cheshire Council</p></span></LI>
<LI><span><p>Chesters Executive Travel</p></span></LI>
<LI><span><p>Copelands</p></span></LI>
</UL>
</LI>
<LI><span><strong>D</Strong></span>
<UL>
<LI><span><p>D&G</p></span></LI>
</UL>
</LI>
<LI><span><strong>E</Strong></span>
<UL>
<LI><span><p>Eavesway</p></span></LI>
<LI><span><p>Edwards Coaches</p></span></LI>
<LI><span><p>Ellisons Travel</p</span></LI>
</UL>
</LI>
<LI><span><strong>F</Strong></span>
<UL>
<LI><span><p>First Potteries</p></span></LI>
<LI><span><p><p>Flight Shuttle Services</p></span></LI>
</UL>
</LI>
<LI><span><strong>G</Strong></span>
<UL>
<LI><span><p>GHA Group</p></span></LI>
<LI><span><<p>Go Goodwins</p></span></LI>
<LI><span><p>Golden Green Travel</p></span></LI>
<LI><span><p>Grayway</p></LI>
</UL>
</LI>
<LI><span><strong>H</Strong></span>
<UL>
<LI><span><p>Happy Days Coaches</p></span></LI>
<LI><span><p>High Peak</p></span></LI>
<LI><span><p>Hollinshead Coaches</p></span></LI>
<LI><span>Holmeswood Group</p></span></LI>
</UL>
</LI>
<LI><span><strong>I</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>J</Strong></span>
<UL>
<LI><span><p>Jones Coaches</p></span></LI>
</UL>
</LI>
<LI><span><strong>K</Strong></span>
<UL>
<LI><span><p>Kt's Coaches</p></span></LI>
</UL>
</LI>
<LI><span><strong>L</Strong></span>
<UL>
<LI><span><p>Lambs</p></span></LI>
<LI><span><p>Leons Coaches</p></span></LI>
</UL>
</LI>
<LI><span><strong>M</Strong></span>
<UL>
<LI><span><p>Manchester Airport Group</p></span></LI>
<LI><span><p>Manchester Community Transport</p></span></LI>
<LI><span><p>Maynes Coaches</p></span></LI>
<LI><span><p>Megabus</p></span></LI>
</UL>
</LI>
<LI><span><strong>N</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>O</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>P</Strong></span>
<UL>
<LI><span><p>Parks of Hamilton</p></span></LI>
<LI><span><p>Pauls of Stoke</p></span></LI>
</UL>
</LI>
<LI><span><strong>Q</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>R</span>
<UL>
<LI><span><p>Robin Hood Travel</p></span></LI>
<LI><span><p>Roy McCarthy Coaches</p></span></LI>
</UL>
</LI>
<LI><span><strong>S</Strong></span>
<UL>
<LI><span><p>Scraggs</p></span></LI>
<LI><span><p>Selwyns Travel</p></span></LI>
<LI><span> <p>Shearings</p></span></LI>
<LI><span><p>Smiths of Marple</p></LI>
<LI><span><p>South Lancs Travel</p></span></LI>
<LI><span><p>Stagecoach Manchester</p></span></LI>
<LI><span><p>Stanways Coaches</p></span></LI>
<LI><span><p><p>Stotts</p></p></span></LI>
<LI><span><p>Swans Travel</p></span></LI>
</UL>
</LI>
<LI><span><strong>T</Strong></span>
<UL>
<LI><span><p>Terravision</p></span></LI>
<LI><span><p>Transdev Burnley & Pendle</p></span></LI>
<LI><span><p>Transdev Lancashire United</p></span></LI>
<LI><span><p>Travellers Choice</p></span></LI>
</UL>
</LI>
<LI><span><strong>U</Strong></span>
<UL>
<LI><span><p>UK Coachways</p></p></span></LI>
</UL>
</LI>
<LI><span><strong>V</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>W</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>X</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>Y</Strong></span>
<UL>
<LI><span><p>Yelloway</p></span></LI>
</UL>
</LI>
<LI><span><strong>Z</Strong></span>
<UL>
</UL>
</LI>
</LI>
</UL>
</LI>
</UL>
<script type="text/javascript">
var allSpan = document.getElementsByTagName('SPAN');
for(var i = 0; i < allSpan.length; i++){
allSpan[i].onclick=function(){
if(this.parentNode){
var childList = this.parentNode.getElementsByTagName('UL');
for(var j = 0; j< childList.length;j++){
var currentState = childList[j].style.display;
if(currentState=="none"){
childList[j].style.display="block";
}else{
childList[j].style.display="none";
}
}
}
}
}
</script>
Basically as you can see with the Javascript running the page loads with the lists expanded but I want them closed apon loading if its possible so users click the letters to expand and see the lists under it. Some have suggested that I need CSS code also to go along wit it to fix my issue but I want to try it with the javascript code first before adding extra code in other places

You would rather hide list items with CSS by default. For this you would then need to use getComputedStyle since there is no style.display property set explicitly initially.
#example_tree > li > ul {
display: none;
}
<UL id="example_tree">
<LI><span><strong>A</Strong></span>
<UL>
<LI><span><p>Aimees Travel</p></span></LI>
<LI><span><p>Airport Parking</p></span></LI>
<LI><span><p>Arriva Bolton</p></span></LI>
<LI><span><p>Arriva Winsford</p></span></LI>
<LI><span><p>Arriva Wythenshawe</p></span></LI>
</UL>
</LI>
<LI><span><strong>B</Strong></span>
<UL>
<LI><span><p>Bakers Coaches</p></span></LI>
<LI><span><p>Belle Vue</p></span></LI>
<LI><span><p>Bullocks Coaches</p></span></LI>
</UL>
</LI>
<LI><span><strong>C</Strong></span>
<UL>
<LI><span><p>Cheshire Council</p></span></LI>
<LI><span><p>Chesters Executive Travel</p></span></LI>
<LI><span><p>Copelands</p></span></LI>
</UL>
</LI>
<LI><span><strong>D</Strong></span>
<UL>
<LI><span><p>D&G</p></span></LI>
</UL>
</LI>
<LI><span><strong>E</Strong></span>
<UL>
<LI><span><p>Eavesway</p></span></LI>
<LI><span><p>Edwards Coaches</p></span></LI>
<LI><span><p>Ellisons Travel</p</span></LI>
</UL>
</LI>
<LI><span><strong>F</Strong></span>
<UL>
<LI><span><p>First Potteries</p></span></LI>
<LI><span><p><p>Flight Shuttle Services</p></span></LI>
</UL>
</LI>
<LI><span><strong>G</Strong></span>
<UL>
<LI><span><p>GHA Group</p></span></LI>
<LI><span><<p>Go Goodwins</p></span></LI>
<LI><span><p>Golden Green Travel</p></span></LI>
<LI><span><p>Grayway</p></LI>
</UL>
</LI>
<LI><span><strong>H</Strong></span>
<UL>
<LI><span><p>Happy Days Coaches</p></span></LI>
<LI><span><p>High Peak</p></span></LI>
<LI><span><p>Hollinshead Coaches</p></span></LI>
<LI><span>Holmeswood Group</p></span></LI>
</UL>
</LI>
<LI><span><strong>I</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>J</Strong></span>
<UL>
<LI><span><p>Jones Coaches</p></span></LI>
</UL>
</LI>
<LI><span><strong>K</Strong></span>
<UL>
<LI><span><p>Kt's Coaches</p></span></LI>
</UL>
</LI>
<LI><span><strong>L</Strong></span>
<UL>
<LI><span><p>Lambs</p></span></LI>
<LI><span><p>Leons Coaches</p></span></LI>
</UL>
</LI>
<LI><span><strong>M</Strong></span>
<UL>
<LI><span><p>Manchester Airport Group</p></span></LI>
<LI><span><p>Manchester Community Transport</p></span></LI>
<LI><span><p>Maynes Coaches</p></span></LI>
<LI><span><p>Megabus</p></span></LI>
</UL>
</LI>
<LI><span><strong>N</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>O</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>P</Strong></span>
<UL>
<LI><span><p>Parks of Hamilton</p></span></LI>
<LI><span><p>Pauls of Stoke</p></span></LI>
</UL>
</LI>
<LI><span><strong>Q</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>R</span>
<UL>
<LI><span><p>Robin Hood Travel</p></span></LI>
<LI><span><p>Roy McCarthy Coaches</p></span></LI>
</UL>
</LI>
<LI><span><strong>S</Strong></span>
<UL>
<LI><span><p>Scraggs</p></span></LI>
<LI><span><p>Selwyns Travel</p></span></LI>
<LI><span> <p>Shearings</p></span></LI>
<LI><span><p>Smiths of Marple</p></LI>
<LI><span><p>South Lancs Travel</p></span></LI>
<LI><span><p>Stagecoach Manchester</p></span></LI>
<LI><span><p>Stanways Coaches</p></span></LI>
<LI><span><p><p>Stotts</p></p></span></LI>
<LI><span><p>Swans Travel</p></span></LI>
</UL>
</LI>
<LI><span><strong>T</Strong></span>
<UL>
<LI><span><p>Terravision</p></span></LI>
<LI><span><p>Transdev Burnley & Pendle</p></span></LI>
<LI><span><p>Transdev Lancashire United</p></span></LI>
<LI><span><p>Travellers Choice</p></span></LI>
</UL>
</LI>
<LI><span><strong>U</Strong></span>
<UL>
<LI><span><p>UK Coachways</p></p></span></LI>
</UL>
</LI>
<LI><span><strong>V</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>W</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>X</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>Y</Strong></span>
<UL>
<LI><span><p>Yelloway</p></span></LI>
</UL>
</LI>
<LI><span><strong>Z</Strong></span>
<UL>
</UL>
</LI>
</LI>
</UL>
</LI>
</UL>
<script type="text/javascript">
var allSpan = document.getElementsByTagName('SPAN');
for(var i = 0; i < allSpan.length; i++){
allSpan[i].onclick=function(){
if(this.parentNode){
var childList = this.parentNode.getElementsByTagName('UL');
for(var j = 0; j< childList.length;j++){
var currentState = window.getComputedStyle(childList[j], null).display;
if (currentState == "none"){
childList[j].style.display = "block";
} else {
childList[j].style.display = "none";
}
}
}
}
}
</script>

You might wanna use jQuery's toogle() method. The toggle() method toggles between hide() and show() for the selected elements. Its usage can be found in w3schools as well.
Or you might use the jQuery Accordion to achieve your goal.Here are the links:
1.Accordion
2. If want to learn about accordion link

Try to add before the end of your script :
var allUL = document.getElementsByTagName('UL');
for(var i = 0; i < allUL.length; i++){
allUL[i].style.display="none";
}

We Keep Coding

JavaScript is the programming language of the Web.

Filter nested elements using javascript - javascript

Related

My sub menu is still not working properly (jQuery)

html menu and sub menu active

how to hide child elements child elements in jQuery

Collapse and Expand Tree structure in Javascript

How to collapse a menu on loading the page

Categories

Resources