CODEWITHSUNDEEP
javascriptjquery
havingagoatit
havingagoatit

Reputation: 583

Binding two functions to a button in jQuery

so I am having a little trouble with this button performing either of these functions on click.....

it isn't great as baseexpand and fullcollapse should be classes but I am not skilled enough to re-write an entire set of functions to accomodate this as they have about 50 dependencies.

Anyway to the point , here is the two functions ....

// Full collapse
$( '#fullcollapse' ).click(function(){
    $( '#menu' ).multilevelpushmenu( 'collapse' );
});

// Base expand
$( '#baseexpand' ).click(function(){
    $( '#menu' ).multilevelpushmenu( 'expand' );
});

they expand and collapse a sidebar-menu .... i have 2 buttons that looks like this .... 

    <a id="fullcollapse" class="nav-toggle" role="button" href="#"><span></span></a>

<a id="baseexpand" class="nav-toggle" role="button" href="#"><span></span></a>

I want to make those buttons into one toggle button changing between the id's on each click.

I have been reading documentation for about 6 hours straight now and trying to look into it but am unable to solve this one. Please help

Upvotes: 1

Views: 2565

Answers (4)

t3dodson
t3dodson

Reputation: 4007

Try composing your functions with this wrapper

var toggle = function (funcA, funcB) {
    var flag = true;
    return function () {
        if (flag) {
            funcA();
        } else {
            funcB();
        }
        flag = !flag;
    };
};

apply it with

$('#btn').click(toggle (function (){
    $('#menu').multilevelpushmenu( 'collapse' ); // happens 1, 3, 5, 7, ...   time clicked
}, function (){
    $('#menu').multilevelpushmenu( 'expand' );   // happenes  2, 4, 6, 8, ... time clicked
}));

bonus I reimplemented toggle to be able to propogate a return value.

var toggle = function (a, b) {
    var togg = false;
    return function () {
        // passes return value back to caller
        return (togg = !togg) ? a() : b();
    };
};

Upvotes: 2

devkaoru
devkaoru

Reputation: 1162

assuming you only have those two buttons with nav-toggle the DOM.

html:

<a id="fullcollapse" class="nav-toggle" role="button" href="#"><span></span></a>

<a id="baseexpand" class="nav-toggle" role="button" href="#"><span></span></a>

js:

$(function () {
  var expand = false;
  $('.nav-toggle').on('click', function (e) {
    // not preventing default in case other things are listening if not then prevent it here.

     expand = !expand;
     var action = expand ? 'expand' : 'collapse';
     $('#menu').multilevelpushmenu(action);
  });
});

The reason why using data won't work is because data properties are bound to the element you are selecting. Each button will have it's own data property and thus you cannot sync the two buttons by this one value. You need to have a separate value that can be accessed by both in order to keep their state in sync.

Upvotes: 0

Capsule
Capsule

Reputation: 6159

I would change a data attribute on the button itself (the state could be stored anywhere else in the DOM tho, like on the menu) and toggle between the 2 states at each click:

$('.nav-toggle').click(function(e){
    e.preventDefault();

    $('#menu').multilevelpushmenu($(this).data('action'));
    $(this).data('action', ($(this).data('action') == 'fullcollapse' ? 'basexpand' : 'fullcollapse'));
});

HTML:

<a data-action="fullcollapse" class="nav-toggle" role="button"><span></span></a>

The data-action you set in your HTML should be the action you want on the first click.

Example with a generic multilevelpushmenu function: https://jsfiddle.net/q3c117yr/

Upvotes: 0

prograhammer
prograhammer

Reputation: 20590

See live demo here: https://jsfiddle.net/gpnsmbvk/1/

There's different ways you can achieve what you are asking. Here's a solution that toggles classes:

HTML

<a id="anyofthestates" class="nav-toggle" role="button" href="#"><span>sidebar me</span></a>

Jquery

$(function(){

    $('#anyofthestates').click(function(){
        $(this).toggleClass('expand');

        if($(this).hasClass('expand')){
            alert('baseexpand');
            // $( '#menu' ).multilevelpushmenu( 'expand' );
        }
        else{
            alert('fullcollapse');
            // $( '#menu' ).multilevelpushmenu( 'collapse' );
        }
    });

});

Upvotes: 1

Related Questions