Slide Toggle [Jquery Function] Not Working

Question

I use this code to run a slide toggle but it doesn't open when I click on it:

JS Code:

    <script type="text/javascript">
     $(document).ready(function () {
         alert('hi i came to toggle');
         $(".flip").click(function () {
             $(this).next().slideToggle("fast");
         });
     });

      function ViewGetSubjects(data) {
         var subjects = (typeof data) == 'string' ? eval('(' + data + ')') : data;
         $('#subjects').empty();
         for (var i = 0; i < subjects.length; i++)
          {
              $('#subjects').append('<h1 class = "flip">'+subjects[i].Wkp_lesson+'</h1><div class="panel" >' + ' Weekly Body: ' + subjects[i].Wkp_Body + ' Weekly Body: ' + subjects[i].Wkp_Body + ' Weekly Lesson: ' + subjects[i].Wkp_lesson + '</div>');
             }
      }

CSS:

       div.panel,h1.flip
      {
         margin:0px;
         padding:5px;
         text-align:center;
         background:#488AC7;
         border:solid 1px #F6358A;
       }
     div.panel
     {
         height:120px;
         display:none;
     }

Do you know why?

Thanks a lot :)

What doesn't work here? I created a fiddle for you (jsfiddle.net/fvv2n). Adjust the code to reflect your own, especially the HTML. As it is, it works. — Armatus
– Armatus, Commented Apr 7, 2012 at 23:08
post your html, and create a sample jsfiddle as @Armatus suggested — DG3
– DG3, Commented Apr 7, 2012 at 23:08

The Alpha · Accepted Answer · 2012-04-07 23:19:36Z

2

If you are not using latest version of jquery

 $(".flip").live('click', function(e){
     $(this).next().slideToggle("fast");
 });

otherwise it should be

$("#subjects").on('click', 'h1.flip', function(e){
    $(this).next().slideToggle("fast");
});

because you are appending DOM(h1 with class name flip) elements dynamically inside the #subjects (element that has id=subjects) element.

References : on and live (deprecated).

edited Apr 7, 2012 at 23:19

answered Apr 7, 2012 at 23:13

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Armatus · Accepted Answer · 2012-04-07 23:09:57Z

1

Apart from my comment, did you possibly forget to include the jquery library?

<script src="http://code.jquery.com/jquery-latest.js"></script>

This will include the latest version directly from jquery.com, although it is suggested that you copy the code and save it in your own file.

answered Apr 7, 2012 at 23:09

Armatus

2,20117 silver badges28 bronze badges

1 Comment

Armatus Over a year ago

Have you tried the suggestion in the answer above? That's more likely to be the problem.

Collectives™ on Stack Overflow

Slide Toggle [Jquery Function] Not Working

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related