Search the Community

Hi, I'm trying to setup a sidenav with multiple accordion dropdowns. The first one seems to work fine but the rest just reopen the first in the list. Anyone any idea what I'm doing wrong? It may well be blatantly obvious as I'm no expert! Thanks, Dave. The code I'm using (css) is: ____________________________________________________________________________________ <nav class="w3-sidenav w3-light-grey w3-card-2" style="width:140px;"> <a href="index.php">Home</a> <div class="w3-accordion"> <a onclick="myAccFunc()" href="#">First group<i class="fa fa-caret-down"></i></a> <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4"> <a href="one.php">one</a> <a href="two.php">two</a> <a href="three.php">three</a> </div> </div> <div class="w3-accordion"> <a onclick="myAccFunc()" href="#">First group<i class="fa fa-caret-down"></i></a> <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4"> <a href="four.php">four</a> <a href="five.php">five</a> <a href="six.php">six</a> </div> </div> <div class="w3-accordion"> <a onclick="myAccFunc()" href="#">Second group<i class="fa fa-caret-down"></i></a> <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4"> <a href="four.php">four</a> <a href="five.php">five</a> <a href="six.php">six</a> </div> </div> <div class="w3-accordion"> <a onclick="myAccFunc()" href="#">Third group<i class="fa fa-caret-down"></i></a> <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4"> <a href="seven.php">seven</a> <a href="eight.php">eight</a> <a href="nine.php">nine</a> </div> </div> <a href="https://twitter.com/my_page" target="_blank"><img src="/img/twitter.gif" width="100px"></a> <a href="https://www.facebook.com/my_page/" target="_blank"><img src="/img/facebook.gif" width="100px"></a> </nav> ____________________________________________________________________________________