CODEWITHSUNDEEP
javascriptmagento
vemund
vemund

Reputation: 1807

Javascript actions not working in mageneto

I'm working on this theme and I wanted to create this simple nav that would fadeIn on click and fadeOut on click. 

<div id="mobile-nav">
    <a class="exit"></a>
    <div class="logo"></div>
    <div class="center">
        <li class="skincare">Skincare</li>
        <li class="makeup">Makeup</li>
        <li class="kits">Kits</li>
        <li class="help">Help</li>
    </div>
</div>
<script>
           $(function() {
                    $('.exit').click(function(){
                        $('#mobile-nav').fadeOut();
                    });
                }
</script>

However it doesn't seem to work when I try it out. Other types of script like swiper.js works, but this simple script doesn't work. Is there anything wrong with what I'm doing? I've been checking for errors and jQuery is loading as well.

Live preview here - http://magazine.eldecosmetics.com/

Upvotes: 0

Views: 29

Answers (2)

Pasupathi Thangavel
Pasupathi Thangavel

Reputation: 942

In Magento try to avoid jquery conflicts you must use jQuery instead of $ symbol.

For example i have mentioned the correct coding

jQuery(function(){

            $$('.exit').invoke('observe', 'click', function() {
                jQuery('#mobile-nav').toggleClass('fadedOut');
            });

});

Hope it will helps to you guys.

Upvotes: 0

David Marcus
David Marcus

Reputation: 474

It should be

$(function() {
                        $$('.exit').invoke('observe', 'click', function() {
                            $('#mobile-nav').toggleClass('fadedOut');
                        });
                    });

Your code is

$(function() {
                    $$('.exit').invoke('observe', 'click', function() {
                        $('#mobile-nav').toggleClassName('fadedOut');
                    });
                }

Upvotes: 1

Related Questions