Not displaying all the items
I have an area (fly-out) which is closed by default, when the use clicks the menu icon there is a fly-out and the accordion should show all items and take up the div space, but it seems to be missing one, when I click the third item, it replaces it and shows the missing one, I have tried lots of suggestions with regards to refresh but none have worked - here is the code and the CSS
<asp:Content ID="dashboardcontent" ContentPlaceHolderID="sitecontent" runat="server">
<div>
<div id="mastersidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div id="accordion">
<h3 class="accordionheader">HOME</h3>
<h3 class="accordionheader">ASSETS</h3>
<h3 class="accordionheader">REPORTS</h3>
<h3 class="accordionheader">SETTINGS</h3>
</div>
</div>
<div class="mainheader">
<span onclick="openNav()" class="menuicon" onmouseover="this.style.cursor='pointer'"></span>
</div>
</div>
<script>
$(function () {
$("#accordion").accordion({
fillSpace: true,
autoHeight: 'content',
icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' }
});
});
$(window).resize(function () {
$("#accordion").accordion("refresh");
});
</script>
</asp:Content>
.sidenav {
height: calc(100% - 95px);
width: 0; /* - change this with JavaScript */
position: fixed;
z-index: 1; /* Stay on top */
top: 95px;
left: 0;
background-color: #085394;
overflow-x: hidden;
padding-top: 30px;
transition: 0.9s;
}
.menuicon {
background: url(../images/menu_icon.png) no-repeat;
width: 75px;
height: 75px;
position: absolute;
top: 110px;
left: 15px;
display: block;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #ffffff;
display: block;
transition: 0.9s;
}
.sidenav a:hover {
color: black;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 10px;
font-size: 36px;
}
here is the JS
function openNav() {
document.getElementById("mastersidenav").style.width = "250px";
// document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mastersidenav").style.width = "0";
// document.getElementById("main").style.marginLeft = "0";
}