stacking divs while pushing content down upon expanding an image? - html

Question

I'm working on this banner ad that I posted here yesterday and I got my images fading properly, but I had everything positioned in an absolute manner, and I need to have it so that when my ad expands, it pushes whatever content below it down. Right now, when I press expand, it covers the image below it, rather than push it down even though the picture's positioning is relative.
Here's a link to my project on codepen.
And here's my CSS:
#banner{
position: relative;
min-height: 100px;
}
.hide {
transition: opacity .5s ease-in-out;
opacity: 0;
position:absolute;
}
.show {
transition: opacity .5s ease-in-out;
opacity: 1;
position: absolute;
z-index: 1;
}
#toggle, #toggle2{
cursor: pointer;
}
#toggle{
margin-left:-123px;
}
#toggle2{
position: relative;
}
#twitterIcon{
position: relative;
}
.videoDiv > video {
display:inline-block;
border: 1px solid;
font-size:0;
margin: 0;
padding:0;
}
.videoDiv{
font-size:0;
margin-left:413px;
padding-top:152px;
}
I've read that absolute positioning makes it this way, but I need the collapsed and expanded version to be absolute so that they're on top of one another. Is there anyway I can make it so that the Coach ad pushes the image of Ron Swanson down rather than covering it?

Answer 1

Here is a complete solution: http://codepen.io/anon/pen/mewMEO
The solution is to make the smaller banner absolute with a negative z-index so it is in fact behind the normally positioned large banner.
Also, I took the liberty of improving your JS code by making it more generic and adding support for multiple banners on the page.
HTML
<div class="banner collapsed">
<img class="preview-size" src="http://i.imgur.com/y6foj3Z.jpg"/>
<img class="full-size" src="http://i.imgur.com/CeUfSAX.jpg"/>
<div class="btn-expand">
<img id="toggle" src="http://i.imgur.com/axmdldH.png" />
</div>
<div class="btn-collapse">
<img src="http://i.imgur.com/5wZwdGz.png" />
<a href="https://twitter.com/intent/tweet?text=I%20LOVE%20the%20new%20%40coach%20swagger!">
<img id="twitterIcon" src="http://i.imgur.com/WxSsDpb.png" />
</a>
</div>
</div>
<div class="push">
<img src="http://i.imgur.com/sFNERNs.jpg" />
</div>
CSS
.banner {
position: relative;
width: 970px;
}
.banner img {
/* Get rid of that margin on the bottom of the images */
display: block;
}
.banner .btn-collapse img {
display: inline;
}
.banner .btn-expand {
position: absolute;
bottom: 0;
right: 0;
}
.banner .preview-size {
z-index: -1;
position: absolute;
}
.banner .btn-expand {
display: none;
}
.banner.collapsed .preview-size {
z-index: 0;
position: relative;
}
.banner.collapsed .preview-size,
.banner.collapsed .btn-expand {
display: block;
}
.banner.collapsed .full-size,
.banner.collapsed .btn-collapse {
display: none;
}
JS
(function() {
var bannerEls = document.getElementsByClassName('banner');
// Support multiple banners
for (var index = 0; index < bannerEls.length; index++) {
var currBannerEl = bannerEls[index];
var expandEl = currBannerEl.getElementsByClassName('btn-expand')[0];
var collapseEl = currBannerEl.getElementsByClassName('btn-collapse')[0];
registerBannerToggle(expandEl, currBannerEl);
registerBannerToggle(collapseEl, currBannerEl);
}
function registerBannerToggle(clickableEl, bannerEl) {
clickableEl.addEventListener('click', function(e) {
toggleCollapseState(bannerEl);
});
}
function toggleCollapseState(bannerEl) {
if (bannerEl.className.indexOf('collapsed') !== -1) {
bannerEl.className =
bannerEl.className.replace(/collapsed/g, '');
}
else {
bannerEl.className += ' collapsed';
}
}
})();

Answer 2

The reason you are not able to do this was intentional to deter advertisers from messing with the actual website content. To pull it off, you would have to keep the position relative for the add or manipulate the ".push" div using javascript.

Answer 3

I dont know much plain javascript so I changed it for jQuery if you don't mind
All I've done was get images height and set animate on them with click on #toggle/#toggle2
CODEPEN