Question

I’m using slideToggle() in JQuery to display a div.
But this doesn’t work.

I made different tests but nothing works…

I have this :

<div class="domaine">
<a>1. Compétences Scientifiques Transversales</a>
<br>
<div class="ssdomaine" style="display: none;">
    <a>1.1. Sciences et techniques</a>
    <br>
    <div class="competence" style="display: none;">
        <a href="#">1.1.1. Génie thermique et thermodynamique</a>
        <br>
    </div>
</div>

Here is just a single “domaine” containing a single “ssdomaine” containing a single “competence”

But I make a request in a database which can send me multiple “domaine” containing multiple “ssdomaine” containint multiple “ssdomaine”.

I want to make a .slideToggle() without specifying any id.

My JQuery code is :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $('.ssdomaine').hide();
    $('.competence').hide();
   $('.domaine a').click(function() {
      $(this).next('.ssdomaine').slideToggle(1000);
      return false;
   });
   $('.ssdomaine a').click(function() {
          $(this).next('.competence').slideToggle(1000);
          return false;
    });
 });
</script>

And I tried the same in this link :
http://jsfiddle.net/6GRJr/168/

And it’s working, but it is on only one occurence of domaine, ssdomaine and competence.

Any idea ?

Answer 1

It has to do with the height, look at this fiddle http://jsfiddle.net/6GRJr/169/

UPDATE

The reason why it doesn’t show competence is because it is hidden when you load the form, and when you do slideToggle on ssdomaine it makes ssdomaine only visible not competence aswell

UPDATE

This should do it http://jsfiddle.net/6GRJr/172/