We Keep Coding

Dropdown not working the second time when clicked using dom

I have made a navigation tab with buttons, and a side-button which displays a list of files when I click the nav button.
Visual representation:
check1 check2 check3
dropdown (assuming check1 is clicked)
1.txt
2.txt
All the information comes up properly when I click on these checks in the console. but when I click on the button second time, it doesn't display any dropdown even though it shows correct information in console.
Code for function to create dropdown:
function add_pvt_dropdown(files) {
const dropdown_div = document.getElementById("pvt_list_dropdown");
//console.log(dropdown_div.childNodes[2])
console.log("these are the child nodes \n:", dropdown_div.childNodes, "and this is the lenght", dropdown_div.childNodes.length)
if (dropdown_div.childNodes[2])
dropdown_div.removeChild(dropdown_div.childNodes[2])
console.log(dropdown_div)
const UL = document.createElement("ul");
//files = localStorage.getItem('all_file_in_dir').split(',')
if (typeof (files) === undefined && files == null) {
alert("choose something")
} else {
UL.setAttribute("class", "dropdown-menu");
UL.setAttribute("id", "pvt_option");
UL.setAttribute("aria-labelledby", "dropdownMenuButton");
files.forEach(val => {
if (val.includes('CSV_')) {
var li = document.createElement('li');
var a = document.createElement('a');
a.setAttribute('class', "dropdown-item")
a.setAttribute('id', val)
li.appendChild(a);
UL.appendChild(li)
t = document.createTextNode(val);
a.innerHTML = a.innerHTML + val;
console.log(a.innerHTML)
}
});
dropdown_div.appendChild(UL)
}
}
HTML code
<div id="pvt_list_dropdown" class="dropdown" data-toggle="dropdown" data-bs-toggle="dropdown" data-bs-toggle="dropdown" >
<button class="btn btn-secondary dropdown-toggle btn-sm" type="button" id="dropdownMenuButtonPvt" data-toggle="dropdown" data-bs-toggle="dropdown" aria-expanded="false">
List
</button>
</div>
Functionality: when I click on the navigation buttons, it takes all the files from a particular directory and shows as dropdown. As mentioned, it works just once, but when I click any other button or the same button twice, nothing is shows up in the dropdown.
Further information: I checked that it may be an arrangement issue with js and bootstrap but even correcting that doesn't help:
<script src="https://unpkg.com/#popperjs/core#2"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
how information is shown for that element:
<div id="pvt_list_dropdown" class="dropdown">
<button class="btn btn-secondary dropdown-toggle btn-sm" type="button" id="dropdownMenuButtonPvt" data-bs-toggle="dropdown" aria-expanded="false">List</button>
<ul class="dropdown-menu" id="pvt_option" aria-labelledby="dropdownMenuButton">
<li>
<a class="dropdown-item" id="f1.csv">f1.csv
</a>
</li>
<li>
<a class="dropdown-item" id="f2.csv">f2.csv
</a>
</li>
</ul>
</div>
Edit:
information on how events are triggered:
the menu bar is called when DOM is loaded:
document.addEventListener("DOMContentLoaded", menu_tags)
menu_tags is a function that will dynamically create the menu using create an element
function menu_tags() {
var check = ["check1",
"check2"
]
sub_checks = [
"sub_checks1"
]
var toadd = document.createDocumentFragment();
var i;
for (let i = 0; i < check.length; i++) {
var newLi = document.createElement('a');
newLi.href = "#" + check[i];
newLi.innerHTML = check[i];
newLi.id = check[i];
newLi.className = "tablinks"
newLi.onclick = function() {open(event, check[i])};
// if(lib_verify_check[i] == "lib-checker"){
// }
toadd.appendChild(newLi);
}
document.getElementById("myTopnav").appendChild(toadd)
}
The open function will fetch the information for files for selected check
function open(event, checkname){
var i, tabcontent, tablinks;
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace("active", "");
}
event.currentTarget.className += " active";
console.log(event.currentTarget.id)
localStorage.setItem('selected_check', event.currentTarget.id)
// Exists.
if(event.currentTarget.id){
get_files()
console.log("changed")
}
//localStorage.getItem('get_files')
}
in the get_files() function, all the file information will be stored and that information will be displayed in dropdown.
Please find the fiddle link below:
Note that get_files wont work in fiddle, this is for checking the functionality:
fiddle_link

Javascript function not reachable after settimeout

