SlideToggle() for menu bar in PHP with jQuery doesn't works

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.

Answers


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


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


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");
    });
});

Try this

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

DEMO Fiddle


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.


Need Your Help

Excel VBA - Can I assign part of a Cell Value to a variable?

vba excel-vba excel

I have a date in a particular cell (B3) - Date - 12/03/2016. I am trying to assign only the Year part of the date, i.e. 2016 to a variable. Is it possible?

How to use DATE_FORMAT for Mongodate in Cakephp with Mongodb?

php mysql mongodb cakephp

Hi i am using MongoDB as database in my cakephp application. and i am using this plugin for it. i want to search record(document) from my user collection. i am using this snippet