Can you lend a hand? I have a snippet of code that looks like this:
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="hexagons.css">
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
// function disp(){
// document.getElementById('hexGrid').style.display = 'none';
// }
</script>
</head>
<body>
<iframe name="display" id="display_template"></iframe>
<ul id="hexGrid">
<?php
foreach ($dirs as $link) {
if ($link != 'assets') {
echo '
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="'.$linkArray[$link].'" onclick="disp(); return false;" target="display" >
<img src="assets/dir.png" alt="'.$link.'" />
<h1>' . $link . '</h1>
<p>Redirect to template</p>
</a>
</div>
</li>
';
}
}
?>
</ul>
</body>
I am trying to make it so that clicking on the link in #hexGrid will hide the grid and load content into an iframe simultaneously.
When I comment out the JavaScript function, clicking on the link loads the selected content correctly onto the iframe. However, when the JavaScript is active, it only hides #hexGrid without loading anything into the iframe.
Any thoughts on what might be causing this issue? :)