MENU - TOGGLE BUTTON SLIDER
by bizamajig
HTML
<div id="bizamajig-tabs-app-workspace-search">
<button class="bizamajig-ui-button ui-state-default bizamajig-ui-button-toggleable ui-corner-left" data-panel-id="filter-0-panel" data-placeholder="Filter" data-lookup_location_id="-1">Filter</button>
<button class="bizamajig-ui-button ui-state-default bizamajig-ui-button-toggleable ui-corner-right" data-panel-id="search-0-panel" data-placeholder="Search" data-lookup_location_id="-1">Search</button>
<button class="bizamajig-ui-button ui-state-default bizamajig-ui-button-toggleable ui-corner-right" data-panel-id="x-0-panel" data-placeholder="xxx" data-lookup_location_id="-1">xxx</button>
<div class="bizamajig-ui-panel-option" id="filter-0-panel" style="display: none;">CONTENT 1 fasd fasd fasd fasdf asdf sdaf
</div>
<div class="bizamajig-ui-panel-option" id="search-0-panel" style="display: none;">CONTENT 2rt yrtyrthfgh dfty uytujtyt rty urty urty
</div>
<div class="bizamajig-ui-panel-option" id="x-0-panel" style="display: none;">CONTENT xvvefxveex ve vesvfv sdfvfds vdfvsd
</div>
</div>
JavaScript
function bizamajig__toggle__panel( input_element ) {
$( '.bizamajig-ui-panel-option' ).each(function( index ) {
if ( $(this).attr( 'id' ) != input_element ) {
$(this).slideUp(400);
}
});
$( '#' + input_element ).slideDown(600).fadeIn();
}
$('button').button();
$( '#bizamajig-tabs-app-workspace-search' + ' > button.bizamajig-ui-button' ).click(function(e) {
var panel_div = $(this).attr('data-panel-id');
bizamajig__toggle__panel( panel_div );
return false;
$( '#' + button_div ).slideToggle('slow', 'swing / linear', function() {
if ( $('#advance-control').is(':hidden') ) {
//closed
$(this).css('padding', '10').css('background-color', '#f2f2f2'); // #2B509A
}
else {
//opened
$(this).css('padding', '10').css('background-color', 'none'); // #4D6837
}
});
return false;
});