Javascript to close menu accordion

Navigation
2

I have the following code: 

* {
  margin:0;
  padding: 0;
  border: 0;
  font-family: sans-serif;
  font-size:14px;
  list-style: none;
  text-decoration: none;
}

.nav a, .nav label {
  display: block;
  padding: 10px;
  color:#000;
  background-color: #e0e0e0;
  box-shadow: inset 0 -1px #ddd;
  -webkit-transition: all .25s ease-in;
  transition: all .25s ease-in;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.nav a:focus, .nav a:hover, .nav label:focus, .nav label:hover {
  color: #444;
  background: #d0d0d0;
}

.nav label {
  cursor: pointer;
}

.group-list a, .group-list label {
  padding-left: 1rem;
  background: #f0f5f5;
  box-shadow: inset 0 -1px #ddd;
}

.group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover {
  color: #444;
  background: #d5dada;
}

.sub-group-list a, .sub-group-list label {
  padding-left: 2rem;
  background: #fff;
  box-shadow: inset 0 -1px #ddd;
}

.sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover {
  color:#444;
  background: #fff;
  text-decoration:underline;
}

.group-list, .sub-group-list, .sub-sub-group-list {
  height: 100%;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .5s ease-in-out;
  transition: max-height .5s ease-in-out;
}

.nav__list input[type=checkbox]:checked + label + ul {
  max-height: 100%;
}

.space{
  padding-bottom: 4px;
}
<table style="width: 20%">
  <tr>
    <td>
      <nav class="nav" role="navigation">
        <ul class="nav__list">
          <li><!--INICIO-->
            <input id="sub-group-1" type="checkbox" hidden />
            <label for="sub-group-1">MENU 1</label>
            <ul class="sub-group-list">
              <li><a href="#">link 1</a></li>
              <li><a href="#">link 2</a></li>
            </ul>
          </li><!--FIM-->
          <li><div class="space"></div></li>
          <li><!--INICIO-->
            <input id="group-1" type="checkbox" hidden />
            <label for="group-1">MENU 2</label>
            <ul class="group-list">
              <li>
                <input id="sub-group-2" type="checkbox" hidden />
                <label for="sub-group-2">Sub menu A</label>
                <ul class="sub-group-list">
                  <li><a href="#">link 3</a></li>
                  <li><a href="#">link 4</a></li>
                </ul>
                <!---->
                <input id="sub-group-3" type="checkbox" hidden />
                <label for="sub-group-3">Sub menu B</label>
                <ul class="sub-group-list">
                  <li><a href="#">link 5</a></li>
                  <li><a href="#">link 6</a></li>
                </ul>
              </li>
            </ul>
          </li><!--FIM-->
          <li><div class="space"></div></li>
          <li><!--INICIO-->
            <input id="group-2" type="checkbox" hidden />
            <label for="group-2">MENU 3</label>
            <ul class="group-list">
              <li>
                <input id="sub-group-11" type="checkbox" hidden />
                <label for="sub-group-11">Sub menu C</label>
                <ul class="sub-group-list">
                  <li><a href="#">link 7</a></li>
                  <li><a href="#">link 8</a></li>
                </ul>
                <!---->
                <input id="sub-group-12" type="checkbox" hidden />
                <label for="sub-group-12">Sub menu D</label>
                <ul class="sub-group-list">
                  <li><a href="#">link 9</a></li>
                  <li><a href="#">link 10</a></li>
                </ul>
              </li>
            </ul>
          </li><!--FIM-->
        </ul>
      </nav>
    </td>
  </tr>
</table>

link

I would like to know how I can develop a Javascript to close any MENU when another MENU or submenu is clicked

Example:

  

Close MENU 1 or MENU 2 when MENU 3 or its submenus are   clicked.

     

Close MENU 1 or MENU 3 when MENU 2 or its submenus are   clicked.

     

Close MENU 2 or MENU 3 when MENU 1 is clicked

    
asked by anonymous 15.12.2016 / 16:13

1 answer

2

I do not know how to do this with CSS:

I just removed the classes that open the CSS MENU and transitions.

I created a JS function. 

$('.showMenu').on('click', function(event) {
  event.preventDefault();
  var submenu = $(this).find('ul');

  if(submenu.css('max-height') == '100%'){
    submenu.css('max-height', '0');
  }
  else{
    $('.nav__list > li > ul').css('max-height', '0');
    submenu.css('max-height', '100%');
  }
  
});
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: sans-serif;
  font-size: 14px;
  list-style: none;
  text-decoration: none;
}
.nav a,
.nav label {
  display: block;
  padding: 10px;
  color: #000;
  background-color: #e0e0e0;
  box-shadow: inset 0 -1px #ddd;
  -webkit-transition: all .25s ease-in;
  transition: all .25s ease-in;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.nav a:focus,
.nav a:hover,
.nav label:focus,
.nav label:hover {
  color: #444;
  background: #d0d0d0;
}
.nav label {
  cursor: pointer;
}
.group-list a,
.group-list label {
  padding-left: 1rem;
  background: #f0f5f5;
  box-shadow: inset 0 -1px #ddd;
}
.group-list a:focus,
.group-list a:hover,
.group-list label:focus,
.group-list label:hover {
  color: #444;
  background: #d5dada;
}
.sub-group-list a,
.sub-group-list label {
  padding-left: 2rem;
  background: #fff;
  box-shadow: inset 0 -1px #ddd;
}
.sub-group-list a:focus,
.sub-group-list a:hover,
.sub-group-list label:focus,
.sub-group-list label:hover {
  color: #444;
  background: #fff;
  text-decoration: underline;
}
.group-list,
.sub-group-list,
.sub-sub-group-list {
  height: 100%;
  max-height: 0;
  overflow: hidden;
}
.space {
  padding-bottom: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tablestyle="width: 20%">
  <tr>
    <td>
      <nav class="nav" role="navigation">
        <ul class="nav__list">
          <li class="showMenu">
            <!--INICIO-->
            <input id="sub-group-1" type="checkbox" hidden />
            <label for="sub-group-1">MENU 1</label>
            <ul class="sub-group-list">
              <li><a href="#">link 1</a>
              </li>

              <li><a href="#">link 2</a>
              </li>
            </ul>
          </li>
          <!--FIM-->
          <li>
            <div class="space"></div>
          </li>
          <li class="showMenu">
            <!--INICIO-->
            <input id="group-1" type="checkbox" hidden />
            <label for="group-1">MENU 2</label>
            <ul class="group-list">
              <li>
                <input id="sub-group-2" type="checkbox" hidden />
                <label for="sub-group-2">Sub menu A</label>
                <ul class="sub-group-list">
                  <li><a href="#">link 3</a>
                  </li>
                  <li><a href="#">link 4</a>
                  </li>
                </ul>
                <!---->
                <input id="sub-group-3" type="checkbox" hidden />
                <label for="sub-group-3">Sub menu B</label>
                <ul class="sub-group-list">

                  <li><a href="#">link 5</a>
                  </li>

                  <li><a href="#">link 6</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <!--FIM-->
          <li>
            <div class="space"></div>
          </li>
          <li class="showMenu">
            <!--INICIO-->
            <input id="group-2" type="checkbox" hidden />
            <label for="group-2">MENU 3</label>
            <ul class="group-list">
              <li>
                <input id="sub-group-11" type="checkbox" hidden />
                <label for="sub-group-11">Sub menu C</label>
                <ul class="sub-group-list">
                  <li><a href="#">link 7</a>
                  </li>
                  <li><a href="#">link 8</a>
                  </li>
                </ul>
                <!---->
                <input id="sub-group-12" type="checkbox" hidden />
                <label for="sub-group-12">Sub menu D</label>
                <ul class="sub-group-list">
                  <li><a href="#">link 9</a>
                  </li>
                  <li><a href="#">link 10</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <!--FIM-->
        </ul>
      </nav>
    </td>
  </tr>
</table>
    
15.12.2016 / 16:30
Error fetching blogger information via json Check if input file is filled