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/
Related
Hi I have to use popover or tooltip from boostrap... I call popover with classname from a lot of button.. I just want to open all button popover in the center of screen with javascript.
THX
I would add a css-class for all popover so u can identify them and loop over all elements and show them.
Here some example code:
// Get all elements with 'my-popover-class' class
const popoverCollection = document.getElementsByClassName('my-popover-class');
// Add your options
const popoverOptions = {};
for(let i = 0; i < popoverCollection .length; i++) {
let popover = new bootstrap.Popover(popoverCollection[i], popoverOptions );
popover.show();
}
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";
}
};
}
I have this simple dropdown faq system, I only want one content div to be open at a time, so I tried to use an if / else condition, but I can only make it work halfway.
I'm checking if the content div next to the trigger div has class is-visible — if not, add that class (this works)
But if the previous content div has (contains) class is-visible, I want to remove it, so only one content div is open at a time.
I've tried so many different conditions but I think I'm overcomplexifying it, this should be simple enough right?
https://jsfiddle.net/notuhm05/1/
var faqTrigger = document.querySelectorAll('.mm-faq-trigger');
for (var i = 0; i < faqTrigger.length; i++) {
faqTrigger[i].addEventListener('click', function() {
if (!this.nextElementSibling.classList.contains('is-visible')) {
this.nextElementSibling.classList.add('is-visible');
} else if (this.previousElementSibling.classList.contains('is-visible')) {
this.nextElementSibling.classList.remove('is-visible');
} else {
console.log("doesn't work");
}
});
}
Would greatly appreciate some pointers here! :-)
Here is a working solution:
Toggle the class is-visible on the clicked node
Iterate through all triggers and remove the class is-visible if the id of the href tag does not match the clicked nodes id. NOTE: I had to add an id property to the trigger href tag like <a id="1" href="#" class="mm-faq-trigger">Trigger</a>
Source Code:
var faqTrigger = document.querySelectorAll('.mm-faq-trigger');
for (var i = 0; i < faqTrigger.length; i++) {
faqTrigger[i].addEventListener('click', function() {
this.nextElementSibling.classList.toggle('is-visible');
for (var i = 0; i < faqTrigger.length; i++) {
var trigger = faqTrigger[i];
if (trigger.nextElementSibling !== null && trigger.id !== this.id) {
trigger.nextElementSibling.classList.remove('is-visible');
}
}
});
}
I have a navigation bar with 5 elements, drop down menu field, textarea and another text field. what i need:
to disable all navigation bar elements except Home when document be ready. then when i blur the text field remove attr disabled from them and activate again.
to separate all the values in the dropdown menu field started with 001 in additional drop down menu under the master in the navigation bar without the third part in the line (url) , append values started with 002 in additional drop down menu under CSS without (url) and 003 under javascript also without (url) .
when user click in logout option under home window close.
this is Demo:https://jsfiddle.net/ov43ebko/1/
$(document).ready(function(){
$('.css,.jscript,.jquery').attr('disabled','disabled');
$('.logOut').click(function(){
window.close();
});
// to split lines based on semicolon.
function check(){
var lines = $('.hiddenText textarea').val().split(/\n/);
var texts = [];
for (var i=0; i < lines.length; i++) {
texts.push($.trim(lines[i]));
}
for (var i=0; i < texts.length; i++) {
var removed1 = texts[i].split(';');
$(".masters").append($("<ul><li>").text(removed1[0]));
$(".css").append($("<ul><li>").text(removed1[1]));
$(".jscript").append($("<ul><li>").text(removed1[2]));
}
}
// to split dropdown menu choices to lines.
function c1() {
var resultLines = $('.filledField').find('option').size();
var textArea ="";
for (var i = 1; i <= resultLines; i++) {
var xItem = $('.filledField').find('option:nth-child(' + (i) + ')').text();
textArea += xItem ;
//code to split xItem into individual variables
}
$('.hiddenText textarea').val('');
$('.hiddenText textarea').val(textArea);
check();
}
$(".field").blur(function(){
$('.css,.jscript,.jquery').prop("disabled", false);
c1();
});
});
I hope that this is what you wanted to achieve.
1. to disable all navigation bar elements except Home when document be ready. then when i blur the text field remove attr disabled from them and activate again.
For this, have given pointer-events:none to disable li tags as they can't be disabled using attribute disabled.
$('.css,.jscript,.jquery').css('pointer-events', 'none');
And then enabled it by setting css back to all.
$(".field").blur(function() {
$('.css,.jscript,.jquery').css('pointer-events', 'all');
c1();
});
2. to separate all the values in the dropdown menu field started with 001 in additional drop down menu under the master in the navigation bar without the third part in the line (url) , append values started with 002 in additional drop down menu under CSS without (url) and 003 under javascript also without (url) .
I may have misunderstood this point but here is what I think you wanted. Have checked first parameter value and accordingly appended the second parameter value in ul under drop down menu.
if (parseInt(removed1[0]) == 1) {
$(".masters ul").append($("<li></li>").text(removed1[1]));
} else if (parseInt(removed1[0]) == 2) {
$(".css ul").append($("<li></li>").text(removed1[1]));
} else if (parseInt(removed1[0]) == 3) {
$(".jscript ul").append($("<li></li>").text(removed1[1]));
}
Please refer this fiddle.
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.