As you can see, the parent links are highlighted in blue while the child links are highlighted in grey.
I would like to make it so only the parent links show until a parent link is clicked – in which case the child elements will then show. However, I would like the child elements to show without the page having to reload.
I’m assuming I will have to use some jQuery to make this happen – which I have very little experience with.
Anyone want to get me pointed in the right direction?
@JeremyEnglert, you were simply forgetting to include }); at the end of the .click( ) method. Also, when using jsFiddle or CodePen you really do not need to include script tags. There is a little button at the very top (JSLINT) which will tell you any/all errors. You were able to get away with == rather then using ===. jsFiddle will always catch on that.
Thanks for posting this I’m using it for my mobile nav and it’s working great – the only thing I need help with is making sub-menus able to function – currently if I create a submenu and give it the same class as the parent list item (.menu) it re-collapses the entire menu when you click on it. I’m not very experienced with jquery, otherwise I would think it’s not that hard to do.