Why the function stops working after you replace the href?

The script simply expands information by clicking on the button. When it was 2 buttons, the script worked perfectly, decided to simplify the script, oprosnik 1 button and now when you click it changes the href, but after changing the href, the script stops working and is not shifting the information back.
$( document ).ready(function() {

var txtZeroID = "#rec70014772";

var open = false;
var close = true;
var resize = false;
$('[href = "#long"]').addClass('activebtn');

function allUp(){

 if (!resize){
 $("[href='#stepsleft2']").parent(".tn-elem").animate({ top: '-=80' }, 1000); 
 $("[href='#stepsleft3']").parent(".tn-elem").animate({ top: '-=160' }, 1000);
 $("[href='#stepsleft4']").parent(".tn-elem").animate({ top: '-=240'}, 1000);
 $("[href='#stepsright6']").parent(".tn-elem").animate({ top: '-=80' }, 1000); 
 $("[href='#stepsright7']").parent(".tn-elem").animate({ top: '-=160'}, 1000); 
 $("[href='#stepsright8']").parent(".tn-elem").animate({ top: '-=240'}, 1000); 

$("[href='#myline']").parent(".tn-elem").animate({
 height : '-=270', }, 1000, function() { });
 } else {resize = false;};

 $(""+txtZeroID+" .t396__artboard , "+txtZeroID+" .t396__carrier , "+txtZeroID+" .t396__filter").animate({ height : '-=260px' }, 1000);


 $('[href = "#txtleft"]').removeClass("showtxt");

 $('[href = "#txtright"]').removeClass("showtxt");

 close = true;open = false; 
}; 


function allDown(){
 $("[href='#stepsleft2']").parent(".tn-elem").animate({ top: '+=80' }, 1000); 
 $("[href='#stepsleft3']").parent(".tn-elem").animate({ top: '+=160' }, 1000);
 $("[href='#stepsleft4']").parent(".tn-elem").animate({ top: '+=240' }, 1000);
 $("[href='#stepsright6']").parent(".tn-elem").animate({ top: '+=80' }, 1000);
 $("[href='#stepsright7']").parent(".tn-elem").animate({ top: '+=160' }, 1000);
 $("[href='#stepsright8']").parent(".tn-elem").animate({ top: '+=240' }, 1000); 

 $("[href='#myline']").parent(".tn-elem").animate({ height : '+=270' }, 1000);


 $(""+txtZeroID+" .t396__artboard , "+txtZeroID+" .t396__carrier , "+txtZeroID+" .t396__filter").animate({height : '+=260px'}, 1000);


 $('[href = "#txtleft"]').addClass("showtxt");

 $('[href = "#txtright"]').addClass("showtxt");

 open = true;close = false;
}; 

 $('[href = "#long"]').click(function (){
 $("[href='#long']").attr('href', '#short')
 if (close){ allDown()};


});

 $('[href = "#short"]').click(function (){
 $("[href='#short']").attr('href', '#long')

 if (open){ allUp()}; 


});


var allowed for resizetimeout;
$(window).resize(function(){
clearTimeout(allowed for resizetimeout);
 allowed for resizetimeout = setTimeout(function(){ 
 if (!close){ 
 resize = true;
 setTimeout(function() { 
 $("[href = '#short']")[0].click(); 
}, 500); }; }, 500);});

});

A little suratensis on the code made the code work, but only 1 cycle
$('[href = "#long"]').click(function (f){
$("[href='#long']").attr('href', '#short');
 if (close){ allDown();}
f.the stoppropagation();

$('[href = "#short"]').click(function (n){
 $("[href='#short']").attr('href', '#long');
 if (open){ allUp();}
n.the stoppropagation();
});
f.preventDefault();


Tell me how to make it work on every key?
March 12th 20 at 08:03
1 answer
March 12th 20 at 08:05
Solution
handlers are mounted on specific html element, not the attribute. After changing the attribute, the handler clicks anywhere he will not jump.

Read about "delegation event handling" or reconsider your approach (now everything is terrible).
Thank you very much, though I'm still new to jquery, I was able to solve my problem in 10 minutes after reading your answer:) - Steve_Labad commented on March 12th 20 at 08:08

Find more questions by tags jQueryJavaScript