Not displaying all the items

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

  1. <asp:Content ID="dashboardcontent" ContentPlaceHolderID="sitecontent" runat="server">
        <div>
            <div id="mastersidenav" class="sidenav">
                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</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>
  2. .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

  1. 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";
    }