Dave Stewart Posted January 15, 2017 Share Posted January 15, 2017 (edited) 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> ____________________________________________________________________________________ Edited January 15, 2017 by Dave Stewart Link to comment Share on other sites More sharing options...
dsonesuk Posted January 15, 2017 Share Posted January 15, 2017 Unless the JavaScript, yes! JavaScript code, not just css, is setup to go to the next sibling div element from the anchor link with onclick event, it won't work, if its targeting id, then that's another problem because 'id' names MUST BE unique within a page, unlike what you currently have which are duplicate 'id' names. Link to comment Share on other sites More sharing options...
Dave Stewart Posted January 15, 2017 Author Share Posted January 15, 2017 Oops, sorry, I forgot to add the script. It is indeed there, just under the bottom of the code I previously posted.... </nav> <script> function w3_open() { document.getElementById("mySidenav").style.display = "block"; document.getElementById("myOverlay").style.display = "block"; } function w3_close() { document.getElementById("mySidenav").style.display = "none"; document.getElementById("myOverlay").style.display = "none"; } </script>However, as I have 'included' a seperate HTML file with all the nav coding along with the javascript, but this may easily be completely wrong. Any help is greatly appreciated, thanks. Dave Link to comment Share on other sites More sharing options...
dsonesuk Posted January 15, 2017 Share Posted January 15, 2017 THAT code is totally unrelated to html code supplied? Link to comment Share on other sites More sharing options...
Dave Stewart Posted January 15, 2017 Author Share Posted January 15, 2017 Oh, so it is, sorry. Confused myself with too many parts. I looked at the page on here again & changed it to: </nav> <script> function myAccFunc() { var x = document.getElementById("demoAcc"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; x.previousElementSibling.className += " w3-green"; } else { x.className = x.className.replace(" w3-show", ""); x.previousElementSibling.className = x.previousElementSibling.className.replace(" w3-green", ""); } } function myDropFunc() { var x = document.getElementById("demoDrop"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; x.previousElementSibling.className += " w3-green"; } else { x.className = x.className.replace(" w3-show", ""); x.previousElementSibling.className = x.previousElementSibling.className.replace(" w3-green", ""); } } </script> which is the script it should be, I hope! But still get the same result. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 15, 2017 Share Posted January 15, 2017 Like I said id ref should be singular, any multiple duplicate id will be ignored after the first encounted, the first will carry out what is asked for by the script. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 15, 2017 Share Posted January 15, 2017 (edited) Add 'this' to the function called by anchor link event onclick <a onclick="myAccFunc(this)" href="#">First group<i class="fa fa-caret-down"></i></a> Then you need to ref that specifically clicked element, transverse down to next sibling element and change that elements classname function myAccFunc(elem)//amended by dsonesuk { var x = elem.nextElementSibling;//amended by dsonesuk if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; x.previousElementSibling.className += " w3-green"; } else { x.className = x.className.replace(" w3-show", ""); x.previousElementSibling.className = x.previousElementSibling.className.replace(" w3-green", ""); } } Edited January 15, 2017 by dsonesuk 1 Link to comment Share on other sites More sharing options...
Dave Stewart Posted January 15, 2017 Author Share Posted January 15, 2017 Thanks a lot. That's a lot for my simple brain to absord but I'll look at that & post when I've got it to work. Thanks again. Link to comment Share on other sites More sharing options...
Dave Stewart Posted January 15, 2017 Author Share Posted January 15, 2017 (edited) Aaarrgghh, nightmare. I still can't get it to work. Instead of trying to post the coding I'm trying to get working, perhaps you'd rather look at the page in action? It's at www.edinweb.org. I'd really appreciate any ideas on what I'm doing. I use Dreamweaver & it objects a lot to some lines of it as well. Thanks in advance. Actually, I've just realised what you mentioned earlier. The lines in the coding are indeed replicated, but that's the refference to the W3 CSS scripts. How would I change those? Unless I copied the coding from W3's & made more with different names. That might be seen as theft though. Suppose I could refer them in comments for copyright or something. Edited January 15, 2017 by Dave Stewart Link to comment Share on other sites More sharing options...
dsonesuk Posted January 15, 2017 Share Posted January 15, 2017 Your JavaScript code is exactly as before. also your html coding is in a mucking fuddle. IF YOU HAVE MORE THAN ONE OF THESE main important HTML TAGS showing when you view the source of you web page. <!doctype html><html><head> </head> <body> </body> </html> You are doing it wrong! Link to comment Share on other sites More sharing options...
dsonesuk Posted January 15, 2017 Share Posted January 15, 2017 ALSO you can't use old and new function code together on the same page. Link to comment Share on other sites More sharing options...
Dave Stewart Posted January 15, 2017 Author Share Posted January 15, 2017 I went through the entire site & checked the basic html section as you noted, but couldn't find the ones you talked about. I did find the older function codes you saw & removed them. With your assistance It all now works as I hoped it would. Thanks a LOT for your help. Greatly appreciated. Dave. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 15, 2017 Share Posted January 15, 2017 https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.edinweb.org%2F&showsource=yes Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now