title: How to show only one accordion at time
body: <p>I have several accordion drop downs, which I am able to open each and close each individually, but what i actually want to achieve is </p>
  
  <ol>
  <li>to automatically close the other when I open one</li>
  <li>to close one child when I open another child(for the multilevel accordion)</li>
  </ol>
  
  <p>Here's what I've been able to achieve</p>
  
  <pre><code>&lt;div class="a0f13_2aGAs"&gt;
      &lt;div class="_5cb4a_2yTAQ"&gt;&lt;span&gt;Categories&lt;/span&gt;&lt;/div&gt;
      &lt;ul class="_44ec6_3AFlz" id="accordion"&gt;
          &lt;li class="_99e51_2Fldz"&gt;
              &lt;button class="accordion"&gt;&lt;a href="#y"&gt;Main drop 1&lt;/a&gt;&lt;/button&gt;
              &lt;div class="panel"&gt;
                  &lt;ul class="cat"&gt;
                      &lt;li class="cat"&gt;
                          &lt;div&gt;
                              &lt;a class="cat" href="#x"&gt;
                                  &lt;span class="_33353_3KdIO"&gt;
                                      PC&lt;/span&gt;&lt;span class="_3b1e8_3gyVo"&gt;
                                      &lt;svg height="16" viewBox="0 0 9 16" width="9"
                                          xmlns="http://www.w3.org/2000/svg" class=""
                                          name="chevron-next-outline"&gt;
                                          &lt;path
                                              d="M.659.65a.532.532 0 0 0 0 .75l6.583 6.593-6.583 6.606a.532.532 0 0 0 0 .75.527.527 0 0 0 .747 0L8.349 8.38a.519.519 0 0 0 .155-.375.54.54 0 0 0-.155-.375L1.406.662A.516.516 0 0 0 .659.65z"
                                              fill="#50545B" fill-rule="evenodd"&gt;&lt;/path&gt;
                                      &lt;/svg&gt;
                                  &lt;/span&gt;
                              &lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li class="cat"&gt;
                          &lt;div&gt;
                              &lt;a class="cat" href="#x"&gt;
                                  &lt;span class="_33353_3KdIO"&gt;
                                      PC 2&lt;/span&gt;&lt;span class="_3b1e8_3gyVo"&gt;
                                      &lt;svg height="16" viewBox="0 0 9 16" width="9"
                                          xmlns="http://www.w3.org/2000/svg" class=""
                                          name="chevron-next-outline"&gt;
                                          &lt;path
                                              d="M.659.65a.532.532 0 0 0 0 .75l6.583 6.593-6.583 6.606a.532.532 0 0 0 0 .75.527.527 0 0 0 .747 0L8.349 8.38a.519.519 0 0 0 .155-.375.54.54 0 0 0-.155-.375L1.406.662A.516.516 0 0 0 .659.65z"
                                              fill="#50545B" fill-rule="evenodd"&gt;&lt;/path&gt;
                                      &lt;/svg&gt;
                                  &lt;/span&gt;
                              &lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="_99e51_2Fldz"&gt;
              &lt;button class="accordion"&gt;&lt;a href="#y"&gt;Main drop 2&lt;/a&gt;&lt;/button&gt;
              &lt;div class="panel"&gt;
                  &lt;ul class="cat"&gt;
                      &lt;li class="cat"&gt;
                          &lt;button class="accordion ac2" data-parent="#myGroup"&gt;&lt;a href="#y"&gt;sub drop 1&lt;/a&gt;&lt;/button&gt;
                          &lt;div class="panel"&gt;
                              &lt;ul class="cat"&gt;
                                  &lt;li class="cat"&gt;
                                      &lt;div&gt;
                                          &lt;a class="cat" href="#x"&gt;
                                              &lt;span class="_33353_3KdIO"&gt;
                                                  PC&lt;/span&gt;&lt;span class="_3b1e8_3gyVo"&gt;
                                                  &lt;svg height="16" viewBox="0 0 9 16" width="9"
                                                      xmlns="http://www.w3.org/2000/svg" class=""
                                                      name="chevron-next-outline"&gt;
                                                      &lt;path
                                                          d="M.659.65a.532.532 0 0 0 0 .75l6.583 6.593-6.583 6.606a.532.532 0 0 0 0 .75.527.527 0 0 0 .747 0L8.349 8.38a.519.519 0 0 0 .155-.375.54.54 0 0 0-.155-.375L1.406.662A.516.516 0 0 0 .659.65z"
                                                          fill="#50545B" fill-rule="evenodd"&gt;&lt;/path&gt;
                                                  &lt;/svg&gt;
                                              &lt;/span&gt;
                                          &lt;/a&gt;
                                      &lt;/div&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li class="cat"&gt;
                          &lt;button class="accordion ac2" data-parent="#myGroup"&gt;&lt;a href="#y"&gt;sup drop 2&lt;/a&gt;&lt;/button&gt;
                          &lt;div class="panel"&gt;
                              &lt;ul class="cat"&gt;
                                  &lt;li class="cat"&gt;
                                      &lt;div&gt;
                                          &lt;a class="cat" href="#x"&gt;
                                              &lt;span class="_33353_3KdIO"&gt;
                                                  PC&lt;/span&gt;&lt;span class="_3b1e8_3gyVo"&gt;
                                                  &lt;svg height="16" viewBox="0 0 9 16" width="9"
                                                      xmlns="http://www.w3.org/2000/svg" class=""
                                                      name="chevron-next-outline"&gt;
                                                      &lt;path
                                                          d="M.659.65a.532.532 0 0 0 0 .75l6.583 6.593-6.583 6.606a.532.532 0 0 0 0 .75.527.527 0 0 0 .747 0L8.349 8.38a.519.519 0 0 0 .155-.375.54.54 0 0 0-.155-.375L1.406.662A.516.516 0 0 0 .659.65z"
                                                          fill="#50545B" fill-rule="evenodd"&gt;&lt;/path&gt;
                                                  &lt;/svg&gt;
                                              &lt;/span&gt;
                                          &lt;/a&gt;
                                      &lt;/div&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please kindly render any assistance to me,</p>
  
  <p>Also please note i tried the  <code>data-parent="#accordion"</code> method as shown in some examples, but that didn't work</p>
  
  <p>here a working jsfiddle</p>
  
  <p><a href="https://jsfiddle.net/k7f38es6/" rel="nofollow noreferrer">https://jsfiddle.net/k7f38es6/</a></p>
  
  <p>Thank you</p>