Develop Reference

Open menu on click close other menus

I have been working on getting a popup menu on a button.
There are 7 buttons with this menu, on the page in different containers. So far you can click the button and the menu opens.
Each menu opens with its own version of this, which works but not efficient:
$('.country-btn-portugal').click(()=>{
$(".dropdowna").toggleClass('active');
});
$('.country-btn-uk').click(()=>{
$(".dropdowna").toggleClass('active');
});
....etc... x7, one for each button menu.
I have tried to close the menu if an item is clicked but doesnt function with:
//close if menu <a> is clicked
$('#mclose').click(()=>{
$('.dropdown').removeClass('active');
});
And using the following to close the menu if an item that is not this element is clicked (does not work):
$(document).mouseup(function (e)
{
var container = $("#oclick");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
which i was hoping would also fix the issue when 1 menu is open and your next click is another menu, so you have both open.
The menu buttons will be serving separate divs (or card like boxes and are not siblings next to eachother. Hence finding it hard to compact the code. had to give each menu its own click functions.
it is a mess sorry. would be nice to see where im going wrong here.
fiddle --> https://jsfiddle.net/s4nk1zev/118/
html structure for one "card" with one "menu button".
<div class="country_card">
<span class="cc-t goth upperC">Portugal </span> <span class="cc-t goth upperC blued">Visa</span>
<div class="cc-txt">
text in here
</div>
<div class="cc-btn">
<button class="tablabel country-btn-portugal" id="portimg"></button>
<div id="mcontainer" class="dropdowna">
<a id="mclose" class="mclose" href="#home">Overview</a>
<a id="mclose" href="#about">Application Process</a>
<a id="mclose" href="#contact">Investment Options</a>
</div>
</div>
</div>

Well, this is how I would have done that.
Here is the updated fiddle
And this script would do enough
//open menu
$('.tablabel').click(function(event){
$('.tablabel').not(this).next().removeClass("active")
$(this).next().toggleClass("active")
});
//close if menu clicked
$(".dpd").click(function(e){
$(this).toggleClass("active")
})
//close if anything but menu clicked
What it does is, just listen for any click on the button and add active class to the next of it. Removing active class from all the active elements if there is any.
Secondly, you can use a class (as I've added one dpd) on the menue items to detect a click on them to close the open menu.
One more thing. Identifiers must be unique for each element you use. I've also updated them to be unique
Hope that helps

SInce your button and menu tags appear to always be siblings, if you add a common class to all your dropdowns, you can get a list of all of them more easily. Like this:
<div id="mcontainer" class="dropdown dropdowna">
Also as a suggestion, it's really not a very good idea to have duplicate ids in your document. It's against the html standard, and it can cause strange issues with getting tags by id.
Once you have a common class on all your dropdowns, you can do something like this to close all others, and toggle the one related to the button you're clicking.
function fnClick(e){
var $dd = $(this).next();
$('.dropdown').not($dd).removeClass('active');
$dd.toggleClass('active');
}
//open menu
$('.country-btn-portugal').click(fnClick);
$('.country-btn-uk').click(fnClick);
here's an update of your fiddle to demonstrate:
https://jsfiddle.net/s4nk1zev/143/

You can try using promise().done(), and reviewing the html class. This is a fiddle for you: https://jsfiddle.net/zxoLmf71/
using a promise on an element let you wait for the code to finish execution before start the new one. this is the code:
//open menu
const buttons = $('.country-btn');
const dropDownMenus = $('.dropdownmenu');
const dropDownItems = $('.dropDownItem')
buttons.click(function() {
dropDownMenus.removeClass('active');
$(this).next('div').promise().done(function() {
$(this).toggleClass('active');
});
});
//close if menu clicked
dropDownItems.click(function() {
dropDownMenus.removeClass('active');
});
Hope it helps

Jquery toggle activating on multiple elements instead of the element specified

alrighty Ive got what I hope is a rather easy question today for people knowledgeable in jquery. I have an toggle that activates on clicking a specific element, in this case I have targeted my logo image with an id of #logobutton. it works wonderfully however theres a problem, the animation also activates whenever I click on any and all other links on the page and even some random div boxed (like my nav bg). please note im very new to this javaScript jazz so I may be missing something you would consider quite obvious. thanks for the help!
here is the fiddle with all relevant code http://jsfiddle.net/tRf36/1/
jquery:
!--jquery script, must be above all jquery elements-->
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<!--script for bg toggle-->
<script type="text/javascript">
$( document ).ready(function() {
$("#logobutton").click(function() {
$(".galbox").toggleClass("galbox-change");
});
});
</script>
<!--bg fade hide on load-->
<script>
$(document).ready(function(){
$("#gallerybox").fadeTo(3000, 0.00, function() {
$("#gallerybox").fadeTo(1000, 1.00);
});
});
</script>
hopefully someone can see if I have something targeted incorrectly or whatever is causing the issue of my generic rather than specific selection of clickable area to activate this bg animation.

My previous answer was completely off base, sorry for that. Looking at the jsfiddle that you posted it appears that you have the logo button like this <button ... /> the browser is then ignoring the /> and just wrapping everything in a button. So that means that both the gallery box and the nav bar are surrounded by the button that is activating the animation. Changing the button to be like this should fix it:
<button type="button" class="logo" id="logobutton" value=""></button>

close <button> tag properly using </button>
All elements below button are treated as children if you do not close properly.

Two aspects conspire to cause the effect:
You have nested your nav bar divs inside the #logobutton button.
Event bubbling causes events triggered on an embedded element to eventually reach the #logobutton button, being processed by the registered event handler.
A solution is to check for the triggering element of the click event:
$("#logobutton").click(function (eve) {
if ($(eve.target).attr("id") === "logobutton") {
$(".galbox").toggleClass("galbox-change");
}
});
You can test this modification with this fiddle.
You can learn more about event bubbling in particular and event processing in browsers following these links:
quirksmode (ppk)
MDN

Jquery click function exclude children

Hey I'm having an issue figuring this one out.
JS
$('.jrm-menu-categories,#overlay-2').click(function() {
$('#overlay-2').toggle();
$('#overlay-3').hide();
});
HTML
<ul id="megaUber" class="megaMenu">
<li id="menu-item-1459" class="jrm-menu-categories">
<ul class="sub-menu sub-menu-1">
So basically what my JS does is create an overlay/modal effect when a sub menu is opened via click. I have the code repeated a few times with different classes and overlay ids hence the last line of code (needed so that only one overlay is shown at a time). Quickest and simplest way for a beginner like me, but that's not the subject.
When a sub-menu is open, and a user clicks anywhere in the sub-menu it toggles the overlay. I'm assuming this is because when I selected .jrm-menu-categories in the JS, it also selected the child elements, which happen to be .sub-menu
I'm thinking I need to use the .not() function, but can't figure it out.
can you guys help me with this? if possible write the code so I can try it out
Thanks!

You can try adding a second click handler to the children that will always return false. That way the click won't propagate up and dismiss:
$('.jrm-menu-categories').children('.sub-menu').click(function (e) {
e.stopPropagation(); // prevent click propagation, so parent click never fires.
})

You can test for the clicked item.
$('.jrm-menu-categories,#overlay-2').click(function(e) {
if (this == e.target){
$('#overlay-2').toggle();
$('#overlay-3').hide();
}
});

Bootstrap popover semi-manual toggle

I have an element
<span id="1">Element</span>
and made it as popover enabled element by initializing bootstrap popover using javascript
$('#how2').popover({
html:true,
placement:"right",
trigger:"click",
content:"somecontent",
title:"sometitle",
});
Then in "somecontent", I have a <script></script> whose content is
$(".popover-close-button").click(function(){
$(this).parent().parent().remove(); //remove the .popover element
});
whose function is giving a click listener to a X (close) button defined in "sometitle" to remove the whole ".popover" element created.
Toggle works. If id="1" element is clicked, it shows the popover. When it is clicked again, popover hides. The problem comes when the X button is clicked. The popover does hide (removed actually), but, when id="1" element is clicked to make the popover shows up, nothing happens. A popover will only shows up at the second click.
I will be happy to know why such thing happens. Does bootstrap make use of global javascript variable to determine the on/off status of the popover?
Note: $(this).parent().parent().remove(); is chosen over $("#1").popover("hide") for a DRY purpose. The content loaded inside popover is expected to be used in other places also. Therefore, putting "#1" there, is unacceptable.

try
.closest()
$(".popover-close-button").click(function(){
$(this).closest('.popover').remove(); //remove the .popover element
});
or
.parents()
$(".popover-close-button").click(function(){
$(this).parents('.popover').remove(); //remove the .popover element
});

You can also use $(elem).popover(destroy);
$('.popover-close-button').click(function() {
$('#how2').popover('destroy');
});
This removes the popover all together so that it won't be able to be triggered by another click.
See the docs here: http://getbootstrap.com/javascript/#popovers

Add these libraries
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Code For Pop over
<div class="container">
Click me
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});

Hide/show elements of a form when the user hit a link

i have a form with some input texts and radio buttons, i want to show when the user hit a hyperlink some other elements of the form, and when the user hit again, hide them. How can i do this? I think jquery will do the think, but im not a javascript developer so i need some orientation, Thanks a lot!

Here's an example. If you have the html below:
<p>Click on the gray 'button' below.</p>
<div id="ThingOne">
Hi, I'm thing one!
<div id="ButtonOne" style="background-color: Gray; width: 100px">Show Thing Two</div>
</div>
<div id="ThingTwo">
Hello, I'm thing two!
<div id="ButtonTwo" style="background-color: Gray; width: 100px">Show Thing One</div>
</div>
Then you can use the jquery below.
<script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#ButtonOne").click(function () {
$("#ThingTwo").fadeIn("slow");
$("#ThingOne").fadeOut("slow");
});
$("#ButtonTwo").click(function () {
$("#ThingOne").fadeIn("slow");
$("#ThingTwo").fadeOut("slow");
});
$("#ButtonOne").click();
});
</script>
Note the call to .click(), which hides the ButtonTwo div upon first execution. Also, you'll need update the reference to a JQuery library as appropriate. Hope this helps!

You need something like this:
$("#linkid").click(function() {
$("#togglediv").toggle()
})
And you probably want to put href='#' into the <a > tag, too.
Alternatively, you could do something like this:
$("#linkid").toggle(function(event) {
event.preventDefault()
$("#togglediv").show()
}, function(event) {
event.preventDefault();
$("#togglediv").hide()
})
This has the advantage that you can call other JS processing on a show or hide that might be specific to a show or specific to a hide, such as changing the link's text.

If this is your hyperlink: <a id="hideshowlink">Link</a>
Bind the hyperlink to a click event and then hide or show the elements you want in there. So $('input:radio').toggle(); will hide or show all radio buttons based on their current state (ie. if they are hidden, then show and vise versa).
$(document).ready(function() {
$('#hideshlowlink').click(function() {
$('input:radio').toggle();
$('#idofelementsToHideShow').toggle();
});
});
If you have all these elements in a div or some container, then just toggle the container inside the click event. Otherwise, you can toggle each element by itself.