I'm trying to move through DIVs with the keyboard ARROWS like in an Excel.
It was almost working when I had just digits.
I see the issue happens between the 1st and 2nd alerts.
In this line:
currentIndex = $(":focus").index() + 1;
The initial tab is 101, but when I press the RIGHT ARROW becomes 1 (second alert).
I don't understand what that line does, I though it was getting the value of the current tab. If so, transforms the 101 on a 1. Not good.
I need it to respect the numbers, for the calculations to work. So, it should be 101
var currentIndex = 101;
var maxItemsPerRow = 7;
var newIndex = 101;
$(document).keydown(function(e){
alert('currentIndex: '+currentIndex);
currentIndex = $(":focus").index() + 1;
//currentIndex = $('#id').get(0).focus();
alert('currentIndex: '+currentIndex);
if(e.which === 37){ /* LEFT */
newIndex = (currentIndex - 1);
$('div a:nth-child(' +(newIndex) + ')').focus();
}else if(e.which === 39){ /* RIGHT */
newIndex = (currentIndex + 1);
alert('newIndex: ' +newIndex);
// $("#DilutionFactor1_" + nCount).attr('tabindex',
if( $('div a:nth-child(' + ( newIndex )+ ')').focus() ){
$('div a:nth-child(' + ( newIndex )+ ')').focus();
}
}else if(e.which === 38){ /* UP */
newIndex = (currentIndex - maxItemsPerRow + 1);
var focusEd = 0;
while (focusEd == 0){
$('div a:nth-child(' + ( newIndex )+ ')').focus();
alert('newIndex: ' +newIndex);
if( $('div a:nth-child(' + ( newIndex )+ ')').is(":focus") ){
focusEd = 1;
}else{
newIndex = newIndex + 1;
}
}
}else if(e.which === 40){ /* DOWN */
newIndex = (currentIndex + maxItemsPerRow - 1);
var focusEd = 0;
while (focusEd == 0){
$('div a:nth-child(' + ( newIndex )+ ')').focus();
//alert('newIndex: ' +newIndex);
if( $('div a:nth-child(' + ( newIndex )+ ')').is(":focus") ){
focusEd = 1;
}else{
newIndex = newIndex - 1;
}
}
}
$('#showIndex').text(newIndex);
});
$('div a:nth-child(1)').focus(); // FOCUS FIRST
.active{
border:5px solid LIME;
}
.notActive{
border:5px solid CYAN;
}
div{
display: flex;
flex-wrap: wrap;
align-self: center;
}
img{
width: 100px;
}
a:focus{
border:5px solid #f09;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head></head>
<body>
<div style="max-width:1010px;">
<a class="notActive" href="#1">
<div tabindex="101">101 <img src="https://www.google.com/logos/doodles/2017/lunar-new-year-2017-5686481707335680.2-hp.jpg">
</div>
</a>
<a class="notActive" href="#1">
<div tabindex="102">102 <img src="https://www.google.com/logos/doodles/2017/lunar-new-year-2017-5686481707335680.2-hp.jpg">
</div>
</a>
<a class="notActive" href="#1">
<div tabindex="103">103 <img src="https://www.google.com/logos/doodles/2017/lunar-new-year-2017-5686481707335680.2-hp.jpg">
</div>
</a>
<a class="notActive" href="#1">
<div tabindex="104">104 <img src="https://www.google.com/logos/doodles/2017/lunar-new-year-2017-5686481707335680.2-hp.jpg">
</div>
</a>
<div style="width:100%"></div>
<a class="notActive" href="#1">
<div tabindex="201">201 <img src="https://www.google.com/logos/doodles/2017/lunar-new-year-2017-5686481707335680.2-hp.jpg">
</div>
</a>
<a class="notActive" href="#1">
<div tabindex="202">202 <img src="https://www.google.com/logos/doodles/2017/lunar-new-year-2017-5686481707335680.2-hp.jpg">
</div>
</a>
<a class="notActive" href="#1">
<div tabindex="203">203 <img src="https://www.google.com/logos/doodles/2017/lunar-new-year-2017-5686481707335680.2-hp.jpg">
</div>
</a>
<a class="notActive" href="#1">
<div tabindex="204">204 <img src="https://www.google.com/logos/doodles/2017/lunar-new-year-2017-5686481707335680.2-hp.jpg">
</div>
</a>
<a class="notActive" href="#1">
<div tabindex="205">205 <img src="https://www.google.com/logos/doodles/2017/lunar-new-year-2017-5686481707335680.2-hp.jpg">
</div>
</a>
<a class="notActive" href="#1">
<div tabindex="206">206 <img src="https://www.google.com/logos/doodles/2017/lunar-new-year-2017-5686481707335680.2-hp.jpg">
</div>
</a>
<a class="notActive" href="#1">
<div tabindex="207">207 <img src="https://www.google.com/logos/doodles/2017/lunar-new-year-2017-5686481707335680.2-hp.jpg">
</div>
</a>
<div style="width:100%"></div>
<a class="notActive" href="#1">
<div tabindex="301">301 <img src="https://www.google.com/logos/doodles/2017/lunar-new-year-2017-5686481707335680.2-hp.jpg">
</div>
</a>
<a class="notActive" href="#1">
<div tabindex="302">302 <img src="https://www.google.com/logos/doodles/2017/lunar-new-year-2017-5686481707335680.2-hp.jpg">
</div>
</a>
<a class="notActive" href="#1">
<div tabindex="303">303 <img src="https://www.google.com/logos/doodles/2017/lunar-new-year-2017-5686481707335680.2-hp.jpg">
</div>
</a>d
<a class="notActive" href="#1">
<div tabindex="304">304 <img src="https://www.google.com/logos/doodles/2017/lunar-new-year-2017-5686481707335680.2-hp.jpg">
</div>
</a>
<a class="notActive" href="#1">
<div tabindex="305">305 <img src="https://www.google.com/logos/doodles/2017/lunar-new-year-2017-5686481707335680.2-hp.jpg">
</div>
</a>
<a class="notActive" href="#1">
<div tabindex="306">306 <img src="https://www.google.com/logos/doodles/2017/lunar-new-year-2017-5686481707335680.2-hp.jpg">
</div>
</a>
<a class="notActive" href="#1">
<div tabindex="307">307 <img src="https://www.google.com/logos/doodles/2017/lunar-new-year-2017-5686481707335680.2-hp.jpg">
</div>
</a>
<div style="width:100%"></div>
<a class="notActive" href="#1">
<div tabindex="401">401 <img src="https://www.google.com/logos/doodles/2017/lunar-new-year-2017-5686481707335680.2-hp.jpg">
</div>
</a>
<a class="notActive" href="#1">
<div tabindex="402">402 <img src="https://www.google.com/logos/doodles/2017/lunar-new-year-2017-5686481707335680.2-hp.jpg">
</div>
</a>
<a class="notActive" href="#1">
<div tabindex="403">403 <img src="https://www.google.com/logos/doodles/2017/lunar-new-year-2017-5686481707335680.2-hp.jpg">
</div>
</a>
</div>
</body>
</html>
Related
Not sure what I'm missing here, but trying to hide the entire container for links parent-container if the anchor links inside it are set to inline display: none
I've tried checking if the style is none with
[...document.querySelectorAll(".parent-container a")].map(item => item.style.display == "none" && document.querySelectorAll(".parent-container").style = "display: none")
But can't get it to check correctly.
const parentContainer = document.querySelector(".parent-container [data-filter]");
const toggleViews = function(filterName) {
parentContainer.forEach($el => {
if ($el.dataset.filter == filterName || filterName == 'show-all') {
$el.style.display = "initial";
} else {
$el.style.cssText = "display:none!important";
}
});
};
section {
border: 1px solid #000;
}
<section class="parent-container">
<div>
<div class="">
<header>
<h3>heading</h3>
</header>
<div class="col-w1">
<a href="#" class="" style="display: none;" data-filter="car">
<div class="col-item">
<img src="#" alt="">Test
</div>
</a>
<a href="#" class="" style="display: none;" data-filter="boat">
<div class="col-item">
<img src="#" alt="">Test
</div>
</a>
<a href="#" class="" style="display: none;" data-filter="house">
<div class="col-item">
<img src="#" alt="">Test
</div>
</a>
</div>
</div>
</div>
</section>
<section class="parent-container">
<div>
<div class="">
<header>
<h3>heading</h3>
</header>
<div class="col-w1">
<a href="#" class="" style="display: block;" data-filter="house">
<div class="col-item">
<img src="#" alt="">Test
</div>
</a>
<a href="#" class="" style="display: block;" data-filter="car">
<div class="col-item">
<img src="#" alt="">Test
</div>
</a>
<a href="#" class="" style="display: block;" data-filter="boat">
<div class="col-item">
<img src="#" alt="">Test
</div>
</a>
</div>
</div>
</div>
</section>
You need a nested loop, the outer iterating over each parent-container and the inner over each a element, here using NodeList.forEach for the outer loop and Array.every over the a elements queried from each container (with getElementsByTagName in this case).
document.querySelectorAll(".parent-container").forEach(container => {
const aElements = [...container.getElementsByTagName("a")];
if (aElements.every(element => element.style.display === "none")) {
container.style.display = 'none'
} else {
container.style.display = 'block'
}
});
section{
border: 1px solid #000;
}
<section class="parent-container"><div><div class=""><header><h3>heading</h3></header><div class="col-w1"><div class="col-item"><img src="#" alt="">Test</div><div class="col-item"><img src="#" alt="">Test</div><div class="col-item"><img src="#" alt="">Test</div></div></div></div></section><section class="parent-container"><div><div class=""><header><h3>heading</h3></header><div class="col-w1"><div class="col-item"><img src="#" alt="">Test</div><div class="col-item"><img src="#" alt="">Test</div><div class="col-item"><img src="#" alt="">Test</div></div></div></div></section>
Edit
In response to your more complete snippet here is an extended example. You are still not addressing the multiple levels necessary to achieve what you need (as noted by #danh in the comments as well). You need to address each parent-container and then the relevant children of each individually. The example below first uses your logic to filter the children of each container, and then checks if they have all been hidden or not. I've implemented it with a .hidden class instead of inline CSS but you can adapt as you see fit.
// query only the parent-containers
const parentContainers = document.querySelectorAll(".parent-container");
function toggleViews(filterName) {
for (const container of parentContainers) {
// query relevant children
const elements = [...container.querySelectorAll("[data-filter]")];
// hide filtered elements
for (const element of elements) {
if (element.dataset.filter === filterName || filterName === 'show-all') {
element.classList.remove('hidden');
} else {
element.classList.add('hidden');
}
}
// hide parent if all children are hidden
if (elements.every(element => element.classList.contains('hidden'))) {
container.classList.add('hidden');
} else {
container.classList.remove('hidden');
}
};
};
document.addEventListener('click', (e) => {
if (e.target.nodeName === 'BUTTON'){
toggleViews(e.target.textContent.toLowerCase().replace(' ', '-'));
}
});
section {
border: 1px solid #000;
}
.hidden {
display: none;
}
<button type="button" class="filter">Boat</button>
<button type="button" class="filter">House</button>
<button type="button" class="filter">Car</button>
<button type="button" class="filter">Show all</button>
<section class="parent-container">
<div>
<div class="">
<header>
<h3>Section 1</h3>
</header>
<div class="col-w1">
<a href="#" class="" data-filter="car">
<div class="col-item">
<img src="#" alt="">Car
</div>
</a>
<a href="#" class="" data-filter="bicycle">
<div class="col-item">
<img src="#" alt="">Bicycle
</div>
</a>
<a href="#" class="" data-filter="house">
<div class="col-item">
<img src="#" alt="">House
</div>
</a>
</div>
</div>
</div>
</section>
<section class="parent-container">
<div>
<div class="">
<header>
<h3>Section 2</h3>
</header>
<div class="col-w1">
<a href="#" class="" data-filter="shed">
<div class="col-item">
<img src="#" alt="">Shed
</div>
</a>
<a href="#" class="" data-filter="car">
<div class="col-item">
<img src="#" alt="">Car
</div>
</a>
<a href="#" class="" data-filter="boat">
<div class="col-item">
<img src="#" alt="">Boat
</div>
</a>
</div>
</div>
</div>
</section>
Currently i am building a storytelling website, where the client can iterate through several videos. However, there is also a page with chapters on the website. So when the client clicks on the next or previous button, the chapters should be lighten up on the chapter he currently is on.
At the moment i build a click counter, so the counter is counting up, when he clicked on next and counting down, when clicked on previous. I have 11 chapters, so 11 video's. I am checking the chapters by index. They are going from 0 to 11. When the client hits the next button, he's going to the next video and the click counter goes up with one.
At the moment i have trouble to connect this click counter to the current index of the chapter. So if the click counter goes to two for instance, the background of only chapter 2 (index 2) should be lighten up.
At the moment i have this:
<a href="#" class="vorige prev-rew button-sound">
<svg>icon</svg>
</a>
<a href="#" class="next prev-rew button-sound">
<svg> icon</svg>
</a>
<div class="marketing-chapter job-chapter">
<a href="#">
<div class="anchor-point chapter-1">
<p>1</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-2">
<p>2</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-3">
<p>3</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-4">
<p>4</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-5">
<p>5</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-6">
<p>6</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-7">
<p>7</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-8">
<p>8</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-9">
<p>9</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-10">
<p>10</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-11">
<p>11</p>
</div>
</a>
</div>
// Anchorpoint loop
var set = $(".anchor-point");
var length = set.length;
var ViewportCount = 1;
$('.prev-rew').on("click", function() {
if ($(this).hasClass('next')) {
console.log('klikkert next');
ViewportCount = ViewportCount + 1;
} else if ($(this).hasClass('vorige')) {
console.log('klikkert vorige');
ViewportCount = ViewportCount - 1;
}
set.each(function(index) {
index = ViewportCount;
console.log(index);
console.log(ViewportCount);
if(index == ViewportCount){
// Change the background-color of the number, connected to the index. So
current chapter will light up
}
});
});
To do what you require you can use the eq() method to directly select the element in the collection without a loop:
var set = $(".anchor-point");
var ViewportCount = 0;
$('.prev-rew').on("click", function() {
if ($(this).hasClass('next')) {
ViewportCount = ViewportCount + 1;
} else if ($(this).hasClass('vorige')) {
ViewportCount = ViewportCount - 1;
}
set.removeClass('active').eq(ViewportCount % set.length).addClass('active');
});
.active { background-color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Previous
Next
<div class="marketing-chapter job-chapter">
<a href="#">
<div class="anchor-point chapter-1 active"><p>1</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-2"><p>2</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-3"><p>3</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-4"><p>4</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-5"><p>5</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-6"><p>6</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-7"><p>7</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-8"><p>8</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-9"><p>9</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-10"><p>10</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-11"><p>11</p></div>
</a>
</div>
However, you can avoid the need for the counter variable and instead move the active class based on its current position in the DOM. The <a> elements wrapping the div can also be removed as it's invalid HTML, it makes the JS more straightforward and it's also not necessary in this case
$('.prev-rew').on("click", function() {
let $current = $('.active');
let $target = $current[$(this).data('action')]();
if ($target.length) {
$current.removeClass('active');
$target.addClass('active');
}
});
.active {
background-color: #C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Previous
Next
<div class="marketing-chapter job-chapter">
<div class="anchor-point chapter-1 active"><p>1</p></div>
<div class="anchor-point chapter-2"><p>2</p></div>
<div class="anchor-point chapter-3"><p>3</p></div>
<div class="anchor-point chapter-4"><p>4</p></div>
<div class="anchor-point chapter-5"><p>5</p></div>
<div class="anchor-point chapter-6"><p>6</p></div>
<div class="anchor-point chapter-7"><p>7</p></div>
<div class="anchor-point chapter-8"><p>8</p></div>
<div class="anchor-point chapter-9"><p>9</p></div>
<div class="anchor-point chapter-10"><p>10</p></div>
<div class="anchor-point chapter-11"><p>11</p></div>
</div>
Very simplicity I'm trying to sort an unordered list by the price only using vanilla JS and it needs to have IE 11 support. I'm getting a error ofdocument.querySelector(...).innerHTML and also not sure if Array.prototype.slice is supported in IE11 despite checking https://caniuse.com/
Heres what I've done:
function sort(){
var productsContainer = document.querySelector('.products-grid');
var els = Array.prototype.slice.call(document.querySelectorAll('.products-grid > .product'));
console.log("els" + els)
els.sort(function(a, b) {
na = parseInt(a.querySelector('.price-item--regular > span').innerHTML);
nb = parseInt(b.querySelector('.price-item--regular > span').innerHTML);
document.querySelector(".products-grid").innerHTML((nb - na));
});
}
<button onclick="sort()"> sort</button>
<ul class="products-grid">
<li class="product">
<img src="" alt="">
<div class="price-item--regular">
<span class="money pre-money" style="visibility: visible;">£2.96</span>
</div>
</li>
<li class="product">
<img src="" alt="">
<div class="price-item--regular">
<span class="money pre-money" data-product-id="" style="visibility: visible;">£5.71</span>
</div>
</li>
<li class="product">
<img src="" alt="">
<div class="price-item--regular">
<span class="money pre-money" data-product-id="" style="visibility: visible;">£5.71</span>
</div>
</li>
</ul>
This snippet takes each item and snips of the currency symbol with "substring(1)" then pushes each item to an array. It then sorts the array and replaces each innerHTML attribute. Hope this helps!
function sort() {
var productsContainer = document.querySelector('.products-grid');
var els = Array.prototype.slice.call(document.querySelectorAll('.products-grid > .product'));
var unsorted = [];
for (var i = 0; i < els.length; i++) {
unsorted.push(els[i].querySelector('.price-item--regular > span').innerHTML.substring(1));
}
var sorted = unsorted.sort(function(a, b) {
return a - b
});
for (var i = 0; i < els.length; i++) {
els[i].querySelector('.price-item--regular > span').innerHTML = "£" + sorted[i];
}
}
<button onclick="sort()"> sort</button>
<ul class="products-grid">
<li class="product">
<img src="" alt="">
<div class="price-item--regular">
<span class="money pre-money" style="visibility: visible;">£111.96</span>
</div>
</li>
<li class="product">
<img src="" alt="">
<div class="price-item--regular">
<span class="money pre-money" data-product-id="" style="visibility: visible;">£10.10</span>
</div>
</li>
<li class="product">
<img src="" alt="">
<div class="price-item--regular">
<span class="money pre-money" data-product-id="" style="visibility: visible;">£5.71</span>
</div>
</li>
<li class="product">
<img src="" alt="">
<div class="price-item--regular">
<span class="money pre-money" style="visibility: visible;">£8.31</span>
</div>
</li>
</ul>
Using JQuery this is a much cleaner method:
function sort() {
var productsContainer = document.querySelector('.products-grid');
var els = Array.prototype.slice.call(document.querySelectorAll('.products-grid > .product'));
els.sort(function(a, b) {
return a.querySelector('.price-item--regular > span').innerHTML.substring(1) - b.querySelector('.price-item--regular > span').innerHTML.substring(1);
});
$(productsContainer).append(els).html(); // THIS IS JQUERY
}
<button onclick="sort()"> sort</button>
<ul class="products-grid">
<li class="product">
<img src="" alt="a">
<div class="price-item--regular">
<span class="money pre-money" style="visibility: visible;">£111.96</span>
</div>
</li>
<li class="product">
<img src="" alt="b">
<div class="price-item--regular">
<span class="money pre-money" data-product-id="" style="visibility: visible;">£10.10</span>
</div>
</li>
<li class="product">
<img src="" alt="c">
<div class="price-item--regular">
<span class="money pre-money" data-product-id="" style="visibility: visible;">£5.71</span>
</div>
</li>
<li class="product">
<img src="" alt="d">
<div class="price-item--regular">
<span class="money pre-money" style="visibility: visible;">£8.31</span>
</div>
</li>
</ul>
In this simple expand/collapse navbar I made, the second navbar does not re-expand once it is collapsed, though the first one works fine. Once I collapse the second section, it stays collapsed and will not expand, though the first section continues to work fine, expanding and collapsing Thanks, all help is appreciated.
Here is my code below:
<script>
var CurrentSec;
var CurrentMenu;
var CurrentLink;
function Change(sec, state) {
CurrentSec = "Sec-"+sec;
CurrentMenu = "Menu-"+sec;
CurrentLink = "Link-"+sec;
if (state == 0) {
document.getElementById(CurrentSec).src = "http://www.pirates-online-rewritten.com/Images/collapsed.gif";
document.getElementById(CurrentMenu).style.display = "none";
document.getElementById(CurrentLink).href = "javascript:Change("+sec+", 1)";
}
else {
document.getElementById(CurrentSec).src = "http://www.pirates-online-rewritten.com/Images/expanded.gif";
document.getElementById(CurrentMenu).style.display = "inline";
document.getElementById(CurrentLink).href = "javascript:Change("+sec+", 0)";
}
}
</script>
<div class="sdmenu" style="visibility:visible">
<span class="title" id="community"><img src="http://www.pirates-online-rewritten.com/Images/clear.gif" class="menuspacer" width="131" height="15" alt="Pirates Community" /><img src="http://www.pirates-online-rewritten.com/Images/expanded.gif" class="arrow" alt="Close Menu" id="Sec-1"/></span>
<div id="Navbar"><div class="submenu" id="Menu-1">
<a id="Link-1" >Test1</a>
<a id="Link-2" >Test2</a>
<a id="Link-3" >Test3</a>
<a id="Link-4" >Test4</a>
<span class="menubottom" id="menubottom">
<img src="http://www.pirates-online-rewritten.com/Images/boxbot.gif" alt="-" />
</span>
</div>
<span class="title" id="community">
<img src="http://www.pirates-online-rewritten.com/Images/clear.gif" class="menuspacer" width="131" height="15" alt="Pirates Community" />
<img src="http://www.pirates-online-rewritten.com/Images/expanded.gif" class="arrow" alt="Close Menu" id="Sec-2"/>
</span>
<div id="Navbar-2">
<div class="submenu" id="Menu-2">
<a id="Link-5" >Test5</a>
<a id="Link-6" >Test6</a>
<a id="Link-7" >Test7</a>
<a id="Link-8" >Test8</a>
<span class="menubottom" id="menubottom">
<img src="http://www.pirates-online-rewritten.com/Images/boxbot.gif" alt="-" />
</span>
</div>
</div>
The problem is that you are using the id for link-1 more than once; and please check if your open and closing divs are matching.
I changed your function to this:
function Change(sec, state) {
console.log('Change(sec, state)', sec, state);
var section = document.getElementById("Sec-"+sec);
var menu = document.getElementById("Menu-"+sec);
var menulink = document.getElementById("MenuLink-"+sec); // <-- new MenuLink
if (state == 0) {
section.src = "collapsed.gif";
menu.style.display = "none";
menulink.href = "javascript:Change("+sec+", 1)";
}
else {
section.src = "expanded.gif";
menu.style.display = "inline";
menulink.href = "javascript:Change("+sec+", 0)";
}
}
And the matching html. Instead of Link-1 i used MenuLink-1 since Link-1 was already in use for another element.
<span class="title" id="community">
<img src="clear.gif" class="menuspacer" width="131" height="15" alt="foo" />
<a href="javascript:Change(1, 0)" id="MenuLink-1">
<img src="expanded.gif" class="arrow" alt="Close Menu" id="Sec-1"/>
</a>
</span>
You have to do the same for MenuLink-2
This is the full html with where the nesting of the open and closing of divs matches:
<div class="sdmenu" style="visibility:visible">
<span class="title" id="community1">
<img src="clear.gif" class="menuspacer" width="131" height="15" alt="foo" />
<a href="javascript:Change(1, 0)" id="MenuLink-1">
<img src="expanded.gif" class="arrow" alt="Close Menu" id="Sec-1"/>
</a>
</span>
<div id="Navbar">
<div class="submenu" id="Menu-1">
<a id="Link-1">m1.1</a>
<a id="Link-2">m1.2</a>
<a id="Link-3">m1.3</a>
</div>
</div>
<span class="title" id="community2">
<img src="clear.gif" class="menuspacer" width="131" height="15" alt="foo" />
<a href="javascript:Change(2, 0)" id="MenuLink-2">
<img src="expanded.gif" class="arrow" alt="Close Menu" id="Sec-2"/>
</a>
</span>
<div id="Navbar-2">
<div class="submenu" id="Menu-2">
<a id="Link-5">m2.5</a>
<a id="Link-6">m2.6</a>
<a id="Link-7">m2.7</a>
</div>
</div>
</div>
In this simple expand/collapse navbar I made, the second navbar does not re-expand once it is collapsed, though the first one works fine.
Once I collapse the second section, it stays collapsed and will not expand, though the first section continues to work fine, expanding and collapsing
Thanks, all help is appreciated.
Here is my code below:
<script>
var CurrentSec;
var CurrentMenu;
var CurrentLink;
function Change(sec, state) {
CurrentSec = "Sec-"+sec;
CurrentMenu = "Menu-"+sec;
CurrentLink = "Link-"+sec;
if (state == 0) {
document.getElementById(CurrentSec).src = "http://www.pirates-online-rewritten.com/Images/collapsed.gif";
document.getElementById(CurrentMenu).style.display = "none";
document.getElementById(CurrentLink).href = "javascript:Change("+sec+", 1)";
}
else {
document.getElementById(CurrentSec).src = "http://www.pirates-online-rewritten.com/Images/expanded.gif";
document.getElementById(CurrentMenu).style.display = "inline";
document.getElementById(CurrentLink).href = "javascript:Change("+sec+", 0)";
}
}
</script>
<div class="sdmenu" style="visibility:visible">
<span class="title" id="community"><img src="http://www.pirates-online-rewritten.com/Images/clear.gif" class="menuspacer" width="131" height="15" alt="Pirates Community" /><img src="http://www.pirates-online-rewritten.com/Images/expanded.gif" class="arrow" alt="Close Menu" id="Sec-1"/></span>
<div id="Navbar"><div class="submenu" id="Menu-1">
<a id="Link-1" >Test1</a>
<a id="Link-2" >Test2</a>
<a id="Link-3" >Test3</a>
<a id="Link-4" >Test4</a>
<span class="menubottom" id="menubottom">
<img src="http://www.pirates-online-rewritten.com/Images/boxbot.gif" alt="-" />
</span>
</div>
<span class="title" id="community">
<img src="http://www.pirates-online-rewritten.com/Images/clear.gif" class="menuspacer" width="131" height="15" alt="Pirates Community" />
<img src="http://www.pirates-online-rewritten.com/Images/expanded.gif" class="arrow" alt="Close Menu" id="Sec-2"/>
</span>
<div id="Navbar">
<div class="submenu" id="Menu-2">
<a id="Link-1" >Test5</a>
<a id="Link-2" >Test6</a>
<a id="Link-3" >Test7</a>
<a id="Link-4" >Test8</a>
<span class="menubottom" id="menubottom">
<img src="http://www.pirates-online-rewritten.com/Images/boxbot.gif" alt="-" />
</span>
</div>
</div>