Bagseye
Bagseye

Reputation: 221

Self close accordions after opening another

I am looking to create the functionality when the user selects an accordion menu it opens that one and closes others.

At the moment I have the functionality that it removes the class if the user selects the top level of the currently opened menu.

But I have been trying to add in the close all others functionality. I realise this has been asked before and I have tried to implement the other very good suggestions that get the reuslts I need. However, I am struggling to match them with the structure I have. Also, my jQuery knowledge is weak at this time.

Does anyone have any suggestions? I am going round in circles at this time.

I have the following structure. I have no real control over this as it is a WP, pre-built, template project that I have inheritied and trying to shoehorn functionality - (simplified structure for ease)

$(document).ready(function() {
  $('.sidebar .menu-item-has-children').click(function(e) {
    $(this).toggleClass('sub-menu-open');
  });

  $('.sidebar .menu-item-has-children ul li a').click(function(e) {
    e.stopPropagation();
  });

  if ($('ul.sub-menu').find('li.current-menu-item').length !== 0) {
    $('li.current-menu-item').closest('.sidebar .menu-item-has-children').addClass('sub-menu-open');
  }
});
.sub-menu {
  display: none;
}

.sub-menu-open .sub-menu {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside id"sidebar" class="sidebar fusion-widget-area fusion-content-widget-area fusion-sidebar-left fusion-employanapprentice-accordionmenu fusion-sticky-sidebar">
  <div class="widget widget_nav_menu">
    <div class="menu-employ-an-apprentice-accordion-container">
      <ul id="menu-employ-an-apprentice-accordion">
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a href="#">Link 1 - No sub menu</a>
        </li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
          <a href="#">Link 2 - Has Sub menu</a>
          <ul class="sub-menu">
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
          </ul>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a href="#">Link 3 - No sub menu</a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a href="#">Link 4 - No sub menu</a>
        </li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
          <a href="#">Link 5 - Has Sub menu</a>
          <ul class="sub-menu">
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</aside>

JS FIDDLE

Upvotes: 0

Views: 63

Answers (3)

Negi Rox
Negi Rox

Reputation: 3922

just replace your jquery code

$('.sidebar .menu-item-has-children').click(function(e) {
    $('.sidebar .menu-item-has-children').removeClass('sub-menu-open')
    $(this).addClass('sub-menu-open');
});

you can view here

Upvotes: 1

skobaljic
skobaljic

Reputation: 9634

Simply add/remove classes this way:

$(document).ready(function() {
    var allSubmenus = $('.sidebar .menu-item-has-children');
    allSubmenus.click(function(e) {
        var thisSubmenu = $(this);
        if (thisSubmenu.hasClass('sub-menu-open')) {
            thisSubmenu.removeClass('sub-menu-open');
        } else {
            allSubmenus.removeClass('sub-menu-open');
            thisSubmenu.addClass('sub-menu-open');
        };
    });
});
.sub-menu {
    display: none;
}

.sub-menu-open .sub-menu {
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside id "sidebar" class="sidebar fusion-widget-area fusion-content-widget-area fusion-sidebar-left fusion-employanapprentice-accordionmenu fusion-sticky-sidebar">
    <div class="widget widget_nav_menu">
        <div class="menu-employ-an-apprentice-accordion-container">
            <ul id="menu-employ-an-apprentice-accordion">
                <li class="menu-item menu-item-type-post_type menu-item-object-page">
                    <a href="#">Link 1 - No sub menu</a>
                </li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
                    <a href="#">Link 2 - Has Sub menu</a>
                    <ul class="sub-menu">
                        <li>
                            <a href="#">Links</a>
                        </li>
                        <li>
                            <a href="#">Links</a>
                        </li>
                        <li>
                            <a href="#">Links</a>
                        </li>
                        <li>
                            <a href="#">Links</a>
                        </li>
                    </ul>
                </li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page">
                    <a href="#">Link 3 - No sub menu</a>
                </li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page">
                    <a href="#">Link 4 - No sub menu</a>
                </li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
                    <a href="#">Link 5 - Has Sub menu</a>
                    <ul class="sub-menu">
                        <li>
                            <a href="#">Links</a>
                        </li>
                        <li>
                            <a href="#">Links</a>
                        </li>
                        <li>
                            <a href="#">Links</a>
                        </li>
                        <li>
                            <a href="#">Links</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</aside>

Updated Fiddle.

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337560

To close other menus when another is opened you can select all open instances using the .sub-menu-open class, then just remove that class from them:

$(document).ready(function() {
  $('.sidebar .menu-item-has-children').click(function(e) {
    $('.sub-menu-open').not(this).removeClass('sub-menu-open'); // add this line
    $(this).toggleClass('sub-menu-open');
  });

  $('.sidebar .menu-item-has-children ul li a').click(function(e) {
    e.stopPropagation();
  });

  if ($('ul.sub-menu').find('li.current-menu-item').length !== 0) {
    $('li.current-menu-item').closest('.sidebar .menu-item-has-children').addClass('sub-menu-open');
  }
});
.sub-menu {
  display: none;
}

.sub-menu-open .sub-menu {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside id"sidebar" class="sidebar fusion-widget-area fusion-content-widget-area fusion-sidebar-left fusion-employanapprentice-accordionmenu fusion-sticky-sidebar">
  <div class="widget widget_nav_menu">
    <div class="menu-employ-an-apprentice-accordion-container">
      <ul id="menu-employ-an-apprentice-accordion">
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a href="#">Link 1 - No sub menu</a>
        </li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
          <a href="#">Link 2 - Has Sub menu</a>
          <ul class="sub-menu">
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
          </ul>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a href="#">Link 3 - No sub menu</a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a href="#">Link 4 - No sub menu</a>
        </li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
          <a href="#">Link 5 - Has Sub menu</a>
          <ul class="sub-menu">
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</aside>

Upvotes: 1

Related Questions