I am currently working on a layout and am seeking assistance with a specific feature. The task at hand involves a container that has a set height of 288px and contains an image with a height of 576px. The requirement is that when a user clicks anywhere within the parent container, the image remains the same height while the container toggles between displaying the full 576px height and a half-height of 288px. Essentially, the image height remains constant, but the container switches between two different heights based on user interaction. I am facing difficulty in achieving this behavior as the image's height is also changing along with the parent container. The current structure of the styling is as follows:
html (slim)
.persona-banner
img#perImg.sm-img [alt='Persona Banner' ng-src="{{ persona.banner }}"]
css (toggling between classes)
.persona-banner {
height: 576px;
margin-top: -88px;
z-index: -1;
img { position: absolute; }
}
.lrg-img {
height: 576px;
width: 1024px;
}
.sm-img {
height: 288px;
width: 1024px;
}
jquery
$('img#perImg').click(function() {
$(this).toggleClass("sm-img lrg-img", 1000);
if ($(this).hasClass('sm-img')) {
// moving other elements with the switch
$('.persona-header-bottom').css('margin-top', '-400px');
} else {
$('.persona-header-bottom').css('margin-top', '-130px');
}
});
In my attempts to resolve this issue, I have experimented with various options such as enclosing all elements in another container to control the toggling of the persona-banner container, utilizing hidden overflow-y, and adjusting positioning for both the image and parent container.
If anyone can provide assistance with this challenge, it would be greatly appreciated :)