I have designed following code snippet:
<div id="content">
<h3>Select Images Below</h3>
<ul id="imagegallery">
<li>
<a class='a' href="./img/team/t1.jpg" title="The crowd goes wild" onclick="">
<img src="./img/team/t1.jpg" height="50px" width="50px" alt="the band in concert" />
</a>
</li>
<li>
<a class='a' href="./img/team/t2.jpg" title="An atmospheric moment">
<img src="./img/team/t2.jpg" height="50px" width="50px" alt="the bassist" />
</a>
</li>
<li>
<a class='a' href="./img/team/t3.jpg" title="Rocking out">
<img id='image' src="./img/team/t3.jpg" height="50px" width="50px" alt="the guitarist" />
</a>
</li>
<li>
<a class='a'href="./img/team/t4.jpg" title="Encore! Encore!">
<img id='image' src="./img/team/t4.jpg" height="50px" width="50px" alt="the audience" />
</a>
</li>
</ul>
<div>
<img id='placeholder', src="./img/resources/neutral_1.jpg", height="450px" width="550px" alt="Image gooes here", style="margin-bottom: 50px;padding: 10px;">
</div>
<div id="loading">
<img src="img/loading.gif" alt="">
</div>
<div id="show">
<h1 id ='h'>It works</h1>
</div>
</div>
and the JS for this code is something like this
window.onload = function() {
var links = document.getElementsByClassName('a');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function(e) {
// Hide results
document.getElementById('placeholder').style.display = 'none';
// Show loader
document.getElementById('loading').style.display = 'block';
setTimeout(showpic(this), 2000);
e.preventDefault();
});
}
function showPic(whichpic) {
document.getElementById('placeholder').style.display = 'block';
var source = whichpic.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src', source);
return false;
}
};
I am trying to show the clicked image in the placeholder below,reading the source from href of a tags and assigning it to src of placeholder, but the problem I am facing is that showpic is never called/reached. how should i modify my code to resolve this problem. I click the image, loader appears and then image loads in browser window

This is not correct
setTimeout(showpic(this), 2000);
You should pass a function to setTimeout but you are calling it and actually passing some result of one's execution. You should do like this, for example
setTimeout(() => showpic(this), 2000);
You have a typo. You declare your function as showPic but call it as showpic

Correct showpic(this) to () => showpic(this).Your call to the showPic function is misspelled. Also your showPicfunction does not need to be wrapped inside of your window.onload function. Your JS should look like this and it should work:
window.onload = function() {
var links = document.getElementsByClassName('a');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function(e) {
// Hide results
document.getElementById('placeholder').style.display = 'none';
// Show loader
document.getElementById('loading').style.display = 'block';
setTimeout(() => showPic(this), 2000);
e.preventDefault();
});
}
}
function showPic(whichpic) {
document.getElementById('placeholder').style.display = 'block';
var source = whichpic.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src', source);
return false;
}

How to hide an accordion tab on second click

Let's say I open an accordion tab with one click, and I want to close it with the second click.
This is the JS/jQuery I have so far:
var APP = window.APP = window.APP || {};
APP.accordion = (function () {
var $accordionHeader = $('.accordion__header');
var $accordionContent = $('.accordion__content');
var showAccordionContent = function(e) {
var $t = $(this);
$accordionHeader.removeClass('accordion__header--active');
$t.addClass('accordion__header--active');
$accordionContent.removeClass('accordion__content--expanded');
$t.next().addClass('accordion__content--expanded');
$('html, body').animate({
scrollTop: $t.offset().top - 60
}, 500);
e.preventDefault();
};
var bindEventsToUI = function () {
$accordionHeader.on('click', showAccordionContent);
};
var init = function () {
bindEventsToUI();
};
return {
init: init
};
}());
HTML:
<div class="accordion__tab">
<a href="#" class="accordion__header accordion__header--active">
Setting alerts
<span class="accordion__arrow"></span>
</a>
<div class="accordion__content">
<p>
{{!-- things --}}
</p>
<ul class="cf">
<li>
{{!-- more things --}}
</li>
</ul>
</div>
</div>
<div class="accordion__tab">
<a href="#" class="accordion__header">
Setting alerts
<span class="accordion__arrow"></span>
</a>
<div class="accordion__content">
<p>
{{!-- things --}}
</p>
<ul class="cf">
<li>
{{!-- more things --}}
</li>
</ul>
</div>
</div>
Suggestions?

I would do it like this, just some pseudos
var bindEventsToUI = function () {
$accordionHeader.on('click', toggleAccordionContent);
};
var toggleAccordionContent = function (e) {
var accordionIsOpen = $(this).classList.indexOf('accordion__header--active') >= 0; // may need to use another selector base on `this`
return accordionIsOpen ? hideAccordionContent.call(this) : showAccordionContent.call(this);
}

I guess you are looking for this. Modified showAccordionContent method logic a bit.
Hope this is what you are looking for.
This change will now close already open accordion on clicking it. And once you click on inactive accordion-header that will open. There might be a condition where user closes all the accordion after this code change.
var showAccordionContent = function(e) {
var $t = $(this);
/*Modified block logic*/
if($t.hasClass('accordion__header--active')){
$t.removeClass('accordion__header--active');
$t.next().removeClass('accordion__content--expanded');
}else{
$accordionHeader.removeClass('accordion__header--active');
$accordionContent.removeClass('accordion__content--expanded');
$t.addClass('accordion__header--active');
$t.next().addClass('accordion__content--expanded');
}
$('html, body').animate({
scrollTop: $t.offset().top - 60
}, 500);
e.preventDefault();
};

Event firing and can't avoid happening

I'm new with Javascript, and I'm developing a webapp. I'm using quojs, a library for tactil gestures, but my problem, I think, comes from my inexperience with Javascript. The app y basically, an images gallery that generates dinamically, and lets you interact with each image. On taphold, an interactive menu merges inside the image. On singleTap it should make 2 different actions depending if we are already in "taphold state" or not. If case is we ARE IN TAPHOLD, it showld ONLY desapear the interactive menu inside the image. Then, on the next singleTap (now WITHOUT TAPHOLD STATE), it showld go inside the image. For this, i'm actually using AJAX.
The taphold function is working fine, but the problem is that the tap action, keeps firing no matter what I try to put inside the code to administrate when it must trigger or not.
I know it's a bit difficult to explain and understand, but I couldnt find the solution yet...
Here are the files I'm using.
/////////////////////////////////////// TAP.JS ///////////////////////////////////////////////
$(document).ready(function(){
var quojs = $$(document);
isHold = false;
var all_spans = $$('#mainwrapper', 'div.showhide').hide(),
tapToShowImg = false;
var mobileMenu = $$('.footer-container', '#links-fix').hide();
var mainwrapper = $$('#mainwrapper');
var homeimgscont = $$('.homeimgscont');
var environment = $$.environment();
pinchedIn = true;
pinchedOut = false;
bottomMenu = false;
fullScrn = false;
if ($$.isMobile()) {
mobile = false;
if (environment.screen.width < 500) {
$$('.homeimgscont img.image').addClass('mobile');
mobile = true;
}
}else{
mobile = false;
}
/* SINGLE TAP */
$$('.homeimgscont div').on('singleTap', function(f) {
f.cancelBubble = true;
var allimgs =$$('.image');
console.log(f);
switch(isHold){
case true:
f.cancelBubble = true;
switch(fullScrn){
case true:
$$('.imgcont').show();
allimgs.removeClass('hiddenimgs');
break;
}
$$('.image').removeClass('blur').removeClass('blurmobile');
$$('.imgcont').removeClass('fullscrn');
$$('.homeimgscont .image').removeClass('tappedimg');
mobileMenu.hide();
bottomMenu = false;
all_spans.hide();
isHold = false;
break;
case false:
var singleImg = $$(this).children('.image');
var currentImgId = singleImg.attr('id');
$$('.homeimgscont .image').removeClass('tappedimg');
$$(this).children('.image').addClass('tappedimg');
tapToShowImg = true;
f.cancelBubble = true;
if (f.stopPropagation) f.stopPropagation();
$.ajax ({
type: 'POST',
data: {imgid: currentImgId, insingleimg: 'true', user: usr, usrid: usrid},
url: 'http://agus/home/imgtap.php',
success: function(data) {
$('#main').html(data);
}
});
break;
}
});
/* HOLD */
quojs.on('hold', '.homeimgscont .image', function(e) {
var allimgs =$$('.image');
var currentimg = $$(this);
var thisSpan = currentimg.parent().find('.insideimgmenu.showhide');
var showImgMenu = currentimg.parent().find('.imgmenu.showhide');
all_spans.hide();
switch(mobile){
case true:
if (homeimgscont.hasClass('pinchedin')) {
$$('.imgcont').hide();
currentimg.parent('.imgcont').addClass('fullscrn').show();
fullScrn = true;
}
allimgs.removeClass('blurmobile').removeClass('tappedimg');
currentimg.addClass('blurmobile');
isShowing = thisSpan.show(), showImgMenu.show();
break;
case false:
if (environment.screen.width < 500) {
$$('.imgcont').hide();
currentimg.parent('.imgcont').addClass('fullscrn').show();
fullScrn = true;
allimgs.removeClass('blur').removeClass('tappedimg').addClass('hiddenimgs');
currentimg.removeClass('hiddenimgs').addClass('blur');
isShowing = thisSpan.show(), showImgMenu.show();
}else{
allimgs.removeClass('blur').removeClass('tappedimg').addClass('hiddenimgs');
currentimg.removeClass('hiddenimgs').addClass('blur');
isShowing = thisSpan.show(), showImgMenu.show();
}
break;
}
isHold = true;
e.cancelBubble = true;
e.preventDefault();
e.stopPropagation();
});
});
////////////////////////// GALLERY.PHP //////////////////////////////////////////////////
<div id="mainwrapper" class="main wrapper clearfix">
<div id="flat" class="homeimgscont pinchedin">
<div class="imgcont one">
<img src="IMAGE">
<div class="imgmenu showhide animated fadeInWithOpacity" style="display: none;"></div>
<div class="insideimgmenu showhide animated fadeInUp" style="display: none;">
<span class="titleofpublic">Here goes the title of public.</span>
<div class="icons">
<a href="#myModalEgg1" data-toggle="modal" class="eggicon">
<img src="img/egg.png" alt="egg">
</a>
<a href="#myModalOTP1" data-toggle="modal" class="hearticon">
<img src="img/otp.png" alt="otp">
</a>
<a class="fingersicon" onclick="$(this).click(function(){ $(this).children('img').attr('src','img/hand-green.png'); });">
<img src="img/like.png" alt="like">
</a>
<a href="#myModalMsg1" data-toggle="modal" class="plainicon">
<img src="img/paperplane.png" alt="comment">
</a>
</div><!-- .icons -->
<div class="addedby">
<span class="addedby-span-text">Added By</span>
<span class="addedby-span-name">Rama</span>
<div class="addedby-div-img egg" style="background: url('http://imagizer.imageshack.com/100x100f/539/7p8ZeS.jpg') center no-repeat; background-size: cover;"></div>
</div>
</div><!--.insideimgmenu.showhide-->
</div><!--.imgcont-->
<div class="imgcont two">
<img src="IMAGE">
<div class="imgmenu showhide animated fadeInWithOpacity" style="display: none;"></div>
<div class="insideimgmenu showhide animated fadeInUp" style="display: none;">
<span class="titleofpublic">Here goes the title of public.</span>
<div class="icons">
<a href="#myModalEgg2" data-toggle="modal" class="eggicon">
<img src="img/egg.png" alt="egg">
</a>
<a href="#myModalOTP2" data-toggle="modal" class="hearticon">
<img src="img/otp.png" alt="otp">
</a>
<a class="fingersicon" onclick="$(this).click(function(){ $(this).children('img').attr('src','img/hand-green.png'); });">
<img src="img/like.png" alt="like">
</a>
<a href="#myModalMsg2" data-toggle="modal" class="plainicon">
<img src="img/paperplane.png" alt="comment">
</a>
</div><!-- .icons -->
<div class="addedby">
<span class="addedby-span-text">Added By</span>
<span class="addedby-span-name">Rama</span>
<div class="addedby-div-img egg" style="background: url('http://imagizer.imageshack.com/100x100f/539/7p8ZeS.jpg') center no-repeat; background-size: cover;"></div>
</div>
</div><!--.insideimgmenu.showhide-->
</div><!--.imgcont-->
</div><!--#flat.homeimgscont.pinchedin-->
</div><!-- #mainwrapper .main.wrapper.clearfix -->
As I said, the gallery im using is quojs, thats why im using $$ before some functions. For sure i'm making some basic mistakes with the javascript.
Thanks every help since now!!!

