CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bakajuice
Bakajuice

Reputation: 173

jQuery Button Only Works Once

My goal was to create a simple button which once clicked would hide/show a navigational menu, and change the footer's padding alternatively, I'd have used toggle() if not for the latter condition. How do I make the button serve both purposes, that is first hide the menu and decrease footer padding, and then upon another click show the menu and increase the padding, and so forth, so that upon clicking the button one effect would occur and upon another click the other? Any help, suggestions, or alternatives, will be much appreciated.

function collapseOrCondense(event) {
    if ($('#block-panels-mini-footer-nice-menu:visible')) {
        $('#footer').css({
            'padding-bottom': '2.5%'
        });
        $('#block-panels-mini-footer-nice-menu').hide();
    } else {
        $('#footer').css({
            'padding-bottom': '5.5%'
        });
        $('#block-panels-mini-footer-nice-menu').show();
    }
};
$('#footer').append('<button type=button class=cbutton>*</button>');
$('#footer .cbutton').css({
    'position': 'absolute',
    'left': '1%',
    'top': '1%',
    'width': '2%',
    'height': '1.5%'
});
$('#footer .cbutton').on('click', collapseOrCondense);

Upvotes: 1

Views: 506

Answers (3)

Mariano Desanze
Mariano Desanze

Reputation: 8163

The problem is in this line you have:

if ($('#block-panels-mini-footer-nice-menu:visible')) {

Because that will return a jQuery object with one or zero elements inside. You could fix that by adding .length. But I think using the is function is more clear.

Here I fixed that, and applied some changes that may help you to do the same in a more concise manner:

function collapseOrCondense(event) {
    var menu = $('#block-panels-mini-footer-nice-menu');
    $('#footer').css({
        'padding-bottom': menu.is(':visible') ? '2.5%' : '5.5%'
    });
    menu.toggle();
}
$('<button type=button class=cbutton>*</button>').css({
    'position': 'absolute',
    'left': '1%',
    'top': '1%',
    'width': '2%',
    'height': '1.5%'
}).on('click', collapseOrCondense).appendTo('#footer');

Working fiddle: http://jsfiddle.net/yj5evps2/

Upvotes: 1

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

I have made an example here. http://jsfiddle.net/wdakLfcc/2/

var visible = true;
function collapseOrCondense(event) {
if (visible) {
    $('#footer').css({
        'padding-bottom': '2.5%'
    });
    $('#block-panels-mini-footer-nice-menu').hide();
    visible = false;

} else {
    $('#footer').css({
        'padding-bottom': '5.5%'
    });
    $('#block-panels-mini-footer-nice-menu').show();
    visible = true;
}    

};
$('#footer').append('<button type=button class=cbutton>*</button>');
$('#footer .cbutton').css({
'position': 'absolute',
'left': '1%',
'top': '1%',
'width': '2%',
'height': '1.5%'
});
$('#footer ').on('click', '.cbutton', collapseOrCondense);

On button click different effect will be played - Collapse Or Condense.

Upvotes: 1

Matt
Matt

Reputation: 1023

It looks like from my analysis that your conditional is always evaluating to true. I propose you add some other form of indicator to better distinguish the toggle.

I jury rigged a simple implementation: http://plnkr.co/edit/y8BugzI89s0i5kxM95H9?p=preview

function collapseOrCondense(event){
  if($('#block-panels-mini-footer-nice-menu').css('display') === 'block'){
    $('#footer').css({'padding-bottom':'2.5%'});
    $('#block-panels-mini-footer-nice-menu').hide();
  }
  else{
    $('#footer').css({'padding-bottom':'5.5%'});
    $('#block-panels-mini-footer-nice-menu').show();
  }
}

The aforementioned snippet is one way of handling this case given my demo environment -- I am sure there are many ways but the underlying problem is your condition (at least in my scenario with the data provided) is always evaluating to true.

Upvotes: 1

Related Questions