Trying to modify accordion menu for full bar clickable
Been trying my darndest this week to get this accordion menu working like I need it to and no luck so far. Right now on the mobile menu you can click the + for the submenu to drop down. My desired functionality is that a user can click the entire menu title for the submenu to drop down, and not just the + sign.
Here is my current jquery
- (function (jQuery) {
- jQuery.fn.extend({
- accordion: function () {
- return this.each(function () {
- var listObject = jQuery(this),
- elementDataKey = "accordiated",
- activeClassName = "active",
- activationEffect = "slideToggle",
- panelSelector = "ul, div",
- activationEffectSpeed = "fast",
- itemSelector = "li";
- if (listObject.data(elementDataKey)) return false;
- jQuery.each(listObject.find("ul, li>div"), function () {
- jQuery(this).data(elementDataKey, true);
- jQuery(this).hide()
- });
- jQuery.each(listObject.find("span.opener"), function () {
- jQuery(this).click(function (e) {
- activate(this, activationEffect);
- return void 0
- });
- jQuery(this).bind("activate-node", function () {
- listObject.find(panelSelector).not(jQuery(this).parents()).not(jQuery(this).siblings()).slideUp(activationEffectSpeed);
- activate(this, "slideDown")
- })
- });
- var active = location.hash ? listObject.find('a[href=\'' + location.hash + '\']')[0] : listObject.find("li.current a")[0];
- if (active) activate(active, false);
- function activate(el, effect) {
- jQuery(el).parent(itemSelector).siblings().removeClass(activeClassName).children(panelSelector).slideUp(activationEffectSpeed);
- jQuery(el).siblings(panelSelector)[effect || activationEffect](effect == "show" ? activationEffectSpeed : false, function () {
- if (jQuery(el).siblings(panelSelector).is(":visible")) jQuery(el).parents(itemSelector).not(listObject.parents()).addClass(activeClassName);
- else jQuery(el).parent(itemSelector).removeClass(activeClassName); if (effect == "show") jQuery(el).parents(itemSelector).not(listObject.parents()).addClass(activeClassName);
- jQuery(el).parents().show()
- })
- }
- })
- }
- })
- })(jQuery);
- jQuery(function ($) {
- $(".accordion").accordion();
- $(".accordion").each(function (index) {
- var activeItems = $(this).find("li.active");
- activeItems.each(function (i) {
- $(this).children("ul").css("display", "block");
- if (i == activeItems.length - 1) $(this).addClass("current")
- })
- })
- });
Followed by the menu html: