CODEWITHSUNDEEP
jqueryhtmlslidetoggle
Kiruchi
Kiruchi

Reputation: 195

JQuery .slideToggle()

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 ?

Upvotes: 1

Views: 1158

Answers (3)

marswoody
marswoody

Reputation: 103

jQuery's slideToggle() is buggy at best. Fortunately there is a new feature in HTML5 that will provide this functionality without JavaScript!

Check out the new HTML5 tag:

http://www.w3schools.com/tags/tag_details.asp

Upvotes: 1

SigInTheHead
SigInTheHead

Reputation: 91

.next only looks at the immediate sibling, adding a selector only checks if that element matches the selector, .nextAll('.selector') is the way to go, but will return a collection of elements, so you may want to limit the collection using .first()

$(document).ready(function() {
   $('.ssdomaine').hide();
    $('.competence').hide();
   $('.domaine a').click(function() {
      // next only looks at the immediate sibling, which in you code is a <br />
      //$(this).next('.ssdomaine').slideToggle(1000);


      // this would open all elements
      $(this).nextAll('.ssdomaine').slideToggle(1000);

or

      // this would open this first instance of .ssdomaine
      $(this).nextAll('.ssdomaine').first().slideToggle(1000);

      return false;
   });
   $('.ssdomaine a').click(function() {
          $(this).next('.competence').slideToggle(1000);
          return false;
    });
 });

Upvotes: 0

Anton
Anton

Reputation: 32581

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/

Upvotes: 2

Related Questions