CSS
.nested-menu {
.list-group-item {
cursor: pointer;
}
.nested {
list-style-type: none;
}
ul.submenu {
height: 0;
}
& .expand {
ul.submenu {
list-style-type: none;
height: auto;
li {
a {
color: #FFF;
padding: 10px;
display: block;
}
}
}
}
}
HTML
<div class="nested-menu">
<a class="list-group-item" (click)="addExpandClass('pages')">
<span>
<i class="fa fa-universal-access"></i>
Account
</span>
</a>
<div class="nested" [class.expand]="showMenu === 'pages'">
<ul class="submenu">
<li>
<a [routerLink]="['account/password']" (click)="eventCalled()">
<span>Password reset</span>
</a>
</li>
<li>
<a [routerLink]="['account/user']" (click)="eventCalled()">
<span>User</span>
</a>
</li>
</ul>
</div>
</div>
When not clicked, the child links are not hidden even though height: 0 is set. How can I hide them before clicking?