Can someone please take a look at my code snippet here: http://jsfiddle.net/o2gxgz9r/2287/
Currently, the design shows a plus and minus sign, but I would like to style them using CSS instead of using symbols. Additionally, I need assistance with implementing the functionality where clicking on the plus sign collapses the content and changes it to a minus sign.
Furthermore, I am looking for guidance on aligning the element that contains a submenu, specifically the "services" section.
function mobileMenu() {
var mobileMenu = jQuery('#mobile-menu');
var body = jQuery('body');
var mobileSubMenuTogglers = mobileMenu.find('.menu-item-has-children');
var mobileSubMenus = mobileMenu.find('.sub-menu');
jQuery('.menu-icon').on('click', function(){
mobileMenu.toggleClass('active');
body.toggleClass('no-scroll');
});
jQuery('#mobile-menu .menu-item-has-children').each(function(){
var menuElement = jQuery(this);
var subMenu = menuElement.find('.sub-menu');
var subMenuToggleElement = jQuery('<span class="toggle-sub-menu"><span class="line line-one">-</span><span class="line line-two">+</span></span>');
subMenu.before(subMenuToggleElement);
mobileSubMenuTogglers.on('click', function(){
jQuery(this).toggleClass('active');
jQuery(this).parent().find('.sub-menu').toggleClass('active');
});
});