Firstly, try not use a switch for a boolean variable. A if/else statement is more adequate and intuitive in this case.
If you want to cancel the trigger, you can just use a return false;. This will get out of the function.

Javascript accordion - collapse all

I have created a javascript accordion, which works when one accordion is always open, I was wondering how I might modify my code so that the accordion, can also be closed when clicked again - so that all are collapsed?
$('.accordion-bottom').hide();
$('.accordion-link').on('click', global.toggleAccordian);
};
global.toggleAccordian = function(e){
var $Arrow = $(this).find('.arrow');
var $parentDiv = $(this).parent();
var $bottomAccordion = $parentDiv.siblings('.accordion-bottom');
var $accordionLi = $parentDiv.parents().eq('1');
var $siblingLis = $accordionLi.siblings('li');
var $siblingBotAccordions = $siblingLis.find('.accordion-bottom');
var $siblingArrows = $siblingLis.find('.arrow');
$siblingArrows.addClass('arrow-down');
if (!$accordionLi.hasClass('active')){
$bottomAccordion.slideDown('slow');
$Arrow.removeClass('arrow-down');
$siblingBotAccordions.stop().slideUp('slow');
}
e.preventDefault();
return false;
}
html:
<ul class="accordion">
<li>
<div class="item-inner-padding accordion-item">
<div class="accordion-top">
Title<span class="arrow arrow-down">Down</span>
</div>
<div class="accordion-bottom">
</div>
</div>
</li>
</ul>