CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorerinternet-explorer-7
Pajken
Pajken

Reputation: 519

slideToggle() does not work properly in IE7

I am experiencing problems with jQuery SlideToggle in IE7. It works properly in IE8, IE9, FF, Chrome, Opera. When i debug i don't get any errors. The only thing that's happening is my event.preventDefault() but by some reason IE7 isn't even trying to do anything after my if statement. Here is some code:

/* For handling of open/close the toggler button for categories */
$('ul.categories').on('click', '.toggle button', function(event) {
    event.preventDefault();
    var $categories = $(this).parent().next('.items'),
        $icon = $('.icon', this);
    $categories.slideToggle(Interface.animationDuration, function() {
        //Somewhere here is stops. It does not even slideToggle.
        if ($(this).is(':visible')) {
            $icon.removeClass('white-arrow-down').addClass('white-arrow-up');
        } else {
            $icon.removeClass('white-arrow-up').addClass('white-arrow-down');
        }
    });
});

<ul class="categories">
    <li class="toggle"><button type="button"><span class="icon white-arrow-down"></span></button></li>
    <ul class="items">
        <li>
            <input type="radio" name="category" id="" value=""><label for=""></label>
        </li>
        <li>
        <input type="radio" name="category" id="" value=""><label for=""></label>
        </li>
    </ul>
</ul>

Upvotes: 0

Views: 127

Answers (1)

Pajken
Pajken

Reputation: 519

The issue was due to my nested ul. It was not wrapped inside a li which made the my declaration faulty since i was using .parent(): 

var $categories = $(this).parent().next('.items')

Upvotes: 1

Related Questions