After following a tutorial, I managed to create an accordion menu in JavaScript.
In the current setup, each main li with the class "ToggleSubmenu" acts as a category that can hide/show the sub-lis.
Now, my query is this: How can I retain the link functionality for ToggleSubmenu while still allowing it to toggle the visibility of other subcategories?
The challenge lies in keeping the functionality intact while not removing the 'return false' statement that currently blocks the link behavior.
Additionally, I'm looking to add a class named ".linked" to specify when a specific link should be activated. If this class is absent, the default behavior should remain.
Your assistance on this matter would be greatly appreciated.
- Benj
$(document).ready( function () {
// Hiding all submenus except for the one designated to open at load:
$(".navigation ul.subMenu:not('.open_at_load')").hide();
// Replacing span elements within list items with links:
$(".navigation li.toggleSubMenu span").each( function () {
// Storing text content of span element:
var TexteSpan = $(this).text();
$(this).replaceWith('<a href="" title="Show submenu">' + TexteSpan + '<\/a>');
});
// Modifying the click event on linked list items with the class "toggleSubMenu":
$(".navigation li.toggleSubMenu > a").click( function () {
// If the submenu was already open, we hide it:
if ($(this).next("ul.subMenu:visible").length != 0) {
$(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
}
// If the submenu is hidden, we close others and show it:
else {
$(".navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
$(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") });
}
// Preventing the link from executing:
return false;
});