I have the following code:
<ul class="cssdropdown">
<li class="headlink">RANGE
<ul class="innerDrop">
<li>Range Child</li>
<ul>
<li>
<li class="headlink">HOME
<ul class="innerDrop">
<li>Home Child</li>
<ul>
<li>
</ul>
I'm trying to toggle the <ul class="innerDrop" with some jQuery. And I need to do it by adding a
class the hide
class which has display:none
It hides fine, but when I click on the HOME or RANGE it opens both inner <li> when I just want the one to open.
Here is my jQuery:
$(document).ready(function(){
$('li.headlink ul').addClass('hide');
$('#header').append('<div class=\"showpersonal\" onclick=\"toggleMenu()\"></div>');
$('#header').append('<div class=\"showbusiness\" onclick=\"toggleMenu()\"></div>');
});
function toggleMenu() {
$('li.headlink ul').toggleClass('hide', this);
}
