I have used two type of the JavaScript in this page, but working only any one only now. Please advice how to sort this issue

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="./css/modal.css" rel="stylesheet"/>
<style>
button {
	padding: 15px;
	font-size: 12px;
	background: indianred;
	color: #FFF;
	border: none
}
.subheading {
	font-style: italic
}
</style>
<style>
body {
	background: #333;
	color: #000;
	margin: 0;
	font: 300 18px/27px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#container {
	width: 1200px;
	position: relative;
	background: #fff;
	margin: 0 auto;
	padding: 40px;
	border-radius: 0 0 5px 5px;
	box-shadow: 0 0 8px 2px #000;
}
#main_nav {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	width: 100%;
	border-radius: 0 0 5px 5px;
	box-shadow: 0 0 8px 2px #000;
	font-size: 12px;
}
.with_nav #main_nav {
	display: block;
}
.access_aid {
	display: none;
}
#access_nav {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 0;
	padding-top: 40px;
	overflow: hidden;
	border: 1px solid #ccc;
	background: white 10px 10px / 20px 20px no-repeat;
	background-image: -webkit-repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
	background-image: repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
	z-index: 1;
}
.with_nav #access_nav {
	background-image: linear-gradient(45deg, transparent 13px, #ccc 13px, #ccc 15px, transparent 0), linear-gradient(-45deg, white 13px, #ccc 13px, #ccc 15px, white 0);
}
ul {
	list-style: none;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: underline;
}
</style>
</head>
<body id="body">
<div id="container">
  <p><a href="#main_nav" id="access_nav" class="access_aid">Navigation</a></p>
  <article>
    <h1>Front Unit - VDP Panel</h1>
    <table border="0" align="center" width="100%">
      <tr bgcolor="#ffcc00">
        <th>Product</th>
        <th>Description</th>
      </tr>
      <tr>
        <td width="50%" align="center"><img src="./images/00001.png"/></td>
        <td width="50%"><table border="0" width="100%">
            <tr>
              <td width="35%">Item Code</td>
              <td width="05%">:</td>
              <td width="60%">M-22331-W</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>:</td>
              <td>Front Unit - VDP Panel</td>
            </tr>
            <tr>
              <td>Width (mm)</td>
              <td>:</td>
              <td>218</td>
            </tr>
            <tr>
              <td>Height (mm)</td>
              <td>:</td>
              <td>155</td>
            </tr>
            <tr>
              <td>Inner Depth (mm)</td>
              <td>:</td>
              <td>&ndash;</td>
            </tr>
            <tr>
              <td>Total Depth (mm)</td>
              <td>:</td>
              <td>29</td>
            </tr>
          </table></td>
      </tr>
    </table>
    
    <!-- Button to Close -->
    <p>
      <button data-target="simpleModal_6" data-toggle="modal">Product Dimesions</button>
    <div id="simpleModal_6" class="modal">
      <div class="modal-window"> <span class="close" data-dismiss="modal">&times;</span>
        <p><img src="./images/00001g.png"/></p>
      </div>
    </div>
    <!-- End of the Button to Close --> 
    
  </article>
  <nav id="main_nav">
    <table align="center">
      <tr>
        <td width="20%" valign="top"><ul>
            <li><b>Front Unit - VDP Panel</b></li>
            <li><a href="it001.html">7" Video Hands-Free Indoor Station</a></li>
            <li><a href="it002.html">Video Door Camera</a></li>
          </ul></td>
        <td width="20%" valign="top"><ul>
            <li><b>Busch Triton</b></li>
            <li><a href="it003.html">3 Gang (Studio White)</a></li>
            <li><a href="it004.html">5 Gang (Champagner Metallic)</a></li>
          </ul></td>
        <td width="20%" valign="top"><ul>
            <li><b>Touch Sensor</b></li>
            <li><a href="it005.html">4 Gang Grey + Cover Frame</a></li>
            <li><a href="it006.html">2 Gang Anthrazit + Brass Décor Cover</a></li>
            <li><a href="it007.html">3 Gang - White</a></li>
          </ul></td>
        <td width="20%" valign="top"><ul>
            <li><b>Light Set</b></li>
            <li><a href="it008.html">Night Light Set</a></li>
            <li><a href="#"></a></li>
          </ul></td>
        <td  width="20%" valign="top"><ul>
            <li><b>Busch Prion</b></li>
            <li><a href="it009.html">6310-0-0132</a></li>
            <li><a href="it010.html">6342-866-101-500</a></li>
          </ul></td>
      </tr>
      <tr>
        <td valign="top"><ul>
            <li><b>Sensors</b></li>
            <li><a href="it011.html">6132-0-0348</a></li>
            <li><a href="it012.html">6179/02-500</a></li>
            <li><a href="it013.html">Front Units - Wall LED Luminaire</a></li>
          </ul></td>
      </tr>
    </table>
    <p><a href="#body" id="access_top" class="access_aid">Top</a></p>
  </nav>
</div>
<script type="text/javascript" src="modal.js"></script>
</body>
<script>
	var nav = document.getElementById('access_nav'),
	    body = document.body;

	nav.addEventListener('click', function(e) {
		body.className = body.className? '' : 'with_nav';
		e.preventDefault();
	});
</script>
</html>

What, exactly, is the issue?

I can’t see the following element at window

<a href="#main_nav" id="access_nav" class="access_aid">Navigation</a>

Why did you wrapp the ancor with paragraph element and not wrapped inside div?

Would moving the second script above the closing </body> element help?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.