Agrega manualmente desde el inicio los atributos que controlan los accordiones:
class="collapsed" aria-expanded="false"
const btn = document.querySelector('#menu-btn');
const menu = document.querySelector('#sidemenu');
$('#menu-btn').click(function() {
var width = $('#sidemenu').width();
if (width == 230) {
$('#sidemenu').animate({
width: "50"
});
$('.collapse').collapse("hide");
menu.classList.toggle("menu-collapsed");
menu.classList.toggle("menu-expanded");
} else {
$('#sidemenu').animate({
width: "230"
});
menu.classList.toggle("menu-expanded");
menu.classList.toggle("menu-collapsed");
}
});
.contenedor-principal {
display: flex;
padding-left: 0 !important;
padding-right: 0 !important;
}
#sidemenu {
background-color: #222d32;
}
.menu-expanded {
width: 230px;
}
.menu-collapsed {
width: 50px;
}
.menu-collapsed .menuResponsive {
width: 100%;
}
.menu-collapsed span {
display: none;
}
.menu-collapsed .glyphicon-chevron-left {
display: none;
}
.menu-collapsed li:hover span {
display: block !important;
position: absolute;
width: 180px;
left: 50px;
}
.menu-collapsed span {
top: 0;
margin-left: -3px;
padding: 12px 5px 12px 20px;
background-color: inherit;
}
.menu-collapsed li:hover .treeview-menu {
display: block !important;
position: absolute;
width: 180px;
left: 50px;
}
.menu-collapsed .treeview-menu {
background-color: #222d32;
padding-top: 5px;
padding-bottom: 5px;
}
#sidemenuheader {
background-color: #222d32;
height: 50px;
padding: 10px 5px;
overflow: hidden;
}
.menuResponsive {
text-align: center;
height: 30px;
float: left;
width: 15%;
padding-top: 3px;
}
.glyphicon-list {
font-size: 20px;
color: #b8c7ce;
}
#menu-items {
padding-left: 0 !important;
padding-right: 0 !important;
}
div ul li+li {
margin-left: 0px;
}
.main-list {
margin: auto;
padding: auto;
list-style: none;
padding-left: 0px !important;
}
.main-list>li>a:hover {
color: #ffffff;
background-color: #1e282c;
border-left-color: #3c8dbc;
}
.main-list>li>a:focus {
color: #ffffff;
background-color: #1e282c;
border-left-color: #3c8dbc;
}
.main-list>li>a.collapse {
color: #ffffff;
background-color: #1e282c;
border-left-color: #3c8dbc;
}
li>a.collapsed>.glyphicon-chevron-left {
transform: rotate(-90deg);
}
.panel {
background-color: transparent !important;
border: none;
}
.main-item {
position: relative;
margin: 0;
padding: 0;
}
.main-item a {
color: #b8c7ce;
font-size: 14px;
text-decoration: none;
font-weight: 400;
position: relative;
padding: 12px 5px 12px 15px;
display: block;
border-left: 3px solid transparent;
}
.main-item i {
margin-right: 10px;
}
.main-item .glyphicon-chevron-left {
float: right;
font-size: 10px;
padding-top: 5px;
}
.treeview-menu {
background-color: #2c3b41;
padding: 0;
list-style: none
}
.treeview-menu a:hover {
color: #ffffff;
}
.treeview-menu li {
margin: 0;
}
.treeview-menu li a {
padding: 5px 5px 5px 15px;
display: block;
font-size: 14px;
}
.treeview-menu span {
margin-right: 10px;
}
#mantenedores {
flex: 1;
width: calc(100% - 230px);
background-color: #ecf0f5;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="section">
<!-- container -->
<div class="container-fluid">
<!-- row -->
<div class="row">
<div class="contenedor-principal col-md-12 col-sm-12 col-xs-12">
<!-- section title -->
<aside id="sidemenu" class="menu-expanded">
<div id="sidemenuheader">
<div class="menuResponsive">
<a>
<i class="glyphicon glyphicon-list" id="menu-btn"></i>
</a>
</div>
</div>
<div id="menu-items">
<ul class="list-group main-list" id="accordion">
<li class="panel main-item">
<a href="#">
<i class="glyphicon glyphicon-home"></i>
<span>Inicio</span>
</a>
</li>
<li class="panel main-item">
<a data-toggle="collapse" data-parent="#accordion" href="#list1" class="collapsed" aria-expanded="false">
<i class="glyphicon glyphicon-phone"></i>
<span>Celulares</span>
<i class="glyphicon glyphicon-chevron-left"></i>
</a>
<ul class="collapse treeview-menu" id="list1">
<li>
<a href="#">
<i class="fa fa-circle-o"></i>Agregar
</a>
</li>
<li>
<a href="#">
<i class="fa fa-circle-o"></i>Delete
</a>
</li>
<li>
<a href="#">
<i class="fa fa-circle-o"></i>Actualizar
</a>
</li>
</ul>
</li>
<li class="panel main-item">
<a data-toggle="collapse" data-parent="#accordion" href="#list2" class="collapsed" aria-expanded="false">
<i class="glyphicon glyphicon-phone"></i>
<span>Celulares</span>
<i class="glyphicon glyphicon-chevron-left"></i>
</a>
<ul class="collapse treeview-menu" id="list2">
<li>
<a href="#">
<i class="fa fa-circle-o"></i>Agregar
</a>
</li>
<li>
<a href="#">
<i class="fa fa-circle-o"></i>Delete
</a>
</li>
<li>
<a href="#">
<i class="fa fa-circle-o"></i>Actualizar
</a>
</li>
</ul>
</li>
<li class="panel main-item">
<a data-toggle="collapse" data-parent="#accordion" href="#list3" class="collapsed" aria-expanded="false">
<i class="glyphicon glyphicon-phone"></i>
<span>Celulares</span>
<i class="glyphicon glyphicon-chevron-left"></i>
</a>
<ul class="collapse treeview-menu" id="list3">
<li>
<a href="#">
<i class="fa fa-circle-o"></i>Agregar
</a>
</li>
<li>
<a href="#">
<i class="fa fa-circle-o"></i>Delete
</a>
</li>
<li>
<a href="products.html">
<i class="fa fa-circle-o"></i>Actualizar
</a>
</li>
</ul>
</li>
</ul>
</div>
</aside>
<!-- /section title -->
<div id="mantenedores">
</div>
</div>
</div>
<!-- /row -->
</div>
<!-- /container -->
</div>