Make sure to include all relevant code details in your question along with providing the fiddle. Here is the CSS code snippet:
#some_box {
background: #fc0;
width: 25%;
height: 200px;
}
.second img {
max-width:100%;
max-height:100%;
}
.second {
width: 200px;
}
Accompanied by the following HTML:
<button id="show_hide_button">click me</button>
<div id="some_box"></div>
<div class="second">
<img src="http://piq.codeus.net/static/media/userpics/piq_66223.png" />;
</div>
Note that the image is set to scale according to the parent container's size, resulting in the animation effect seen in the code snippet.
For a specific width collapse without affecting the image's height, you can set a fixed height for the image:
.second img {
max-width: 100%;
height: 200px;
}
Additionally, you can handle both animations in a single click event:
$(document).ready( function(){
$('#show_hide_button').click( function() {
$('#some_box').animate({ width: 'toggle'});
$('.second').animate({ width: 'toggle' });
});
});
Link to the updated fiddle: http://jsfiddle.net/u1sdd8j5/1/
For a different effect where the image collapses to the left while maintaining its aspect ratio, a modified approach using CSS and jQuery is recommended:
#some_box {
background: #fc0;
width: 25%;
height: 200px;
}
.second {
width: 25%;
height: 200px;
}
.second img {
max-width: 100%;
max-height: 100%;
}
Updated JS code snippet:
$(document).ready( function(){
$('#show_hide_button').click( function() {
$('#some_box').animate({ width: 'toggle' });
var $secondImg = $('.second img'),
secondImgMargin = $secondImg.is(':visible') ? '50%' : 0;
$('.second img').animate({
width: 'toggle',
marginTop: secondImgMargin
});
});
});
Link to the revised fiddle: http://jsfiddle.net/xwanm9ze/1/
Consider utilizing CSS3 transitions for a simpler implementation, ensuring to set up a class to toggle the animation and specifying the transform-origin property accordingly.