CODEWITHSUNDEEP
javascriptjquery
HandsomeRob
HandsomeRob

Reputation: 445

Possible to .slideToggle() a specific <li>?

Have an <ul> of nav links. One particular <li> is actually turned into 3 links. Would like that particular <li> to slide open and closed to reveal the other three links.

Hosted here.

<ul id="courseLinks">
    <li><a href="#"><strong>Week 1</strong> introduction</a></li>
    <li><a href="./homework/week2/week2homework.htm"><strong>Week 2</strong> dev tools + standards</a></li>
    <li><a href="./homework/week3/week3homework.htm"><strong>Week 3</strong> HTML 5 &amp; SEO</a></li>
    <li><a href="#" id="homeworkSlide"><strong>Week 4</strong> css concepts</a></li>
    <li id="slider"><a href="homework/week4/exercise1.htm">Exercise 1</a>
            <a href="homework/week4/exercise2.htm">Exercise 2</a>
            <a href="homework/week4/week4homework.htm">Homework</a></li>
    <li><a href="#"><strong>Week 5</strong> advanced css</a></li>
    <li><a href="#"><strong>Week 6</strong> server side includes</a></li>
    <li><a href="#"><strong>Week 7</strong> site construction</a></li>
    <li><a href="#"><strong>Week 8</strong> development methodology 1</a></li>
    <li><a href="#"><strong>Week 9</strong> user experience</a></li>
    <li><a href="#"><strong>Week 10</strong> social software</a></li>
    <li><a href="#"><strong>Week 11</strong> project work</a></li>
    <li><a href="#"><strong>Week 12</strong> final examination</a></li>
</ul><!--nav-->

Jquery:

$('#homeworkSlide').click(function() {
  $('#slider').slideToggle('slow', function() {
    // Animation complete.
  });
});

Refuses to work. Self teaching javascript at this point, is it not possible to modify <ul> in this fashion? Or am I doing something wrong?

Upvotes: 1

Views: 75

Answers (2)

Marcus
Marcus

Reputation: 6849

I've read the source code on your host, and found that the binding operation is not bound in a $(document).ready(...), and that may be the reason.

So, modify the code.

$(document).ready( function() { 
    $('#homeworkSlide').click(function() {
      $('#slider').slideToggle('slow', function() {
        // Animation complete.
      });
    });
} );

Upvotes: 1

mdeltito
mdeltito

Reputation: 327

That code works fine for me on that page when pasted into the console. Make sure you are running it on DOM ready

Upvotes: 0

Related Questions