I am attempting to recreate that particular example as a practice exercise.
I am working on making the image div adjust dynamically when clicking the text above or below it.
Therefore, I created a sketch to experiment with. However, I am currently stuck because I am unsure how to calculate the remaining space when the expanded div is open so that the image fits within that space.
jQuery(document).ready(function($)
{
$("#ex").click(function()
{
$("#expanded").slideToggle(200)
if ($("#ex").text() == "infos")
{
$("#ex").html("close")
$("#fit-picture").css("height", "20px");
}
else
{
$("#ex").text("infos")
$("#fit-picture").css("height", "100vh");
}
});
});body{margin:0}
.container{
height: 100%;
min-height: 100%;}
#expanded{
margin-top: 0px;
background: gray;
width: 50vw; height: 50vh;
}
#ex {
display: block;
width: 50vw;
background-color:darkgrey;
text-decoration:none;
}
#ex:hover {
background:black;
}
.container{
height:100vh;
}
#fit-picture{
width: auto;
height: 100vh;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class ="container">
<div class="expand">
<a href="#" id="ex">infos</a>
</div>
<div id="expanded" style="display: none;">the image is supposed to be reduced proportionally to fit the remaining space of the screen.
</div>
<img id="fit-picture"
src="https://www.wanimo.com/veterinaire/wp-content/uploads/2018/11/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbd8d3dacf96d1dad7d4cec396de8a8e8c8f8d8c898c89888a8282fb89c395d1cbdc">[email protected]</a>">
</div>