SaturnsEye SaturnsEye - 3 months ago 8
HTML Question

Is it possible to "hide" an image in a small div and show it when it expands?

I am creating a div that expands when it clicked and it and so far it is 35px high and I wan't it to hold an image that's about 250px high and show when the div expands

I thought I could set the image as a background in a child div but it isn't working

This is what I have so far:

HTML:

<div class="banner">
<div style="height:35px; line-height:30px; color:white;">Click to enlarge ></div>

<div class="banner-content">
</div>
</div>


CSS:

.banner {width: 100%; height:35px; background-color:red; cursor:pointer;}
.banner-content {width: 100%; background-color:blue; background-image: url("https://www.google.co.uk/logos/doodles/2016/2016-doodle-fruit-games-day-8-5666133911797760.3-hp.gif");}


Script:

$(document).ready(function () {
$(".banner").click(function(){
$(this).css('height', $(this).css('height') == "35px" ? "270px" : "35px");
});
});


FIDDLE

Answer

I would suggest to toggle a single css class, like open, then do the rest with just css. And don't forget to give the .banner-content a height too, otherwise it is not visible.

$(function() {
    $(".banner").click(function() {
        $(this).toggleClass("open")
    });
});
.banner {
  width: 100%; 
  height: 35px; 
  background-color: red; 
  cursor: pointer;
}
.banner.open { 
  height: 270px; 
}
.banner.open .banner-content {
  width: 100%;
  height: 270px;
  background-color: blue;
  background-image: url("https://www.google.co.uk/logos/doodles/2016/2016-doodle-fruit-games-day-8-5666133911797760.3-hp.gif");}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banner">
  <div style="height:35px; line-height:30px; color:white;">Click to enlarge ></div>
  <div class="banner-content"></div>
</div>