Currently, I have Ajax set up to replace the main div with a link. In addition, there's a spoiler-type navigation that allows you to hide or show the menu. I have my links inserted in this structure and am trying to figure out how to make it so that clicking on one of the links will toggle the menu and close it.
<input class="spoilerbutton show2" style="width:100%" type="button" value="Show Navigation" onclick="this.value=this.value=='Show Navigation'?'Hide Navigation':'Show Navigation';">
<div class="show2 spoiler"><div>
<nav id="nav" class="show2">
<ul>
<li id="ajax" class="ajax"><a href="index.html" id="ajax" class="ajax skel-panels-ignoreHref">Home</a></li>
</ul>
</nav>
</div></div>
CSS:
.spoilerbutton {display:block;margin:5px 0;}
.spoiler {color:black;overflow:hidden;background: #f5f5f5;}
.spoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}
.spoilerbutton[value="Show Navigation"] + .spoiler > div {margin-top:-100%;}
.spoilerbutton[value="Hide Navigation"] + .spoiler {padding:5px;}
Update new code:
<input name="spoilerbtn" name="spoilerbtn" class="spoilerbutton show2" style="width:100%" type="button" value="Show Navigation" onclick="this.value=this.value=='Show Navigation'?'Hide Navigation':'Show Navigation';">
<div class="show2 spoiler"><div>
<nav id="nav" class="show2">
<ul>
<li id="ajax" class="ajax"><a href="index.html" onclick="spoilerbutton.value=spoilerbuttonv.value=='Show Navigation'?'Hide Navigation':'Show Navigation';" id="ajax" class="ajax skel-panels-ignoreHref">Home</a></li>
</ul>
</nav>
</div></div>