I have the following html that toggles the navbar.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="vendors/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="vendors/fontawesome/css/all.css">
<link rel="stylesheet" href="vendors/flag-icon-css/css/flag-icon.min.css">
<link rel="stylesheet" href="vendors/selectFX/css/cs-skin-elastic.css">
<link rel="stylesheet" href="assets/css/style.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
</head>
<body>
<!-- Left Panel -->
<aside id="left-panel" class="left-panel">
<nav class="navbar navbar-expand-sm navbar-default">
<div class="navbar-header">
<a id="menuToggle" class="navbar-brand"><img src="images/pfcnowhite.png" alt="PFC"></a>
<a id="menuToggle" class="navbar-brand hidden"><img src="images/pfcp.jpg" alt="PFC"></a>
</div>
</nav>
</aside>
<!-- /#left-panel -->
<div id="right-panel" class="right-panel">
</div>
<script src="vendors/jquery/dist/jquery.min.js"></script>
<script src="vendors/popper.js/dist/umd/popper.min.js"></script>
<script src="vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
Now, I know my css and js won't work if someone tries to implement it because those are locally stored on my dev environment hopefully that won't be an issue with my question.
As it is right now, if I load the page it shows me the navbar-brand image just fine and when I click it the left panel does toggle as expected and then it shows me the navbar-brand hidden image as it should but when I click the hidden image it doesn't toggle back.
I'm trying to make it work without the 'normal' fa-bars on the side, any help or advise is greatly appreciated