We Keep Coding

How to make function work only for one button? Bootstrap-5 scroll to modals bottom

What I want to achieve is to create two buttons:
1: that opens modal window
2: opens same modal and scrolls to bottom
code:
$('#menu-item-6706').on('click', function (){
$('#exampleModal').on('shown.bs.modal', function (event) {
$("#exampleModal .modal-body").animate({ scrollTop: $('#exampleModal .modal-body').prop("scrollHeight")}, 'slow');
});
});
Here is full jsfiddle snippet: https://jsfiddle.net/mkx2auhj/1/
Script is almost working:
If you trigger for the the first time “launch demo modal” it opens modal.
If you trigger “Contact” it opens modal and scrolls to bottom. So it’s correct.
The problem is if you hit “launch demo modal” again it scrolls to bottom again, which is not desirable. I want it to open standard modal like the first time.

Have a bunch of buttons that all trigger the same modal with slightly
different contents? Use event.relatedTarget and HTML data-bs-*
attributes to vary the contents of the modal depending on which button
was clicked. https://getbootstrap.com/docs/5.1/components/modal/#varying-modal-content
Move the 'shown.bs.modal' event listener outside the click event and use event.relatedTarget to detect when the "Contact" button toggles the modal and then animate the modal accordingly. Try this
$('#exampleModal').on('shown.bs.modal', function (event) {
if( $(event.relatedTarget).is('#menu-item-6706') ){
$("#exampleModal .modal-body").animate({
scrollTop: $('#exampleModal .modal-body').prop("scrollHeight")
}, 'slow');
}
});

bootstrap accordion - don't collapse if clicking on open panel

I have set up bootstrap to hide currently open panels when opening a new panel using:
$('.collapse').on('show.bs.collapse', function () {
$('.in').collapse('hide');
});
I would like to extend this so that nothing happens if you click on a currently open panel, i.e. the open panel should stay open when clicking on it. It should only collapse when clicking on other collapsed panels.
I tried it like this, but it doesn't work:
$('.collapse').on('show.bs.collapse', function () {
$('.in').not(this).collapse('hide');
});
Is this possible somehow?
JSFiddle

Bootstrap adds the class 'in' to open panels, you can use that to detect weather the panel is already open, if so then you can skip the collapsing by invoking a event.stopPropagation() you can read more about stopPropagation here.
$('.panel-title > a[data-toggle="collapse"]').click(function(e){
target = $(this).attr('href')
if ($(target).hasClass('in')) {
e.preventDefault(); // to stop the page jump to the anchor target.
e.stopPropagation()
}
})
jsfiddle

According to #Sammy answer - for the Bootstrap 4.x you have to change
if ($(target).hasClass('in'))
to
if ($(target).hasClass('show'))

Close dropdown menu when clicking outside of it

