Ensuring only one group is open at a time in jQuery when a new group is opened

I need assistance in getting this functionality to work properly. My goal is to have only the clicked group open, while closing all others that are currently open.

Here's a specific example of what I am trying to achieve:

var accordionsMenu = $('.cd-accordion-menu');

if (accordionsMenu.length > 0) {

  accordionsMenu.each(function() {
    var accordion = $(this);
    accordion.on('change', 'input[type="checkbox"]', function() {
      var checkbox = $(this);
      (checkbox.prop('checked')) ? checkbox.siblings('ul').attr('style', 'display:none;').slideDown(300): checkbox.siblings('ul').attr('style', 'display:block;').slideUp(300);
    });
  });
}

<h1>Multi-Level Accordion Menu</h1>

<ul class="cd-accordion-menu animated">
  <li class="has-children">
    <input type="checkbox" name="group-1" id="group-1">
    <label for="group-1">Group 1</label>

    <ul>
      <li class="has-children">
        <input type="checkbox" name="sub-group-1" id="sub-group-1">
        <label for="sub-group-1">Sub Group 1</label>

        <ul>
          <li><a href="#0">Image</a></li>
          <li><a href="#0">Image</a></li>
          <li><a href="#0">Image</a></li>
        </ul>
      </li>
      <li class="has-children">
        <input type="checkbox" name="sub-group-2" id="sub-group-2">
        <label for="sub-group-2">Sub Group 2</label>

        <ul>
          <li class="has-children">
            <input type="checkbox" name="sub-group-level-3" id="sub-group-level-3">
            <label for="sub-group-level-3">Sub Group Level 3</label>

            <ul>
              <li><a href="#0">Image</a></li>
              <li><a href="#0">Image</a></li>
            </ul>
          </li>
          <li><a href="#0">Image</a></li>
        </ul>
      </li>
      <li><a href="#0">Image</a></li>
      <li><a href="#0">Image</a></li>
    </ul>
  </li>

  <li class="has-children">
    <input type="checkbox" name="group-2" id="group-2">
    <label for="group-2">Group 2</label>

    <ul>
      <li><a href="#0">Image</a></li>
      <li><a href="#0">Image</a></li>
    </ul>
  </li>

  <li class="has-children">
    <input type="checkbox" name="group-3" id="group-3">
    <label for="group-3">Group 3</label>

    <ul>
      <li><a href="#0">Image</a></li>
      <li><a href="#0">Image</a></li>
    </ul>
  </li>

  <li class="has-children">
    <input type="checkbox" name="group-4" id="group-4">
    <label for="group-4">Group 4</label>

    <ul>
      <li class="has-children">
        <input type="checkbox" name="sub-group-3" id="sub-group-3">
        <label for="sub-group-3">Sub Group 3</label>

        <ul>
          <li><a href="#0">Image</a></li>
          <li><a href="#0">Image</a></li>
        </ul>
      </li>
      <li><a href="#0">Image</a></li>
      <li><a href="#0">Image</a></li>
    </ul>
  </li>
</ul>
<!-- cd-accordion-menu -->

UPDATE: VIEW WORKING VERSION HERE

CREDIT: @jeto

jqueryhtmlcss

Answer №1

To implement the functionality shown in your fiddle, consider using a structure like the following:

