I have included navigation php file in other php files .I have set an active link by getting file name .The link is active on going to another file .But the collapse got closed on going to another file .
My navigation file
<!doctype html>
<html lang="en">
<?php include "settings.php";?>
<head>
<title><?php echo $appname; ?></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.min.css" >
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-toggle.min.css" >
<link href="css/smart_wizard_all.css" rel="stylesheet" type="text/css" />
<link href="css/select2.min.css" rel="stylesheet" type="text/css" />
<link href="js/DataTables/datatables.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="js/jquery-3.3.1.min.js?v=3.3.1" ></script>
<script src="js/popper-1.14.3.min.js?v=1.14.3"></script>
<script src="bootstrap-4.1.3/js/bootstrap.min.js?v=4.1.3" ></script>
<script src="jquery-ui-1.12.1/jquery-ui.min.js?v=1.12.1"></script>
<script src="js/bootstrap-toggle.min.js"></script>
<script type="text/javascript" src="js/DataTables/datatables.min.js"></script>
<script type="text/javascript" src="js/DataTables/FixedHeader-3.1.7/js/dataTables.fixedHeader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<style>
@media (min-width:992px) {
.vertical-nav {
position: fixed;
top: 57px;
left: 0;
width: 200px;
height: 100%;
background-color: #f8f8f8;
overflow-y: auto;
padding-top: 15px
}
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Assembly Operations</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<?php
$activePage = basename($_SERVER['PHP_SELF'], ".php");
?>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto flex-column vertical-nav">
<li class="nav-item">
<a class="nav-link <?= ($activePage == "login_success") ? 'active':''; ?>" href="login_success.php">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="upload.php">Upload</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#entities" aria-expanded="true" aria-controls="entities">
<span class="menu-title">Entities</span>
<i class="fa fa-chevron-down"></i>
</a>
<div class="collapse" id="entities">
<ul class="nav flex-column sub-menu">
<div> <li class="nav-item">
<a class="nav-link <?= ($activePage == "adhoc") ? 'active':''; ?>" href='adhoc.php' id="adhoc" >Adhoc </a>
</li></div>
<li class="nav-item">
<a class="nav-link <?= ($activePage == "downtime") ? 'active':''; ?>" href='downtime.php' id='downtime'>Downtime</a>
</li>
</ul>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<?php echo $_SESSION["username"];?>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="logout.php">Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
I have included this nav.php file in my downtime.php
After going to downtime.php the downtime link is active .but the collapse is not expanded .The collapse got closed .
My Answer:
To keep the collapse open when navigating to another PHP file, you can add some JavaScript code to check the active page and expand the collapse accordingly. Here's an example of how you can achieve this:
1. Add an id to the collapse element in your navigation file:
html
Rate this post
3 of 5 based on 3853 votesComments