I've got a problem with the navigation dropdown on my site that I've almost solved but can't quite fix. I'm worried I may have just made a mess out of my code.
When I introduced a "scroll to anchor tags" function with a preventDefault event, it broke my nav menu. The menu wouldn't close unless you clicked on the menu button again. I've finally got it to close after you click one of the links, but that's now the only way to close it. How do I have it close when clicking on the menu button or anywhere else on the site? I'm sure that bit of jQuery is the culprit, but don't know how to fix it or work around it.
HTML for the menu:
<div class="main-nav navbtn">
<div class="dropdown"><i onclick="myFunction()" class="dropbtn material-icons md-48"></i>
<div id="myDropdown" class="dropdown-content">
Home
About
Services
Work
Testimonials
Contact
Blog
</div>
</div>
</div>
And the related jQuery:
// When the user clicks on the button, toggle between hiding and showing the dropdown content
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
//// Close the dropdown menu if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches('.dropbtn')) {
dropdowns.forEach(function (openDropdown) {
dropdown.classList.contains('show') && dropdown.classList.remove('show');
});
}
};
////This is the section I made for it to close after clicking a link
jQuery(document).ready(function ($) {
$('.dropbtn').on('click', function () {
$(".dropdown-content").show();
});
$('.navlink').on('click', function () {
$(".dropdown-content").hide();
});
});
This is the potential problem that's screwing the other functions up.
//Scroll to anchor tags
$(document).on('click', 'a:not(.external)', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
var $root = $('html, body');
$('a').click(function () {
$root.animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
What in the world should I do to fix my menu?
You can take a look at the work-in-progress site at http://idpdx.kreigd.com
Update: I think I've got a lead on where things are getting confused. The function I'm using to add the dropdown functionality requires that the class "show" be added once the .dropbtn element is clicked, and removed when it is clicked again.
So what I really need to do is rework the code so that clicking .dropbtn opens the dropdown, and clicking on anything else, including the nav buttons and the .dropbtn element, will close it.
Update 2: Trying a different method. Ignore that first update.

Try this & let me know
$(document).click(function() {
$(".dropdown-content").hide();
// $(".dropdown-content").removeClass("show");
});
$(".dropdown-content").click(function(e) {
e.stopPropagation(); // if you click on the div itself it will cancel the click event.
});

you can try with something like this
$('body').not("#myDropdown").off('click').on('click',function(){$("#myDropdown").removeClass("show")});
I tried the code in your website but you have written some code on window.click which is causing issue.

#Nikhil's answer got me further but has it's downsides. I came up with the following solution:
$(document).click(function (e) {
var target = $(e.target);
// check the actual element being clicked is not the dropdown trigger itself
if (!target.hasClass('dropdown-trigger') && !target.closest('.dropdown-trigger').length) {
// use the framework to close the dropdown instead of just hiding it: hiding it will require you to click the trigger 2 times to reopen!
$('dropdown-trigger').dropdown('close');
}
});

Jquery toggle Effects or separated effects [duplicate]

I have a jquery dropdown menu and an modal window which is a trigger for ajax. The problem occurs when you click on link for ajax, and when you close it dropdowns are not working anymore. So dropdown is working when you dont click the ajax. When you click the link and close it, dropdown menu is not showing dropdown.
Try it and source code are here:
codepen.io/riogrande/pen/NxZLaQ
Step by step to reproduce:
Mouse over the right most "Lorem" and a drop down menu appears.
Exit the mouseover and click the link titled "Click here for ajax"
Click the "X" to exit the ajax popover
Step 1 no longer works.

You can use separate fadeIn and fadeOut functions instead of a single fadeToggle on hover and it will fix the issue:
$(".menu-dropdown").hover(
function(e) {
if ($(window).width() > 943) {
$(this).children("ul").stop(true,false).fadeIn(150);
e.preventDefault();
}
},
function(e) {
if ($(window).width() > 943) {
$(this).children("ul").stop(true,false).fadeOut(150);
e.preventDefault();
}
}
);
CodePen here.

What happens exactly when a link is tapped

I'm building a website where some elements in the navigation menu have a submenu. These submenus are shown when the mouse hovers over the element, but of course on mobile I cannot do that since there is no actual hover. A tap means a click, and that follows the link. I hoped on a simple solution but it doesn't work on my mobile device...
Here's a code snippet inside a loop, this is a menu item (li) that contains a submenu (ul):
$(this).find("a").on("mouseenter focusin click", function(e) {
if(submenu.css("display") != "block") {
e.preventDefault(); //should work on mobile
}
submenu.stop().css('display', 'block').animate({
top: 1.2em,
opacity: 1
}, 200);
});
Now I test this in Firefox. In normal use, you cannot actually click the menu item before the submenu comes out because display becomes block as soon as the mouse hovers over it. So in web console I type in:
$("#nav > ul > li:first-child > a").click()
This gives the expected behaviour. the submenu comes out but the link isn't followed. On mobile, the link is still followed... What gives?
Update
I just entered two alert statements. One that says the event type first thing in the handler, and one that says "preventing default" just before e.preventDefault. On my mobile browser (Dolphin browser for Android) it gives the following on a tap of the menu item:
Event is mouseenter
Preventing default
Event is click
Naturally, when the first event fired is "mouseenter", the default will not be prevented for click as that is the point where the menu shows up. In other words, I would need to make sure that the first mouseenter does show the menu but a click isn't fired... I could check the top css property for that, but I wonder if there is another way.

I got it working by adding another check to see if the submenu is at the proper position, rather than using the value of display.
$(this).find("a").on("mouseenter focusin click", function(e) {
if(e.type == "click" && submenu.css("top") != "1.2em") {
e.preventDefault();
}
submenu.stop().css('display', 'block').animate({
top: 1.2em,
opacity: 1
}, 200);
});