CODEWITHSUNDEEP
javascriptjqueryaccordion
Sowmya
Sowmya

Reputation: 26989

Open accordion menu items with sticky scroll menu links

I have a accordion menu and sticky scroll links which are working absolutely fine individually.

What I need to do now is to link the scroll menu to accordion so that it will open up the accordion tab when clicking on accordion menu and sticky scroll menu both.

I need to make accordion menu to get opened when user click on the scrolling menu items as well.

How do I link the toggle function dynamically to sticky scroll menu also?

I haven't used any plugins for these two so please suggest me to do without plugin. Thank you.

Here is my code 

$(document).ready(function () {  
  //Sticky scroll menu
  var top = $('.sticky-scroll-box').offset().top;
  $(window).scroll(function (event) {
    var y = $(this).scrollTop();
        if (y >= top) {
          $('.sticky-scroll-box').addClass('fixed');
        } else {
          $('.sticky-scroll-box').removeClass('fixed');
        }
        $('.sticky-scroll-box').width($('.sticky-scroll-box').parent().width());
    });

    //Accordion
    $(".menu_body").hide();
    //toggle the componenet with class menu_body
    $(".menu_head").click(function(){
        $(this).next(".menu_body").slideToggle(400); 
        var plusmin;
        plusmin = $(this).children(".plusminus").text();

        $(this).children("span.down-arrow").toggleClass("up-arrow");        
    });

});

DEMO

Upvotes: 2

Views: 1464

Answers (1)

Sarath
Sarath

Reputation: 9156

Use a linking between sticky menu and accordion menu using any attribute value

  //toggle the componenet with sticky menu
  $('.sticky-scroll-box a').click(function(){
    var menuRef = $(this).attr('toggelink');    
    $(".menu_head").filter("[toggelink^='"+menuRef+"']").click();    
  });
});

and change the html like 

<a toggelink="menu_1" class="menu_head"> Menu 1</a>

for sticky menu

<a toggelink="menu_1"  href="#">Menu 1</a>

these attributes you can create dynamicaly in the rendering logic.

DEMO

One more approach is to take the index of menu item , means find the nth number of menu you are clicking in stick and trigger a click to accordion menu item with same nth number

With href-id linking DEMO, create the ids dynamically in rendering logic

Upvotes: 1

Related Questions