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,

The back button does not work in the responsive menu

What I want to do is to return to the previous menu when the return button is clicked, can you help? I'm leaving a link on how to write the code here
const submenutitle = document.querySelector('.submenutitle');
https://codepen.io/tolgagnydnn/pen/abWmMpp

The problem was you had two listeners and the second (the back button) was being overwritten by the first (because the back button is part of the group of listeners from the first set). Essentially, the back button had 2 event listeners on it. I consolidated them. I had to change some of the code, so that it would find the right element to add/remove classes from:
for (const mobilemainmenuitem of mobilemainmenuitems) {
mobilemainmenuitem.addEventListener("click", (e) => {
const submenu = e.target;
if (submenu.classList.contains("btn"))
submenu
.closest(".mobilesubmenu")
.classList.remove("showleft", "showvisibility");
else
submenu
.closest("li")
.querySelector(".mobilesubmenu")
.classList.add("showleft", "showvisibility");
});
}
https://codepen.io/kinglish/pen/OJmRevq?editors=1111

Bootstrap 3 collapsed menu doesn't close on click in Angular4

I have been facing with the above problem in Angular. For mobile device the menu should collapse once it get select any one of them but it doesn't close on click.
Please help me out to get rid from this.
Thanks in advance

Try changing your (click) method, whatever is it called to toggle the variable the toggle is tied to.
menuOpenVariable: any = false;
clickedMenuItem(){
menuOpenVariable = false; // re-close the menu on yor click method.
// do menu things
}
And this should all be linked to your HTML file where the menu 'lives'.
<menu menuOpenVariable>
<menu-item (click)="clickedMenuItem()">item 1</menu-item>
</menu>

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>');

xul : creating a right click context menu item for only hyperlinks

I got a question to ask on building firefox plugin, basically my aim is to do following things,
1) In my plugin I want to show right click context menu item for only links[anchor tags] and hide the menu item for rest of the page
2) How to add dynamic list to my menu, i.e., adding the number of menu list items dynamically depending upon user's choice.
Can someOne point me to a right direction
Thanks !!

Bind an event listener for the contextmenu event and check whether the clicked element is a link, e.g.:
window.addEventListener("contextmenu", function(e) {
var menu = document.getElementById('your-menu-id');
if(e.target.nodeName == 'A') {
menu.hidden = false;
}
else {
menu.hidden = true;
}
}, false);
Read more about event properties and the menu element properties.
Have a look at the menu element's appendItem method.