I am working on making an unordered list collapsible. I have created a hamburger/ collapsible/ accordian menu already. However, I want to add a "Expand All/ Collapse All" button on the top. Can someone help me with the code?
function expandCollapse() {
var theHeaders = document.querySelectorAll('.expandCollapse h2'),
i;
for (i = 0; i < theHeaders.length; i++) {
var thisEl = theHeaders[i],
theId = 'panel-' + i;
var thisTarget = thisEl.parentNode.querySelector('.panel');
if (!thisTarget) {
continue;
}
// Create the button
thisEl.innerHTML = '<button aria-expanded="false" aria-controls="' + theId + '">' + thisEl.textContent + '</button>';
// Create the expandable and collapsible list and make it focusable
thisTarget.setAttribute('id', theId);
thisTarget.setAttribute('hidden', 'true');
}
// Make it click
var theButtons = document.querySelectorAll('.expandCollapse button[aria-expanded][aria-controls]');
for (i = 0; i < theButtons.length; i++) {
theButtons[i].addEventListener('click', function(e) {
var thisButton = e.target;
var state = thisButton.getAttribute('aria-expanded') === 'false' ? true : false;
thisButton.setAttribute('aria-expanded', state);
document.getElementById(thisButton.getAttribute('aria-controls')).toggleAttribute('hidden', !state);
});
}
}
expandCollapse();
<div class="expandCollapse">
<section id="teams">
<h2>Fruits</h2>
<div class="panel">
<ul>
<li>
Mango
</li>
</ul>
</div>
</section>
<section>
<h2>Ghadarite</h2>
<div class="panel">
<ul>
<li>
Potato(c. 1864-1928)
</li>
<li>
Onions(c. 1884-1962)
</li>
<li>
Pepper (1886-1921)
</li>
<li>
Gobind Behary Lal (1889-1982)
</li>
</ul>
</div>
</section>
</div>
Let's say if I add a button on the top of the list, how do I code the code the functionality of the button so that it expands all collapsed panels or collapses all expanded panels?
The easiest answer:
Add a button: <button onclick="toggleExpandCollapse();">Expand/Collapse</button>
Add this JS:
function toggleExpandCollapse() {
document.querySelectorAll('.panel').forEach(function(el) {
el.classList.toggle('hidden');
});
}
And lastly, add this css:
.hidden {display:none;}
And you are done!
Related
I found a problem, how do I do that when the user clicks on one of the dropdown menus on the mobile, it will close the previous dropdown menu and open the clicked menu? Then when the user click a menu inside the dropdown, it will close all dropdown menus including the toggle menu?
Here's the code I have
ngOnInit(): void {
if ($(window).width() < 991.98) {
document.querySelectorAll('.nav-item').forEach(function(element){
element.addEventListener('click', function (this: any, e) {
let nextEl = this.nextElementSibling;
if(nextEl && nextEl.classList.contains('dropdown-menu')) {
e.preventDefault();
if(nextEl.style.display == 'block'){
nextEl.style.display = 'none';
nextEl.style.opacity = '0';
nextEl.style.position = 'relative';
$(this).closest('li').removeClass('active');
} else {
nextEl.style.display = 'block';
nextEl.style.opacity = '1';
nextEl.style.position = 'relative';
$(this).closest('li').addClass('active');
}
}
});
})
}
}
collapse() {
this.showMenu = !this.showMenu;
var toggle;
if (this.showMenu == true) {
toggle = this.elRef.nativeElement.querySelector('.toggle-menu');
toggle.classList.add('active');
$('.header-area .nav').slideToggle(200);
} else {
toggle = this.elRef.nativeElement.querySelector('.toggle-menu');
toggle.classList.remove('active');
$('.header-area .nav').slideToggle(200);
}
}
index.html
<ul class="nav">
<li>
<a class="nav-item">Home</a>
<div class="dropdown-menu">
<a routerLink="/home" class="dropdown-item">Home</a>
<a routerLink="/dashboard" class="dropdown-item">Dashboard</a>
<a routerLink="/setting" class="dropdown-item">Setting</a>
</div>
</li>
<li>
<a class="nav-item">Explore</a>
<div class="dropdown-menu">
<a routerLink="/user" class="dropdown-item">User</a>
<a routerLink="/admin" class="dropdown-item">Admin</a>
</div>
</li>
</ul>
<a class="toggle-menu" (click)="collapse()">
<span>Menu</span>
</a>
First, I would say that you should not using JQuery and some basic Javascript document query syntaxs in Angular. Angular is not working like this.
Second, about the dropdown, thinking more simple, you need to determine which button was pressed, add class "active" if it not already there, and remove from all remaining
Having trouble closing the Menu after clicking the hamburger button. What's the best way to close the entire menu screen once any of the items are clicked?
My HTML is:
`<body>
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger">
<div></div>
</div>
<div class="menu">>
<div>
<div>
<ul>
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>`
I've tried using jQuery but havent had success. Here's the js code:
`$('.toggler').on('click', function () {
$('.menu').toggleClass('open');
});
$('.menu li').on("click", function () {
$('.menu-wrap').toggleClass('open');
});`
Or if there's a simpler way using CSS to close the menu?
Here's the codepen to run: https://jsfiddle.net/7rmcx861/#&togetherjs=g5zDdkhjc5
https://jsfiddle.net/h7et0qnv/
this menu style work on input chechbox situation. If checked your hamburger menu get visible else get hidden . so just need to change its situation
wrote one function in your script.
function toggle(){
$(".toggler").prop("checked", false);
}
then put this function to onclick event of menu list
<li><a onclick="toggle()" href="#Home">Home</a></li>
<li><a onclick="toggle()" href="#About">About</a></li>
<li><a onclick="toggle()" href="#">Menu</a></li>
<li><a onclick="toggle()" href="#">Contact</a></li>
If you want to do it with vanilla js, I would suggest you to use CustomEvents. There might be other ways of doing it in frameworks like React.
For every menu item I would emit a custom event -
var menuItems = document.querySelectorAll('.menu li');
for (var i = 0; i < menuItems.length; ++i) {
menuItems[i].addEventListener('click', function(e) {
var closeEvent = new CustomEvent('closeMenu', {
bubbles: true,
});
e.currentTarget.dispatchEvent(closeEvent);
});
}
The 'menu' can then react to this custom event and close itself if open -
var menu = document.querySelector('.menu')
if (menu) {
menu.addEventListener('closeMenu', function (e) {
e.currentTarget.classList.remove('open');
});
}
You can have the usual menu 'toggler' for opening and closing the menu when it is clicked.
Update:
I figured things were not very clear. So here I am adding some sample code.
Note: I added the toggler and subsequently changed the menu eventHandler slightly.
var menuItems = document.querySelectorAll('.menu li');
for (var i = 0; i < menuItems.length; ++i) {
menuItems[i].addEventListener('click', function(e) {
var closeEvent = new CustomEvent('closeMenu', {
bubbles: true,
});
e.currentTarget.dispatchEvent(closeEvent);
});
}
var menu = document.querySelector('.menu')
var toggler = document.querySelector('.toggler')
if (menu && toggler) {
menu.addEventListener('closeMenu', function(e) {
menu.classList.remove('open');
toggler.checked = false;
});
toggler.addEventListener('click', function(e) {
menu.classList.toggle('open');
});
}
.menu {
background-color: white;
display: inline-block;
padding-right: 1rem;
}
.menu.open {
visibility: visible;
}
.menu {
visibility: hidden;
}
<div class="menu-wrap">
<input type="checkbox" class="toggler" checked>
<div class="hamburger">
<div></div>
</div>
<div class="menu open">
<div>
<div>
<ul>
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
I want to display a message when the <section> is “empty”. Inside the <section>, I can have an unknown number of <ul> and inside it an unknown number of <li>. When I click on “x” button it removes that <li>. Here’s the HTML:
<section>
<ul>
<li class="row row--half-padding-top-bottom">
<span>October 2013</span>
</li>
<li class="notification notification--new">
<span>
<span>Franck Ribery</span>
<span>Bayern Munich</span>
</span>
<span class="accept-ignore-container">
<button class="js-animate-onclick--parent" title="Accept">Accept</button>
<button class="js-connect-invite--ignore">×</button>
</span>
</li>
<li class="notification notification--new">
<span>
<span>Arjen Robben</span>
<span>Bayern Munich</span>
</span>
<span class="accept-ignore-container">
<button class="js-animate-onclick--parent" title="Accept">Accept</button>
<button class="js-connect-invite--ignore">×</button>
</span>
</li>
</ul>
<ul>
<li class="row row--half-padding-top-bottom">
<span>September 2013</span>
</li>
<li class="notification notification--new">
<span>
<span>Franck Ribery</span>
<span>Bayern Munich</span>
</span>
<span class="accept-ignore-container">
<button class="js-animate-onclick--parent" title="Accept">Accept</button>
<button class="js-connect-invite--ignore">×</button>
</span>
</li>
</ul>
</section>
I want to ignore the <li> element that shows the date (hence the “empty”, because it’s not really empty). To do that, I check if the <li> has a class .notification. If it has, increase the counter. I do that upon clicking the “x” button that has a class .js-connect-invite--ignore:
var counter;
$('.js-connect-invite--ignore').on('click touchstart', function() {
var ul = $(this).closest('section').children();
$(ul).each(function() {
var li = $(this).children();
counter = 0;
$(li).each(function() {
if ($(this).is('.notification')) {
console.log('yes');
counter ++;
}
})
})
console.log(counter);
})
See demo: http://jsfiddle.net/CCECK/
However, it’s not working properly as the logic is wrong. Do I need to add two counters?
How can upon clicking “x” check all the other elements and if that is the last <li class="notification"> display an alert? Thanks!
Basically you reset the counter within each ul, so you always end up with the number of li elements of the last ul, which is 1. So if you reset the counter before iterating all the ul elements and also remove the .notification element on clicking the button then you can figure out when only one has been left.
You can try the following,
http://jsfiddle.net/Gd2kS/
js
var counter;
$('.js-connect-invite--ignore').on('click touchstart', function() {
var ul = $(this).closest('section').children();
counter = 0;
$(ul).each(function() {
var li = $(this).children();
$(li).each(function() {
if ($(this).is('.notification')) {
console.log('yes');
counter ++;
}
});
});
console.log(counter);
if(counter==1){
alert("last one left!!");
}else{
$(this).parents('.notification').remove();
}
})
EDIT - response to comments (hiding element with class .visuallyhidden instead of removing element)
var counter;
$('.js-connect-invite--ignore').on('click touchstart', function() {
var ul = $(this).closest('section').children();
counter = 0;
$(ul).each(function() {
var li = $(this).children();
$(li).each(function() {
if ($(this).is('.notification')
&& !$(this).is('.visuallyhidden')) {/*<- modify the condition*/
console.log($(this));
console.log('yes');
counter ++;
}
});
});
console.log(counter);
if(counter==1){
alert("last one left!!");
}else{
/*modify the removal*/
//$(this).parents('.notification').remove();
$(this).parents('.notification').addClass("visuallyhidden");
}
})
I have a ul list as follows. I am new to JS and trying to do a keyboard navigation, just the arrow keys using only javascript.
<ul id= nav>
<li class =subnav id =sub1> Companies
<ul id = hidden>
<li> item 1 </li>
<li> item 2 </li>
<li> item 3 </li>
</ul>
</li>
<li class =subnav id =sub2> LINKS
<ul id = hidden>
<li> item 4 </li>
<li> item 5 </li>
<li> item 6 </li>
</ul>
</li>
</ul>
my JS:
ul = document.getElementById("nav");
li = ul.getElementsByClassName("subnav");
ul2 = document.getElementById("hidden");
li = ul.getElementsByTagName("li");
function keyPress(e)
{
var e = e||window.event;
e =e.which||e.keyCode;
for( var i=0; i<li.length; i++)
{
var f = li[i].childNodes[0];
if(li[i].children.length > 0)
{
for(var j=0; j<li2.length; j++)
{
var x = li2[j].childNodes[0];
}
}
else
{
alert("no child nodes");
}
}
}
I am trying to set focus on the first item and then moving to each nodes using keys.
I suggest using jwerty, awesome keyboard events library.
I used jQuery and jWerty plugin.
Here is a quick JSFiddle: (Click the preview window and start hitting the down key)
http://jsfiddle.net/8QZrV/
As a basic idea, you should create an object with all the elements and then iterate through them, my basic example was like this:
var i = 0;
j = jQuery('.navigator li').length;
And then you hook it up in jwerty, I guess you want to make some actions there, so I guess you should also .focus() the current element.
Enjoy!
I wanted a lightweight solution so i found this one, however it only expands on clicking plus sign "+" next to the name of expandable category. I replaced + for red square and - for blue square for this demonstration to work.
Live code at: http://jsfiddle.net/2VXuk/2/
I need help modifying it to make any sub level that is expandable to be category that's not a link and upon clicking on its name expand its content.
Would be great to have option to make it a category - expand on click or link expand on + click and redirect on name click.
e.g.
<ul id="sitemap">
<li><a class="category" href="#">expands only</a>
<ul>
<li>Sample</li>
<li>Sample</li>
<li><a class="category_and_link" href="psy.html">Link to page or expand on + button</a>
<ul>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
</ul>
</li>
<li>Fourth link</li>
<li>Fifth link</li>
</ul>
</li>
</ul>
<script type="text/javascript">
this.sitemapstyler = function(){
var sitemap = document.getElementById("sitemap")
if(sitemap){
this.listItem = function(li){
if(li.getElementsByTagName("ul").length > 0){
var ul = li.getElementsByTagName("ul")[0];
ul.style.display = "none";
var span = document.createElement("span");
span.className = "collapsed";
span.onclick = function(){
ul.style.display = (ul.style.display == "none") ? "block" : "none";
this.className = (ul.style.display == "none") ? "collapsed" : "expanded";
};
li.appendChild(span);
};
};
var items = sitemap.getElementsByTagName("li");
for(var i=0;i<items.length;i++){
listItem(items[i]);
};
};
};
window.onload = sitemapstyler;
</script>
See my fork of your jsFiddle. The basic idea is to grab the a element...
var a = li.getElementsByTagName("a")[0];
and add an event handler to it as well.
if (!a.hasAttribute("href"))
a.onclick = showHide;
For non-links, just leave out the href attribute.