How to change the height of a dynamic div using jquery-CodePudding

I have a div called .spacer which dynamically adds a height. I now want to change the height of the .spacer to add 40px to the current dynamic height which when toggled, would add and remove 40px to the dynamic .spacer height.

<div ></div> -- Shows an empty div which is then populated with a dynamic height.

 let spacer = $(".spacer");

 $(".profile-header-wrapper .search-icon").on("click", function(){
     fixedVideo.toggleClass("fixed-video-position");
     spacer.css("height", (spacer   50)   "px").toggle();
});

CodePudding user response：

You are setting the height to spacer 50 and spacer is in fact a jQuery element, you should use spacer.height() 50.

You snippet corrected:

 let spacer = $(".spacer");

 $(".profile-header-wrapper .search-icon").on("click", function(){
     fixedVideo.toggleClass("fixed-video-position");
     spacer.css("height", (spacer.height()   50)   "px").toggle();
});

Now I'm assuming you use "toggle" because the element is hidden, on hidden elements spacer.height() may return empty and you'll have to fetch it from the CSS instead ( using something in the lines of parseInt(spacer.css("height").replace("px",""))).