Develop Reference

Making an accordion expand on click and go to another page while remaining expanded

Here is the link to the codepen.
https://codepen.io/Cerebros/pen/VwMzdgR
What i am trying to achieve :
Currently when someone clicks on any part of the accordion tab it opens up the dropdown menu which is how it should be .
I would like it so that if someone clicks on the actual name of the accordion tab it would go to that respective page and also open the accordion on that page appropriately.
For example the first tab is Badminton. It has a dropdown of Event Images.
If i click Badminton it will go to the badminton page and also expand the dropdown below it to show the Event Image link.
If i click on Event image it would go to the event images page and keep the Badminton Tab expanded.
The accordion uses checkboxes to open and collapse it so what i tried was adding the following code :
$("#idoflink").click(function(e) {
if((e.target).tagName == 'INPUT') return true;
e.preventDefault();
$("#idofcheckbox").prop("checked", !$("#idofcheckbox").prop("checked"));
});
</script>
What it would do is check if the link is clicked, then for that checkbox it would set the it to checked.
however the prevent Default sets it so that the link cant be clicked.
Any guidance on this would be appreciated.
Thank you,

Hide other dropdowns when one is already open not working

Building a mega menu that mostly works. Last step I'm trying to achieve is when a user clicks on a mega menu item, it closes all other mega menus that are open.
Here's the JavaScript code I have below. The mega menu currently toggles correctly when clicking on each parent navigation link, but doesn't currently hide other mega menus when one mega menu is open.
const navLink = document.getElementsByClassName("menu-item-has-children");
// Loop over main navigation links
for (let i = 0; i < navLink.length; i++) {
// Grab specific ID that each mega menu has
const menuId = document.querySelector(`#${dropDownMenu[i].id}`);
// On click of top nav items, toggle mega menu visibility (this works).
navLink[i].addEventListener("click", () => {
menuId.classList.toggle("display-on");
});
// If the mega menu is open (display-on class is active), then don't show the other mega menus.
// (This does not work).
return menuId.classList.contains("display-on")
? (menuId.style.display = "none")
: "";
}
Link to live demo including HTML here if need be.
Thanks.

I have forked your example and simplified it. You can see the code here.
I make usage of Event Delegation. This allows you to handle all the click events (open dropdown, close dropdown via close button) in a single event handler (line 14 in the example) which is easier to read and maintain in my opinion.
The example does also close an already opened dropdown menu (see line 21 - 23).
I have also added an event handler to the document object to handle clicks outside of a dropdown to close it like you did.
Hope it solves your problem.
Best regards

Toggle Bootstrap dropdown by click on the link in modal

When a form submitted the modal box appears. This box contains a text with a link. Click on this link should close this box and toggle dropdown (auth form). The problem is that I can't handle toggling the dropdown by clicking this link.
Here is the code of click-handler of this link
$(function() {
$('#open_auth_form').click(function(e) {
e.preventDefault();
$('#participate_modal').modal('hide');
$('#auth_link').dropdown('toggle');
});
});
Why doesn't it work? I tried also to move dropdown toggling inside the 'hide.bs.modal', tried .trigger('click'). Nothing helped. But simple running
$('#auth_link').dropdown('toggle');
from console works well.

Check out this stack overflow question on How to open Bootstrap dropdown programmatically. There are a number of solutions you can try such as:
Triggering the click.bs.dropdown event:
$('#dropdown').trigger('click.bs.dropdown');
Or manually adding/removing the classes:
$('.dropdown').addClass('open'); // Opens the dropdown
$('.dropdown').removeClass('open'); // Closes it

In my case it was enough to add
e.stopPropagation();

jQuery/ javascript after something has been clicked, then check for something else

I am using a jquery plugin called mmenu to load a side menu when a button has been clicked.
That works fine, but Im also trying to get a hamburger style image going at the same time. I start off with the three lines and then when the menu button pressed it changes into a cross, this seems to work.
my issue comes when trying to close the menu, I want it to return back to a cross. The mmenu allows you to click anywhere to close the menu but I cant get the jquery right to change it back.
I added a class when the button (.menuvate) is clicked, called "active" which displays the cross but no matter how I try I cant get it to check that the class is active when anywhere on the page is clicked after the menu has been opened.
This is my code so far
$('.menuvate').click(function(){
$("#my-menu").trigger("open.mm");
$("#mm-0").addClass("menu-opened");
$("#nav-toggle").addClass("active");
});
$(document).click(function() {
alert("me");
});
I just put an alert in to tell me when this is being fired which of course it does everytime the page is clicked.
How do I get it to check for the active class after the menu has been opened when the page is clicked again so I can remove the class and change it back?
Thank you.

You will want to listen on the custom events to know if the menu is closing or closed.
Basically, what you want is:
$("#my-menu")
.on( "closing.mm", function() {
alert( "The menu has started closing." );
})
.on( "closed.mm", function() {
alert( "The menu has been closed." );
});
Read more on the ones fired by mmenu at http://mmenu.frebsite.nl/documentation/custom-events.html

You can use the jQuery hasClass attribute.
$("#mm-0").hasClass("menu-opened");

SAPUI5 Panel collapse event

This SAPUI5 application that I am developing uses a Panel control that has some buttons on it. Now I have to hide those buttons whenever a user collapses the panel and show them back upon expanding. I tried using the getCollapsed() method but to no effect. What I am basically looking for is a collapse event for the panel which is not available by default.
Any helping hand out there?
Thanks.

Hmmm, seems like there are no event handlers for the Panel control indeed...
As a workaround, you could add your own expand/collapse toggle button in the panel tray, and upon clicking that button you could grab the getCollapsed() state and show/hide your other buttons accordingly

You could use the sap.m.Panel https://openui5.hana.ondemand.com/docs/api/symbols/sap.m.Panel.html#event:expand
which has an expanded property and you can just use
setExpanded(true) ;
to expand the panel and let the control retain its state without you having to track it.
I am sure this has all changed since you asked the question and this answer is related to 1.24.2

Perhaps the only solution here is to replace the default collapse icon with a button of your own and attach the press event to it. Like:
1. Declare a `Panel` with `showCollapseIcon` set to false.
var oPanel = new sap.ui.commons.Panel({
showCollapseIcon: false
});
2. Add your own button. I prefer a `lite` button.
var oCollapseButton = new sap.ui.commons.Button({
icon: '<your icon>',
lite: true,
press: function (e) {
if (!oPanel.getCollapsed()) {
//If not collapsed
oPanel.setCollapsed(true);
//Code to hide panel buttons
//(and toggle collapse button image if needed) after this
} else {
//If already collapsed
oPanel.setCollapsed(false);
//Code to show panel buttons
//(and toggle collapse button image if needed) after this
}
}
});
oPanel.addButton(oCollapseButton);
P.S: You might also want to add some styling and alignment to your custom collapse button. For that, you can add a CSS3 class to your button before adding it to the panel like:
oCollapseButton.addStyleClass('<your class>');