jQuery click function on menu li anchor – slideToggle not working (WordPress)

1 Views

Alright, what i want is a div to appear below a menu item when clicking on it.

Here is my HTML (taken from WordPress source code):

Read More
<li id="menu-item-990" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-top-level menu-item-top-level-7">
    <a href="#" style="height: 88px; line-height: 88px;">
        <span class="avia-bullet"></span>
        <span class="avia-menu-text">Sign in</span>
        <span class="avia-menu-fx">
            <span class="avia-arrow-wrap">
                <span class="avia-arrow"></span>
            </span>
        </span>
    </a>
</li>
<div id="text-6" class="widget clearfix widget_text">
    <h3 class="widgettitle">How to sign in</h3>
    <div class="textwidget"></div>
</div>

And some CSS (should this be inline instead, or should i apply some CSS in the JS function?) 

#text-6 { visibility: hidden; }

And then my JS: 

$(document).ready(function() {
    $('#menu-item-990 a').click(function() {
        event.preventDefault();
        $('#text-6').slideToggle("fast");
    });
});

I’ll appreciate any answers! Hope you can help 🙂

Thanks!

Post Views: 1

Related posts

3 comments

  1. You forgot your param event in your function:

    $(document).ready(function() {
    $('#menu-item-990 a').click(function(event) {
            event.preventDefault();
            $('#text-6').slideToggle("fast");
    });
});

  2. You need to pass event in the click handler.

    $('#menu-item-990 a').click(function(event) {
    event.preventDefault();
    $('#text-6').slideToggle("fast");
});

    You must be getting error on browser console

  3. For one, pass “event” as the parameter in the function function(event).

    I also beleive that slideToggle will not affect the visibility, it only toggles between none and block and changes your height. Set display: none; to your item, should work fine.

Comments are closed.