Topic: sideNav - Mixing accordions and links
cdenby pro asked 6 years ago
Mikołaj Smoleński staff answered 6 years ago
<!-- Side navigation links --> <li> <ul class="collapsible collapsible-accordion"> <li> <a class="collapsible-header waves-effect arrow-r"> <i class="fa fa-chevron-right"></i> Taking Stock Setup <i class="fa fa-angle-down rotate-icon"></i> </a> <div class="collapsible-body"> <ul> <li> <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockDates" data-functionheader="Taking Stock - Set Submission Dates"> <i class="fa fa-calendar pl-2"></i> Dates </a> </li> <li> <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockSnapshots" data-functionheader="Taking Stock - Manage Submission Snapshots"> <i class="fa fa-camera-retro pl-2"></i> Snapshots </a> </li> <li> <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageAtRiskFlags" data-functionheader=" Taking Stock - At Risk Determining Factors for the Submission"> <i class="fa fa-list-ul pl-2"></i> At Risk Factors </a> </li> <li> <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockDSBInformation" data-functionheader="Taking Stock - Manage DSB Information"> <i class="fa fa-pencil pl-2"></i> DSB Information </a> </li> <li> <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageShowHideStudentNames" data-functionheader="Show / Hide Student Names (Demo Mode)"> <i class="fa fa-lock pl-2"></i> Show Student Names </a> </li> </ul> </div> <ul> <li> <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStock0708"> <i class="fa fa-graduation-cap"></i>Gr. 7/8</a> </li> <li> <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStock0910"> <i class="fa fa-graduation-cap"></i>Gr. 9/10 At Risk</a> </li> <li> <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStock1112"> <i class="fa fa-graduation-cap"></i>Gr. 11/12 At Risk</a> </li> <li> <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockReEngagement"> <i class="fa fa-child"></i> Re-Engagement</a> </li> <li> <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockIndReEngagement"> <i class="fa fa-child"></i> Indigenous Re-Engagement</a> </li> <li> <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockSAL"> <i class="fa fa-home"></i> SAL Programs</a> </li> <li> <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockPartTime"> <i class="fa fa-star-half-o"></i> Part-Time Students</a> </li> <li> <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockMarkAsSignOf"> <i class="fa fa-thumbs-o-up"></i> Mark as Signed Off</a> </li> <li> <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageImpersonation"> <i class="fa fa-user-secret"></i> Impersonation</a> </li> </ul> </li> </ul> <!--/. Side navigation links --> </li>Regards
cdenby pro commented 6 years ago
OK - that works to do the clean up of the accordion and navbar appearance, except that the accordion doesn't expand. see here: https://drive.google.com/open?id=1COxNA42q9PoZ0Sxqq_3s-YVOJN1CUvdI In the production App, I've had to remove the accordion altogether because I can't have it fail.Mikołaj Smoleński staff commented 6 years ago
In the example I sent You the accordion is working correct. Can You look for any error in Your console (F12)? Maybe Your js scripts are not imported correctly?cdenby pro answered 6 years ago
<header> <!-- Sidebar navigation --> <div id="slide-out" class="side-nav sn-bg-4 fixed mdb-sidenav" style="transform: translateX(0px);"> <ul class="custom-scrollbar list-unstyled ps ps--theme_default" style="max-height:100vh;" data-ps-id="4e2ad490-7a74-98c1-2604-9cbbb60d17f6"> <!-- Logo --> <li> <div class="logo-wrapper waves-light"> <a href="#"><img src="logo.png" class="img-fluid flex-center" style="max-height: 80px;"/></a> </div> </li> <!--/. Logo --> <!-- Side navigation links --> <li> <ul class="collapsible collapsible-accordion"> <li> <a class="collapsible-header waves-effect arrow-r"> <i class="fa fa-chevron-right"></i> Taking Stock Setup<i class="fa fa-angle-down rotate-icon"></i> </a> <div class="collapsible-body"> <ul> <li> <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockDates" data-functionheader="Taking Stock - Set Submission Dates"> <i class="fa fa-calendar pl-2"></i> Dates </a> </li> <li> <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockSnapshots" data-functionheader="Taking Stock - Manage Submission Snapshots"> <i class="fa fa-camera-retro pl-2"></i> Snapshots </a> </li> <li> <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageAtRiskFlags" data-functionheader=" Taking Stock - At Risk Determining Factors for the Submission"> <i class="fa fa-list-ul pl-2"></i> At Risk Factors </a> </li> <li> <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockDSBInformation" data-functionheader="Taking Stock - Manage DSB Information"> <i class="fa fa-pencil pl-2"></i> DSB Information </a> </li> <li> <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageShowHideStudentNames" data-functionheader="Show / Hide Student Names (Demo Mode)"> <i class="fa fa-lock pl-2"></i> Show Student Names </a> </li> </ul> </div> </li> <li class="pl-4"> <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStock0708"> <i class="fa fa-graduation-cap"></i> Gr. 7/8</a> </li> <li class="pl-4"> <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStock0910"> <i class="fa fa-graduation-cap"></i> Gr. 9/10 At Risk</a> </li> <li class="pl-4"><a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStock1112"> <i class="fa fa-graduation-cap"></i> Gr. 11/12 At Risk</a> </li> <li class="pl-4"><a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockReEngagement"> <i class="fa fa-child"></i> Re-Engagement</a> </li> <li class="pl-4"><a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockIndReEngagement"> <i class="fa fa-child"></i> Indigenous Re-Engagement</a> </li> <li class="pl-4"><a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockSAL"> <i class="fa fa-home"></i> SAL Programs</a> </li> <li class="pl-4"><a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockPartTime"> <i class="fa fa-star-half-o"></i> Part-Time Students</a> </li> <li class="pl-4"><a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockMarkAsSignOf"> <i class="fa fa-thumbs-o-up"></i> Mark as Signed Off</a> </li> <li class="pl-4"><a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageImpersonation"> <i class="fa fa-user-secret"></i> Impersonation</a> </li> </ul> <!--/. Side navigation links --> </li> <div class="ps__scrollbar-x-rail" style="left: 0px; bottom: 0px;"><div class="ps__scrollbar-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__scrollbar-y-rail" style="top: 0px; right: 0px;"><div class="ps__scrollbar-y" tabindex="0" style="top: 0px; height: 0px;"></div></div></ul> <div class="sidenav-bg mask-strong"></div> </div> <!--/. Sidebar navigation --> <!-- Navbar --> <nav class="navbar navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav"> <!-- SideNav slide-out button --> <div class="float-left"> <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a> </div> <!-- Breadcrumb--> <div class="breadcrumb-dn mr-auto"> <h2 class="pl-4">Student Success / Taking Stock</h2> </div> <ul class="nav navbar-nav nav-flex-icons ml-auto"> <li class="nav-item"> <a class="nav-link" onclick="Signout();"><i class="fa fa-sign-out"></i> <span class="clearfix d-none d-sm-inline-block">Signout denbyc</span></a> </li> </ul> </nav> <!-- /.Navbar --> </header> <!--/.Double navigation--> <!--Main Layout--> <main> <div class="container-fluid" id="pnlMain"> <h2>Student Success / Taking Stock Management</h2> <hr/> </div> </main> <!--Main Layout-->
cdenby pro commented 6 years ago
I've been having troubles with the top accordion acting flakey now. If I reload the page, the accordion stops responding and is locked closed. The waves effect happens but it doesn't expand. I'm thinking it may be because I have links in the accordion that don't control the accordion itself? Any ideas?cdenby pro commented 6 years ago
Weird - when I load the page into a new tab, it usually works. Most of the times that I reload the page, it fails. Sometimes when I load the page initially, it fails. I've done a comparison of the whole DOM between initial loading and reloading and it appears that the Ps.initialize might be messing things up. When I compare the two versions of the DOM, the reload of the page has re-initialized PS and it now has a new data-ps-id. I've added a link to run siadeNav and the ps.initialize on-demand, but it's not working reliably either.FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Bartłomiej Malanowski staff commented 6 years ago
Could you please share your code with us? That would help us a lot!