The following code is a mess(exclude the <div>
tags where no content is placed).After including ‘requests.php’,the jquery code is not working.Also I can’t make the requests.php appear by making the main page intact
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="newstyle.css">
<link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/font-awesome.min.css">
<script>"bootstrap-4.0.0-dist/js/bootstrap.bundle.min.js"</script>
<title>Document</title>
</head>
<body>
<div id="mySidenav" class="sidenav">
<p class="logo"><span>Garbage </span>Management</p>
<a href="dashboard.html" class="icon-a"><i class="fa fa-dashboard icons"></i> Dashboard</a>
<a href="#" class="icon-a"><i class="fa fa-users icons"></i> Users</a>
<a href="requests.php" class="icon-a"><i class="fa fa-list icons"></i> Lodge Requests</a>
<a href="#" class="icon-a"><i class="fa fa-dashboard icons"></i> Lodge Complaints</a>
<a href="#" class="icon-a"><i class="fa fa-dashboard icons"></i> Request history</a>
<a href="#" class="icon-a"><i class="fa fa-dashboard icons"></i> Complaint history</a>
<a href="#" class="icon-a"><i class="fa fa-dashboard icons"></i> Search</a>
<a href="#" class="icon-a"><i class="fa fa-dashboard icons"></i> Payments</a>
<a href="signout.php?user=<?php echo $_SESSION['username']; ?>" class="icon-a"><i class="fa fa-dashboard icons"></i> Log out</a>
</div>
<div id="main">
<div class="head">
<div class="col-div-6">
<span style="font-size: 30px; cursor: pointer;color: white;" class="nav"> ☰ Dashboard</span>
<span style="font-size: 30px; cursor: pointer;color: white;" class="nav2"> ☰ Dashboard</span>
</div>
<div class="col-div-6">
<div class="profile">
<p ><span>Welcome<?php echo isset($_SESSION["username"]) ? $_SESSION["username"] : "user"; ?></span></p>
</div>
</div>
<div class="clearfix">
</div>
<div class="clearfix">
</div>
<br/><br/>
<div class="col-div-8">
<div class="box-8">
<div class="content-box">
<p></p>
</div>
</div>
</div>
<div class="col-div-4">
<div class="box-4">
<div class="content-box">
</div>
</div>
</div>
<div class="clearfix">
</div>
</div>
</div>
<script src="scripts/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$(".nav").click(function(){
$("#mySidenav").css('width','70px');
$("#main").css('margin-left','70px');
$(".logo").css('visibility','hidden');
$(".logo span").css('visibility','visible');
$(".logo span").css('margin-left','-10px');
$(".icon-a").css('visibility','hidden');
$(".icons").css('visibility','visible');
$(".icons").css('margin-left','-8px');
$(".nav").css('display','none');
$(".nav2").css('display','block');
});
$(".nav2").click(function(){
$("#mySidenav").css('width','300px');
$("#main").css('margin-left','300px');
$(".logo").css('visibility','visible');
$(".logo span").css('visibility','visible');
$(".icon-a").css('visibility','visible');
$(".icons").css('visibility','visible');
$(".nav").css('display','block');
$(".nav2").css('display','none');
});
});
</script>
</body>
</html>