Develop Reference

How do I make this onClick function work for multiple dropdown menus?

I've never tried Javascript before and looked around, but the tutorials I've found would take me weeks to figure out (attention/focus issues + I don't even know what words I want to search for) and none of the solutions I've searched for solved it, and I don't know enough to extrapolate it from other answers.
Can someone give me an example of this code (from w3School) extended to also toggle more dropdown menus? It has to be usable with keyboard like this one is.
Currently it's only handling the menu with an ID of "dropperso" and can open the Personal menu, I need the "openMenu" function to also react to the ID "dropsites" and be able to open the Other Sites menu. A note that the button and affected ID-having div are siblings.
No JQuery please.
JS:
function openMenu() {
document.getElementById("dropperso").classList.toggle("dropopen");
}
HTML:
<div class="dropdown">
<button onclick="openMenu()" class="drophover">Other Sites</button>
<div id="dropsites" class="dropdown-content">
A link
</div>
</div>
<div class="dropdown">
<button onclick="openMenu()" class="drophover">Personal</button>
<div id="dropperso" class="dropdown-content" style="right: 0;">
A link
A link
</div>
</div>
All that the .dropopen css class does is change the display of .dropdown-content from none to block.
I tried to search for my specific problem and all I found was either way beyond my ability to understand, "use JQuery" (I'm limited and can't use JQuery), or "use this other code (that doesn't work for mine)".
It works if I just copy the whole thing and make one function for each menu, but I get the feeling that's kinda bad spaghetti coding, and I can't compress this on my own without an example that works to learn from.
I'd be VERY grateful if you could solve that for me so I can use that later, and even MORE grateful if you could either explain how you made it work or link to the specific parts of documentation that explain what you're using.

If you want to toggle them all with one click use querySelectors to get all the dropdown menus and toggle each of them like this :
const dropdownMenus = document.querySelectorAll(".dropdown-content")
for(const menu of dropdownMenus){
menu.classList.toggle("dropopen")
}
but if you want to toggle each of them with same function and not writing a function for each menu you can do like this :
JS :
function openMenu(id) {
document.getElementById(id).classList.toggle("dropopen");
}
HTML :
<div class="dropdown">
<button onclick="openMenu('dropsites')" class="drophover">Other Sites</button>
<div id="dropsites" class="dropdown-content">
A link
</div>
</div>
<div class="dropdown">
<button onclick="openMenu('dropperso')" class="drophover">Personal</button>
<div id="dropperso" class="dropdown-content" style="right: 0;">
A link
A link
</div>
</div>

function openMenu(id) {
document.getElementById(id).classList.toggle("dropopen");
}
<button onclick="openMenu('dropsites')" class="drophover">Personal</button>
<button onclick="openMenu('dropperso')" class="drophover">Personal</button>

<div class="drop-down flex-row-AI-center" data-dropdown>
<button class="drop-btn" data-dropdownBtn>Categories</button>
<div class="dropdown-content flex-col" data-dropdown-content>
Action
Adventure
Anime
Comedy
Thriller
Fantasy
</div>
</div>
</div>
You have to give all the dropdown same ids/class/dataset-attributes
function toggleDropDown(e) {
const isDropdownBtn = e.target.matches('[data-dropdownBtn]');
//as long as user clicking inside of dropdown it won't close
if (!isDropdownBtn && e.target.closest('[data-dropdown]') != null) return;
let currDropdown;
if (isDropdownBtn) {
currDropdown = e.target.closest('[data-dropdown]');
currDropdown.classList.add('active');
}
document.querySelectorAll('[data-dropdown-content].active').forEach(dropdowm => {
if(currDropdown === dropdowm) return
dropdowm.classList.remove('active')
})
}

How to trigger data-* event in JQuery/JS?

I'm actually new to JQuery, and i am trying to trigger a quick view from the css framework Bulma, you can get documentation on the quickview here:
https://wikiki.github.io/components/quickview/
The quickview is set like this:
<div id="quickviewDefault" class="quickview">
<header class="quickview-header">
<p class="title">Quickview title</p>
<span class="delete" data-dismiss="quickview"></span>
</header>
<div class="quickview-body">
<div class="quickview-block">
...
</div>
</div>
<footer class="quickview-footer">
</footer>
</div>
And i can call it with this button (as saw on the wiki):
<button class="button is-primary" data-show="quickview" data-target="quickviewDefault">Show quickview</button>
So far its working, but i want to create a second button that ll call the quickview with JQuery, how can i do it ?
So far i've tried to click on the button who work great with JQuery when i click on my second button.
<!-- First button, work great -->
<button class="button is-primary" data-show="quickview" data-target="quickviewDefault">Show quickview</button>
<!-- Second button, doesn't work yet -->
<button class="clickmeplz">></button>
The first button is working well, and the second one should call the same quickview as the first one but with JQuery.
This is the code i've tried so far with my second button.
$(document).ready(function(){
$(".clickmeplz").click(function(){
$('button[data-target="quickviewDefault"]').click();
});
});
Unfortunately, it seem that the method click() cannot trigger the event of my first button like this.

Hello !
Let's try this:
$(document).ready(function(){
$(".clickmeplz").click(function(){
if($('div#quickviewDefault.is-active').length) { //If the quickview is showed
$('div#quickviewDefault.is-active').removeClass('is-active'); //Remove the class to hide
}else {
$('div#quickviewDefault').addClass('is-active'); //Add the class to show
}
});
});

Find out which close button closed an alertbox

I have an alert box with multiple close buttons:
<div data-alert class="alert-box cookies-consent">
<div class="informative-text">
Using cookies...
</div>
<div class="close-buttons">
Sure
Opt Out
</div>
</div>
I registered a handler for the close event as the docs suggest:
$(document).on('close.fndtn.alert', function(event) {
console.info('An alert box has been closed!');
console.info(event);
});
But unless I've missed it, the event doesn't seem to indicate which of the buttons was clicked.
How should I modify my HTML/JS to find out which of the close buttons was clicked? I don't want to modify Foundation's own JS, and I do want the UI behavior to remain consistent for both buttons, nice transitions and all.

Here is working spinet as #Panomosh mentioned above:
$('a.close').on('click',function(e){
console.log($(e.target).text())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-alert class="alert-box cookies-consent">
<div class="informative-text">
Using cookies...
</div>
<div class="close-buttons">
Sure
Opt Out
</div>
</div>
Greetings!

I Have A Dialog That Displays But Only One Button Changes the Cursor

I have what is probably an incredibly simple question, but I don't know how to resolve it and any help would certainly be appreciated.
Here's my code;
<div id='div2'>
<div class="DoYouHaveADirtBikeForSaleBox" id="DoYouHaveADirtBikeForSaleBox">
<h2>Got A Bike to Sell?</h2>
<p class="BikeForSaleButton">
Yes
</p>
<p class="BikeForSaleButtonNo">
<a onclick="javascript:var div = document.getElementById('div2');div.parentNode.removeChild(div);">No</a></p>
</div>
</div>
For a reason unbeknownst to me, the "No" link is not changing the cursor to a hand when hovered over but I haven't a clue how to address this.
I would suspect the problem is arising because the NO link doesn't have a href but being that I'm very novice I don't know how to remedy the situation so I ask that someone could please show me how to resolve this and I thank you in advance.

because you have no href attribute on the link. Add one and the cursor will change.
NITPICk: drop the javascript: it is not needed.

Add href ="#" to make it look like a link and not to navigate to a different page
<div id='div2'>
<div class="DoYouHaveADirtBikeForSaleBox" id="DoYouHaveADirtBikeForSaleBox">
<h2>Got A Bike to Sell?</h2>
<p class="BikeForSaleButton">
Yes
</p>
<p class="BikeForSaleButtonNo">
<a onclick="javascript:var div = document.getElementById('div2');div.parentNode.removeChild(div);" href ="">No</a></p>
</div>
</div>

The onclick event handler needs to supress the links default behavior to navigate to what's specified in the href attribute.
so you need href="#" also you dont need that javascript:
It should be like this:
<p class="BikeForSaleButtonNo">
No</p>
Here is a link to show the working code:
http://jsfiddle.net/dkU7B/1/
Edit: Forgot to mention another thing you can do is get rid of the onclick entirely and just use the href with javascript like so, but now you will need to use the javascript: just a neat trick.
No

You need an href="#", and I would separate your HTML and JS, it's just cleaner IMO:
<script>
var div = document.getElementById('div2');
function rmv() {
div.parentNode.removeChild(div);
}
</script>
<div id='div2'>
<div class="DoYouHaveADirtBikeForSaleBox" id="DoYouHaveADirtBikeForSaleBox">
<h2>Got A Bike to Sell?</h2>
<p class="BikeForSaleButton">
Yes
</p>
<p class="BikeForSaleButtonNo">
No</p>
</div>
</div>

Javascript on Multiple DIVs

I am using a Wordpress Theme (Incipiens) that has a show/hide Javascript to show a map on the contact page http://demo.themedev.me/wordpress_themes/incipiens/contact-us/
I want to use this function on a page multiple times to show/hide galleries.
<div class="map">
<div class="map_top">
<hr class="toolbox toolbox1">
</div>
<hr class="vertical_sep0">
<a class="show_map" href="javascript:void(0)"></a>
<div class="map_container"><div class="thismap"><iframe>........</iframe></div>
</div>
I have this working but the call to the js opens all divs. I therefore put a unique div id round each gallery and slightly changed the javscript...
<div class="map">
<div class="map_top">
<hr class="toolbox toolbox1">
</div>
<hr class="vertical_sep0">
<div id="silestone">
<div class="map_container">
[show_gallery width="124" height="124" galleryid="527"][/show_gallery]
</div>
</div>
</div>
It works but very oddly, sometimes the right one opens, sometimes the wrong one...not sure what i'm doing wrong, should I just have one javascript call that contains the ID's to all divs? If so how do I do this?

Since you have not shown the actual script you use for toggling, I assume you mean something like this (taken from the page) -
function (){
$(this).toggleClass('hide_map');
$('.map_container').slideToggle(400);
}
I would change that to -
function unhide(id){
$(this).toggleClass('hide_map');
$('#' + id).find('.map_container').slideToggle(400);
}
Does that work?