Создайте две кнопки с одинаковой функцией - открытый ящик div

Question

Я надеялся, что кто-то поможет мне разобраться в этом - у моего проекта в настоящее время есть ящик, который использует функцию анимации JQuery для открытия и закрытия, когда пользователь нажимает на вкладку. Я хотел бы создать дополнительную кнопку, которая выполняет ту же функцию (просто альтернативный способ открытия и закрытия одного и того же точного ящика).

Моя текущая кнопка является # handler_bottom со следующим JQuery:

$(document).ready(function() { 

     var h_bt = 0; //variable to keep track of the div#bottom condition. 

     $('a#handler_bottom').on('click', function(event) { 

      event.preventDefault(); 

      if (h_bt == 0) { 

       $(this).parent().animate({ 
        top: '380px' 
       }, 300); 
       $(this).css({ 
        'background-color': '#abadb4' 
       }); 

       h_bt = 1; 
      } else { 

       $(this).parent().animate({ 
        top: '560px' 
       }, 300); 
       $(this).css({ 
        'background-color': '#abadb4' 
       }); 

       h_bt = 0; 
      } 
     }); 

Я включил скрипку, чтобы лучше показать, что я хотел бы достичь My Fiddle. Я хотел бы использовать синий круг (#btntwo), чтобы работать как дополнительная кнопка, чтобы открыть нижний ящик.

Answer 1

Отделите обработчик кликов, чтобы его можно было повторно использовать.

$('a#handler_bottom').on('click', openDrawer) 
$('#btntwo').on('click', openDrawer) 

function openDrawer(event) { 
    event.preventDefault(); 

    var drawer = $('#todo'); 

    if (h_bt == 0) { 

    drawer.animate({ 
     top: '380px' 
    }, 300); 
    $(this).css({ 
     'background-color': '#abadb4' 
    }); 

    h_bt = 1; 
    } else { 

    drawer.animate({ 
     top: '560px' 
    }, 300); 
    $(this).css({ 
     'background-color': '#abadb4' 
    }); 

     h_bt = 0; 
    } 
} 

Обратите внимание, что я также изменил обращение $(this).parent() к самому ящику. Контекст изменится в зависимости от того, что вызывает событие click.

Answer 2

$("div#btntwo").on('click', function(event){ $("a#handler_bottom").click()});