Hi everyone, I am a newbe and would like to ask for help with the following task:
I am designing a website with a vertical accordion-menu on the left side that should stay fixed. So far no problem, an example I found on the w3school site.
Now I would like the buttons that do not have sub-menu items to link to the index-, kontakt- pages directly. The recommended description to link a button is to include it into <form> tag and assign a «formaction» to it.
When I do this the accordion looses the ability to spring open. Do I have to adapt anything in the Java-script or is there another way to solve this.
Ideally I would like the accordion menu to behave like this:
when clicking one menu item the corresponding page should be shown with the submenu items opened.
when choosing anothe menu item that page should be opened and the previous sub-menu items closed.
my coding attempt looks like that:
—————————————————————————————
<!DOCTYPE html>
<html><!-- InstanceBegin template="/Templates/acc_template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My Accordion Menu Website</title>
<style>
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
}
</style>
</head>
<body>
<!--Anfang Seiten-Menu Accordeon DIV-->
<nav>
<div class="accnavleft">
<!--Anfang Buttons-->
<form><button class="accordion" formaction="/index.html">Homepage</button></form>
<form> <button class="accordion" formaction="//page_one.html">Page one</button></form>
<div class="panel">
<ul>
<li><a href="#navb">first paragraph page one</a></li>
<li><a href="#navc">2nd paragraph page one/a></li>
<li><a href="#navd">3rd paragraph page one</a></li>
<li><a href="#nave">4th paragraph page one/a></li>
</ul>
</div>
<form> <button class="accordion" formaction="/page_two.html">Page two</button></form>
<div class="panel">
<ul>
<li><a href="#navf">first paragraph page two</a></li>
<li><a href="#navg">2nd paragraph page two/a></li>
<li><a href="#navh">3rd paragraph page two</a></li>
<li><a href="#navi">4th paragraph page two/a></li>
</ul>
</div>
<form> <button class="accordion" formaction="/page_three.html">Page three</button></form>
<div class="panel">
<ul>
<li><a href="#navj">first paragraph page three</a></li>
<li><a href="#navk">2nd paragraph page three/a></li>
<li><a href="#navl">3rd paragraph page three</a></li>
<li><a href="#navm">4th paragraph page three/a></li>
</ul>
</div>
<form> <button class="accordion" formaction="/kontakt.html">Kontakt</button></form>
<div class="panel">
<ul>
</ul>
</div>
<form> <button class="accordion" formaction="/impressum.html">Impressum</button></form>
<div class="panel">
<ul>
</ul>
</div>
</div>
</nav>
<!--end Seiten Menu DIV accordeon -->
<!--Java Script of Accordion -->
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc.onclick = function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
</script>
<!--end of Accordion -->
<!-- "Content" -->
<main>
<div style="margin-left:25%;padding:1px 16px;height:100%;">
<h1>first paragraph page one</h1><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.
<a name="navb"></a>
<h1>2nd paragraph page one</h1><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.
<a name="navc"></a>
<h1>3rd paragraph page one</h1><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.
<a name="navd"></a>
<h1>4th paragraph page one</h1><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.
<a name="nave"></a>
<h1>5th paragraph page one</h1><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.
<a name="navf"></a>
</div>
</main>
<!-- End Content -->
</body>
</html>
Accord_Menu_Button_link.html
