I have a drop down menu list of links fixed on the left side of a web page I'm in the process of building. As of now, everything is working fine except I would like to have one more functionality; maintaining the position of my drop down menu after clicking links. The links will have the exact same drop down menu except that the title and content of the new page will change. Here are the core pieces I currently have in terms of code. If you click one of the headers it will drop down with the links available. Note, only one drop down is allowed to be open. If I had .html files for the links and clicked one, the page will "refresh" and the drop down menu will be shown as closed again losing its position before the link was clicked. I don't know how to modify the code to do what I want so I was hoping someone can help me. I would like to stick with just HTML, JS, and CSS if that's possible. Thanks, Here's the JS straight from the link
// Gotta give credit where credit is due
// https://stackoverflow.com/questions/45911424/have-only-one-drop-down-panel-open-on-click-using-html-js-and-css
var acc = document.getElementsByClassName("drop-down");
var i = 0;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function () {
var panel = this.nextElementSibling;
var maxHeight = panel.style.maxHeight;
//Collapse all divs first
var divs = document.getElementsByClassName("drop-down-panel");
for (i = 0; i < divs.length; i++) {
divs[i].style.maxHeight = null;
divs[i].previousElementSibling.classList.remove("active");
}
this.classList.toggle("active")
if (maxHeight) {
panel.style.maxHeight = null;
this.classList.remove("active");
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
};
}
Related
I'm coding an infinite vertical menu but I'm having trouble with the animation. I can't manage to make (without Jquery please) the scroll smoother.
I want to animate the addition and deletion of the 'noheight' class. The aim is that the appearance and disappearance of 'li' should not be abrupt, but should have a translational effect. I'd like to add a duration to the addition/deletion of the class but I don't know how to do it in classic js.
I tried to animate the noheight class with queries on the css side but it doesn't work. I would have to animate the addition of the class on the JS side?
A repeat of my code when clicking on another item in the list (On the functional level, it works perfectly, but on the animation level, it's very austere) :
function menuClick(elementClicked) {
let indexActive = searchActiveElement();
let gap = getIndex(elementClicked) < indexActive ? indexActive - getIndex(elementClicked) : getIndex(elementClicked) - indexActive;
for(let i = 0; i < gap; i++) {
indexActive = searchActiveElement();
if(getIndex(elementClicked) !== indexActive) {
ul.children[indexActive].classList.remove('active');
if(getIndex(elementClicked) < indexActive) {
// If the user clicks above the active element (the menu will go down)
ul.children[indexActive].previousElementSibling.classList.add('active');
ul.lastElementChild.remove();
ul.lastElementChild.classList.add('noHeight');
ul.firstElementChild.classList.remove('noHeight');
let newElement = document.createElement('li');
newElement.classList.add('noHeight');
newElement.innerHTML = ul.lastElementChild.previousElementSibling.innerHTML;
ul.firstElementChild.before(newElement);
ul.firstElementChild.addEventListener("click", function() {
menuClick(this);
});
}
The menu can be tested here : http://jsfiddle.net/3u8c2xb5/
Thanks in advance for your answers :D
i am using a javascript function to eexpand and collapse of accordion. i want to expand one item at a time and alos when i try to add some text into input box then also accordion is expanding.
pls refer ''''https://jsfiddle.net/nehajain/d8ozr9m4/
i want except from the input box, wherever i clicked on the heading button, accordion will expand
In your current code snippet, you're changing styles for clicked panel and not doing anything to already open accordion. You need to update styles for other open accordion and make them hidden.
So I've updated that code to use classes and on click removing classes from all panels and toggling for a clicked panel.
Following code will make sure that at a time only one accordion is open
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
// get list of panels
const panels = document.getElementsByClassName('panel');
// get panel for clicked button
var panel = this.nextElementSibling;
for(let i = 0; i < panels.length; i++){
// if panel is not equal to clicked panel then remove class
if(panel != panels[i]){
panels[i].classList.remove('active-panel');
}
}
this.classList.toggle("active");
panel.classList.toggle('active-panel');
});
}
working jsfiddle link https://jsfiddle.net/2f9ndcer/
the past few days I submitted a question about a pagination (how to add and remove an active state in css using pure JavaScript), And I got a great answer. And some what in the same problem i m having an issue removing an active state only this time when clicking on another div.
let questions = document.querySelectorAll('.question__container'),
questionBar = document.querySelectorAll('#bar'),
questionClose = document.querySelectorAll('.paragraph__close'),
answers = document.querySelectorAll('.answers__container');
/* activeBar / activeAnswer */
function resetQuestions() {
for (let i = 0; i < questions.length; i++) {
questionBar[i].classList.remove('activeBar');
answers[i].classList.remove('activeAnswer');
}
}
function addActiveAnswer() {
for (let i = 0; i < questions.length; i++) {
questions[i].addEventListener('click', function() {
resetQuestions();
questionBar[i].classList.add('activeBar');
answers[i].classList.add('activeAnswer');
questionClose[i].addEventListener('click', function() {
resetQuestions();
});
});
}
}
addActiveAnswer();
I m trying to build whats called a Q&A page, when a user clicks over a question, an answer fades in underneath, But when clicking the closing div element, the resetQuestions(); doesn't get executed.
Thank you in advance for any answer.
I'm trying to toggle the class of a parent li element when the sub ul element is active. I know how to do it in jQuery, but the goal with this project is to not rely on libraries like Bootstrap or jQuery.
I have a demo on CodePen: https://codepen.io/mikejandreau/pen/eRvOBQ
There's also a dev site using the same menu here: http://losaidos.com/dev/baseinstall/.
This is the JavaScript currently controlling the sub-menu toggles:
// Add toggles to menu items that have submenus and bind to click event
var subMenuItems = document.body.querySelectorAll('.page_item_has_children > a');
var index = 0;
for (index = 0; index < subMenuItems.length; index++) {
var dropdownArrow = document.createElement('span');
dropdownArrow.className = 'sub-nav-toggle';
dropdownArrow.innerHTML = 'More';
subMenuItems[index].parentNode.insertBefore(dropdownArrow, subMenuItems[index].nextSibling);
}
// Enables toggling all submenus individually
var subMenuToggle = document.querySelectorAll('.sub-nav-toggle');
for(var i in subMenuToggle) {
if(subMenuToggle.hasOwnProperty(i)) {
subMenuToggle[i].onclick = function() {
this.parentElement.querySelector('.children').classList.toggle("active");
this.parentElement.querySelector('.sub-nav-toggle').classList.toggle("active");
};
}
}
I tried duplicating the logic by adding this to the subMenuToggle[i].onclick function:
this.parentElement.querySelector('.page_item_has_children a').classList.toggle("active");
But no luck so far in getting it working. I get the feeling I'm close but missing something obvious.
Any pointers would be greatly appreciated - thanks in advance!
The answer was staring me in the face.
There was no need to do use .querySelector('.class-of-parent) because the target elements are already within the parent. I added this.parentElement.classList.toggle("active"); and it worked like a charm.
// Enables toggling all submenus individually
var subMenuToggle = document.querySelectorAll('.sub-nav-toggle');
for(var i in subMenuToggle) {
if(subMenuToggle.hasOwnProperty(i)) {
subMenuToggle[i].onclick = function() {
this.parentElement.querySelector('.children').classList.toggle("active");
this.parentElement.querySelector('.sub-nav-toggle').classList.toggle("active");
this.parentElement.classList.toggle("active"); // facepalm of obviousness
};
}
}
I just finished creating two buttons with an onclick event,
You can view the demo of the buttons here.
However, I need help with two issues which I'm not sure how I can solve.
Issue 1
As you can see in the demo, if you first click a button, a dropdown menu appears, but if you click on the second button while the first dropdown menu is visible, the second dropdown overlaps the first dropdown menu.
How can I close the dropdown when you click somewhere else on the page or on another button using javascript?
Issue 2
I want the button to look like this even if you hover over the button
And this is how it's going to look when you click the button and when the dropdown menu becomes visible. It should stay like this even if you don't have your mouse on the button or the dropdown menu.
How can I accomplish this with JavaScript?
Thanks in advance!
You just need to keep an array of your elements, when you set one to display, set the others not to.
var dropdowns = ['language', 'delivery-country'];
var elements = [];
var hideElements = function (dropdown) {
for (var i = 0, l = dropdowns.length; i < l; i++) {
if (dropdown !== dropdowns[i]) {
var div = document.getElementById(dropdowns[i] + '-dropdown');
div.style.display = '';
elements[i].className = 'inactive';
}
}
}
for (var i = 0, l = dropdowns.length; i < l; i++) {
elements[i] = document.getElementById(dropdowns[i] + '-icon');
(function (index) {
elements[index].onclick = function() {
var div = document.getElementById(dropdowns[index] + '-dropdown');
if (div.style.display !== '') {
div.style.display = '';
elements[index].className = 'inactive';
} else {
div.style.display = 'block';
elements[index].className = 'active';
}
hideElements(dropdowns[index]);
};
})(i);
}
For the second part of your question, add the respective classes in your html (inactive). The code above will toggle the classes, you just need to figure out the CSS. Start by removing the hover classes on the icons, and also use classes for the icons rather than ids which you need to specify for every element.