CODEWITHSUNDEEP
jqueryhtml
Adam
Adam

Reputation: 20882

JQUERY Toggle Child UL

I have the following HTML:

<li class="helpClickable">What are the Terms of Service &amp; Privacy Policy?</li>
<ul class="helpToggleAll"> 
  <li class="helpContent"><span class="helpText">The Terms of Service are the Terms you agreed to when Creating an Account on this or any of the Gone Global Dating Network Sites.</span></li>
  <li class="helpContent"><span class="helpText">The Privacy Policy is the Policy that Governs usage of your Personal Information stored in this Website and in the Gone Global Dating Network.</span></li>
  <li class="helpContent"><span class="helpText">Click either link to re-read the document again - <a href="includes/legal/terms-of-use.php" target="_blank">Terms of Service</a> &amp; <a href="includes/legal/privacy-policy.php" target="_blank">Privacy Policy</a>.</span></li>
  <li class="helpContent"><span class="helpText">If you do not Agree with any part of either of these Documents then cease using this Website and the Gone Global Dating Network Imediendly.</span></li>      
</ul>

I need to toggle() the 'helpToggleAll' Class when the 'helpClickable' class is clicked. I've been testing with the following code without success.

 var helpClickable = $('li.helpClickable');
   helpClickable.click(function() {
     $(this).children('ul').toggle();
   });

What would be the best way to toggle() the child ?

thx

Upvotes: 0

Views: 4250

Answers (4)

Richard
Richard

Reputation: 4415

Your HTML should be 

<li class="helpClickable">What are the Terms of Service &amp; Privacy Policy?
  <ul> 
    <li>The Terms of Service are the Terms you agreed to when Creating an Account on this or any of the Gone Global Dating Network Sites.</li>
    <li>The Privacy Policy is the Policy that Governs usage of your Personal Information stored in this Website and in the Gone Global Dating Network.</li>
    <li>Click either link to re-read the document again - <a href="includes/legal/terms-of-use.php" target="_blank">Terms of Service</a> &amp; <a href="includes/legal/privacy-policy.php" target="_blank">Privacy Policy</a>.</li>
    <li>If you do not Agree with any part of either of these Documents then cease using this Website and the Gone Global Dating Network Imediendly.</li>      
  </ul>
</li>

The jQuery:

$('li.helpClickable').click(function() {
    $(this).find('ul').toggle();
});

And CSS:

ul li ul {
    display: none;
}

Your <span class="helpText"> and class="helpContent" are completely redundant, you can handle all of this in CSS:

.helpClickable ul { /* styles for the UL */ }
.helpClickable ul li { /* styles for the text */ }

Upvotes: 2

Rick Burns
Rick Burns

Reputation: 1546

It's not their child. Try this out:

$('.helpClickable').click(function(){
    $('.helpToggleAll').toggle();
});

Upvotes: 0

Blender
Blender

Reputation: 298186

.helpToggleAll isn't a child. It's a sibling:

$('.helpClickable').click(function() {
  $(this).next('.helpToggleAll').toggle();
});

Upvotes: 0

Nix
Nix

Reputation: 58522

It's not a child. You should search for the ul, or use siblings.

var helpClickable = $('li.helpClickable');
helpClickable.click(function() {
    $(this).siblings('ul.helpToggleAll').toggle();
});

or 

var helpClickable = $('li.helpClickable');
helpClickable.click(function() {
    $('ul.helpToggleAll').toggle();
});

Upvotes: 0

Related Questions