1

I got this codes:

<div id='news' class='menuitem'>
<span onClick="MenuItemAction('news')"> //----- CLICK HERE
....
</span>
</div>
<div id='news_Submenu' class='Submenu'> //----- SLIDE DOWN/UP SHOWING THIS
....
</div>


<div id='forum' class='menuitem'>
<span onClick="MenuItemAction('forum')"> //----- CLICK HERE
....
</span>
</div>
<div id='forum_Submenu' class='Submenu'> //----- SLIDE DOWN/UP SHOWING THIS
....
</div>

And this jQuery attempt:

$(document).ready(function MenuItemAction(element){
  $(document).click(function(){
    $("#"+element+"_Submenu").slideToggle("medium");
  });
});

Obs.: I want show/hide the respective div on clicking at respective span.

3
  • What is it showing in Console? Any error? Have you correctly included jQuery library? Jan 9, 2014 at 5:58
  • no, any error, but the effect slideToggle doesn't work. Sorry i'm newbie on it... jQuery library how so? Jan 9, 2014 at 6:02
  • You need jQuery library. Include something of this sort at the top of your page: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> Jan 9, 2014 at 6:07

5 Answers 5

0

Instead of using a inlined click handler use a jQuery click handler and specify the id of the target element using a data-* attribute

You can try something like

<div id='news' class='menuitem'>
    <span data-target="news" class="trigger">
        Triger
    </span>
</div>
<div id='news_Submenu' class='Submenu'>
    ....
</div>

then

$(document).on('click', '.menuitem .trigger', function () {
    $("#" + $(this).data('target') + "_Submenu").slideToggle("medium");
});

Demo: Fiddle

0
0

Try this

function MenuItemAction(element) {
   $("#"+element+"_Submenu").slideToggle("medium");
}

instead of

$(document).ready(function MenuItemAction(element){
  $(document).click(function(){
    $("#"+element+"_Submenu").slideToggle("medium");
  });
});

fiddle http://jsfiddle.net/ZxtNt/

PS: Dont put this function MenuItemAction under document.ready

0
0

changes your codes and try:

<div id='news' class='menuitem'>
   <span class="MenuItemAction" id='news'> //----- CLICK HERE
   ....
   </span>
</div>
<div id='news_Submenu' class='Submenu'> //----- SLIDE DOWN/UP SHOWING THIS
   ....
</div>

<div id='forum' class='menuitem'>
   <span class="MenuItemAction" id='forum'> //----- CLICK HERE
   ....
   </span>
</div>

<div id='forum_Submenu' class='Submenu'> //----- SLIDE DOWN/UP SHOWING THIS
   ....
</div>

---jquery---

jQuery(document).ready(function($){
    $('.MenuItemAction').click(function(e){
        var element = $(this).attr('id');
        $("#"+element+"_Submenu").slideToggle("medium");
    });
});
0

Try this

function MenuItemAction(element) {
   $("#"+element+"_Submenu").slideToggle("medium");
}

DEMO Fiddle

0

I think you misunderstood the function of $(document).ready(func).

The ready function will call the func when DOM is loaded.

What you need is a click event handler. Please try the following:

1 define a script tag

2 Add the MenuItemAction function:

function MenuItemAction(element){
    $("#"+element+"_Submenu").slideToggle("medium");
});

No need to add it in ready.

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.