jQuery .click() function with .attr() -

i'm trying resize div1 click function depending if menuright visible.

i need $('a#hidediv').click(function ().

right now, thea#showdiv selector functioning.

function mysetupfunction() {     var 1 = $('#wrapper_content').width();     var 2 = $('#menurigth').width();     var remaining_width = parseint($(window).width());      $('#menurigth').hide();     $('#div1').css('width', remaining_width);      $('a#showdiv').click(function () {         $('#menurigth').animate({ width: 'toggle' });         $('#div1').css('width', remaining_width - two);         $('a#showdiv').attr('id', 'hidediv')     });      $('a#hidediv').click(function () {         $('#menurigth').hide();         $('#div1').css('width', remaining_width);         $('a#hidediv').attr('id', 'showdiv')     }); }  $(document).ready(mysetupfunction); $(window).resize(mysetupfunction); 

when change id on element (which arguably isn't thing anyway, that's beside point), don't change event handlers bound it. same click handler still on element.

instead of binding elements, use event delegation , bind common parent. don't need change handler because identity of element follow click event. this:

$(document).on('click', 'a#showdiv', function () {     // code });  $(document).on('click', 'a#hidediv', function () {     // code }); 

as id changes, time document receives click event examine current id of element invoked event, use correct handler.

the main thing learn here while code inside click handler runs time element clicked, code assigns click handler ($('something').click(somefunction);) runs once when page loads, , assigns handler elements match selector at time only.