$(function() {
  $('.cd-accordion-menu input[type="checkbox"]')
    .on('change', function(e) {
      // Retrieve the sibling <li>'s
      var $sameLevelSiblings = $(this).closest('li').siblings();

      // Uncheck the corresponding checkboxes and hide the items
      $sameLevelSiblings.find('input[type="checkbox"]').prop('checked', false);
      $sameLevelSiblings.find('ul').slideUp(300);

      // Display or hide the current items depending on checkbox state
      if ($(this).is(':checked')) {
        $(this).siblings('ul').slideDown(300);
      } else {
        $(this).siblings('ul').slideUp(300);
      }
    })
    // Hide all items on load
    .siblings('ul').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Multi-Level Accordion Menu</h1>

<ul class="cd-accordion-menu animated">
  <li class="has-children">
    <input type="checkbox" name="group-1" id="group-1">
    <label for="group-1">Group 1</label>

    <ul>
      <li class="has-children">
        <input type="checkbox" name="sub-group-1" id="sub-group-1">
        <label for="sub-group-1">Sub Group 1</label>

        <ul>
          <li><a href="#0">Image</a></li>
          <li><a href="#0">Image</a></li>
          <li><a href="#0">Image</a></li>
        </ul>
      </li>
      <li class="has-children">
        <input type="checkbox" name="sub-group-2" id="sub-group-2">
        <label for="sub-group-2">Sub Group 2</label>

        <ul>
          <li class="has-children">
            <input type="checkbox" name="sub-group-level-3" id="sub-group-level-3">
            <label for="sub-group-level-3">Sub Group Level 3</label>

            <ul>
              <li><a href="#0">Image</a></li>
              <li><a href="#0">Image</a></li>
            </ul>
          </li>
          <li><a href="#0">Image</a></li>
        </ul>
      </li>
      <li><a href="#0">Image</a></li>
      <li><a href="#0">Image</a></li>
    </ul>
  </li>

  <li class="has-children">
    <input type="checkbox" name="group-2" id="group-2">
    <label for="group-2">Group 2</label>

    <ul>
      <li><a href="#0">Image</a></li>
      <li><a href="#0">Image</a></li>
    </ul>
  </li>

  <li class="has-children">
    <input type="checkbox" name="group-3" id="group-3">
    <label for="group-3">Group 3</label>

    <ul>
      <li><a href="#0">Image</a></li>
      <li><a href="#0">Image</a></li>
    </ul>
  </li>

  <li class="has-children">
    <input type="checkbox" name="group-4" id="group-4">
    <label for="group-4">Group 4</label>

    <ul>
      <li class="has-children">
        <input type="checkbox" name="sub-group-3" id="sub-group-3">
        <label for="sub-group-3">Sub Group 3</label>

        <ul>
          <li><a href="#0">Image</a></li>
          <li><a href="#0">Image</a></li>
        </ul>
      </li>
      <li><a href="#0">Image</a></li>
      <li><a href="#0">Image</a></li>
    </ul>
  </li>
</ul>
<!-- cd-accordion-menu -->

Note: It's advisable to avoid using HTML elements/attributes directly as selectors; instead, consider utilizing data- attributes for better practice.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the background color of the body content to reflect changing content

How can I change the background color to #97EFFC when a menu item is selected? I want the body content background to be transparent until a menu item is displayed. Site.css /* Responsive: Portrait tablets and up */ @media screen and (min-width: 768px) { ...

css

Neglecting images on Zoom

Looking to scale up the elements on an HTML page by 50%, without affecting the resolution of images. Despite trying zoom: 150% in CSS3, it ends up zooming pictures as well, resulting in blurry visuals. Is there a way to enlarge all HTML components while ...

htmlcss

Can we combine JQuery includes with Angular Includes?

I have come across an issue while working on an application that combines both Jquery and AngularJS includes. It seems that Angular does not work properly after Jquery has included a file containing AngularJS markup. Specifically, Jquery is including the " ...

javascriptjqueryhtmlangularjs

Steps for Disabling Autocomplete in a JSP Page

How can I prevent the browser from remembering the username and password on my JSP page after submitting the form? I've already tried using autocomplete=off in the JSP code. <form name="indexFrm" id="indexFrm" autocomplete="off" method="post"> ...

javascripthtmljspauditing

Choosing a CSS selector for a class that does not have a specific ID

Looking for a way to select all elements with the class .tab-pane except for those with the id #home. I attempted using .tab-pane:not#home{...}, but it proved unsuccessful. Any ideas on how to achieve this? Sample HTML <div id="home" class="tab-pan ...

htmlcss

The method .slideUp() is not functioning as intended

My current project involves a page structure that looks like this: <div id="wrapper"> <div id="page_banner"> <canvas id="voucher_canvas"></canvas> <div id="div_voucher_img"><img id="voucher_img" src="" ...

jqueryhtmlslideup

Preventing Content Jumping When Concealing Elements: Tips and Tricks

I've been working on a project at , where you can click on a small map to expand a larger map below it. However, I noticed that when you scroll down to the large map and then try to close it using the button at the bottom, the content on the page jum ...

javascriptjqueryhtmlcssangularjs

Method for setting a checkbox as checked based on whether its value can be found in an array

I currently have the following input fields: <div id="my"> <input type="checkbox" value="1" name="names[]"> <input type="checkbox" value="2" name="names[]"> <input type="checkbox" value="3" name="names[]"> <input t ...

javascriptjquery

Using Selenium 2 to dynamically insert CSS styles into the currently visible webpage

I experimented with using jQuery on a webpage that has already been modified by jQuery in order to add custom CSS code: jQuery('head').append('<style type=\"text/css\">body { background: #000; }</style>'); When I ...

javajavascriptcssselenium-webdriver

Input the latest data into the Bootstrap form

Implementing the bootstrap4 framework in my web application, I have a table displaying various values. Each row includes an edit button at the end of the row (last column). The requirement is that when this edit button is clicked, a form should pop up with ...

javascripthtmlcssbootstrap-4

"Unveiling the Power of PWI: Integrating Picasa Web Albums with the Magic of jQuery

I am currently having an issue with the script found here: http://code.google.com/p/pwi/ It's a fantastic Picasa jQuery Gallery! Could someone please provide guidance on how to run this script in jQuery.noConflict() mode? I have already included the ...

gallerypicasajquery

Having difficulty aligning ListItem to the right within a List

I am working with an array that contains objects which I need to display in ListItems of a List. My goal is to show these ListItems from the array Objects in a layout where odd numbers are on the left and even numbers are on the right. However, I am facing ...

javascriptcssreactjsmaterial-ui

JavaScript and CSS animations offer dynamic and engaging ways to bring

I'm working on a div section and I want it to come down and rotate when a button is clicked. However, after moving to the bottom, it doesn't rotate as expected but instead returns to its initial position along the Y axis. How can I fix this issue ...

javascripthtmlcss

How can Material UI React handle long strings in menu text wrapping for both mobile and desktop devices?

Is there a way to ensure that long strings in an MUI Select component do not exceed the width and get cut off on mobile devices? How can I add a text-wrap or similar feature? Desktop: Mobile: <FormControl sx={{ m: 1, minWidth: '100%', marg ...

javascriptcssreactjstypescriptmaterial-ui

Experience a seamless transition as the background gently fades in and out alongside the captivating text carousel

I have a concept that involves three background images transitioning in and out every 5 seconds. Additionally, I am utilizing the native bootstrap carousel feature to slide text in synchronization with the changing background images. Solving the Issue ...

javascripthtmljquerycssbootstrap-4

Dropdown menu featuring a customizable input field

Is it possible to have a drop-down list with an input textbox field for creating new items in the same dropdown menu? ...

javascriptjqueryhtmlcssbootstrap-4

IE11 displaying empty placeholders instead of PrimeNG icons after deployment on server

Currently, I am in the midst of an Angular project that heavily relies on PrimeNg for various components. While everything runs smoothly when testing the project locally across all browsers (including IE11 and Chrome), a hiccup arises once the project is ...

cssangularinternet-explorer-11primeng

The jQuery code fails to run when a button is clicked inside an update panel

Can anyone assist me with an issue I am encountering? I have a button inside an update panel and I am using jQuery scripting to style the elements on this particular page. Initially, when the page loads, everything looks fine as the CSS styles are applie ...

asp.netjqueryajax

Webfont issues can lead to incorrect display on your website

Hello fellow Stackers! I could really use some help with a few IE-specific bugs I've encountered while working on a website for a friend. Check out the Website Here | View the Full CSS File The issue I'm facing is with the Google Webfont Ralewa ...

htmlcssinternet-explorercross-browserwebfonts

Showcase a Pair of Files Next to Eachother using HTML

I am a beginner with HTML and I am trying to accomplish a seemingly simple task. I have searched for similar questions and attempted the solutions provided, but none have worked for me. My goal is to have two documents displayed side by side on a web page ...

javascripthtmlcssimage