0

I'm working on a navigation system where left and right arrows expand LIs.

<a href="#" class="icon-arrow-left active"></a>
     <ul>
        <li class="contracted"><a href="#">1</a></li>
        <li class="expanded"><a href="#">2</a></li>
        <li class="activeLesson"><a href="#">3</a></li>
        <li class="expanded"><a href="#">4</a></li>
        <li class="contracted"><a href="#">5</a></li>
    </ul>
<a href="#" class="icon icon-arrow-right active"></a>

When fist li is 'expanded' 'icon-arrow-left' should be 'inactive' and when last li is 'expanded' 'icon icon-arrow-right' should be inactive.

I tried to use this but not working

 if ($('li:first-child').hasClass('activeLesson')) {
        $('.icon-arrow-left').attr('class','inactive')
        }

Here is jsFiddle

4
  • Prepare a fiddle explaining your question Apr 22, 2014 at 4:04
  • You're totally wiping out all the classes on .icon-arrow-left. That isn't what you want, is it? Apr 22, 2014 at 4:04
  • 3
    why so many downvotes? question is properly asked. Shouldnt be a problem to be a newbie
    – rupps
    Apr 22, 2014 at 4:12
  • I was also scared why downvoted so much, but remembered this is SO. Apr 22, 2014 at 4:17

2 Answers 2

2

Don't use attr('class','inactive'), this will totally wipe out all the classes that you have.

You should use toggle class method

if ($('li:first-child').hasClass('expanded')) {
        $('.icon-arrow-left').toggleClass('active inactive');
}

If the class has active then it use inactive and if the class has inactive then it use active class.

2
  • Hi! Thanks you. But this does not work. I've updated my question with jsFiddle link to make it more sense. Please check that. Apr 22, 2014 at 22:28
  • you're still using attr method. just copy my code and see how it works. Apr 23, 2014 at 3:14
0

use addClass("active") / removeClass("inactive") . If you set it with .attr , you erase all the classes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.