Collapsing a <div> in CSS

I have a repeater control where the end user can create a blog and post it on the home page.  The blog can have a teaser image or not.  If there is no image present, then the end user wants to not show the blank default image, but wants to flush all the text to the left.  

Currently the markup is
&lt;div&gt;
&lt;div class="teaserimage" &lt;/div&gt;
&lt;div class="Summary"&gt; &lt;/div&gt;
&lt;/div&gt;

If the image was null, then I would want to collapse the teaserimage div and move the summary to the left.  Currently the summary shows up to the right of the teaserimage.

I know there is a way to collapse a &lt;div&gt; using CSS

Thanks
sherbug1015Asked:
Who is Participating?
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
This method is probably better because it checks that the image actually loaded.  The first way only checks that there is an image src.  But if that image source is not valid, you will still get the "blank image" icon.   I have a sample bad image added and this works nicely.

http://jsbin.com/foxamu/2/edit?html,output
<!DOCTYPE html>
<html>
<head>
  <style>
    div.teaserimage{float:left;margin-right:10px;}
  </style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script>
$(function(){
  $('.teaserimage').hide(); 
  $('.teaserimage img').each(function(){   
   
    $(this)
	.load(function(){
		$(this).parent().show();	
	});
    
    
  });
 
  
});
  </script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div> 
    <div class="teaserimage"></div> 
  <div class="Summary">In hac habitasse platea dictumst. Vestibulum ultricies aliquet diam at varius. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras libero elit, lacinia quis justo nec, iaculis scelerisque est. Morbi sed enim nibh. Maecenas pulvinar arcu et mi ultrices, vitae lacinia lorem posuere. Curabitur viverra consectetur consectetur. Nam vel quam ut elit ultrices pretium. Mauris eu dapibus tortor. Mauris faucibus, nisl et laoreet accumsan, nisl mauris egestas orci, ac scelerisque risus libero sit amet velit. Mauris lobortis aliquet gravida. Morbi dignissim semper magna. </div> 
</div>
  <hr>
  <div class="teaserimage"><img src=""> </div> 
  <div class="Summary">In hac habitasse platea dictumst. Vestibulum ultricies aliquet diam at varius. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras libero elit, lacinia quis justo nec, iaculis scelerisque est. Morbi sed enim nibh. Maecenas pulvinar arcu et mi ultrices, vitae lacinia lorem posuere. Curabitur viverra consectetur consectetur. Nam vel quam ut elit ultrices pretium. Mauris eu dapibus tortor. Mauris faucibus, nisl et laoreet accumsan, nisl mauris egestas orci, ac scelerisque risus libero sit amet velit. Mauris lobortis aliquet gravida. Morbi dignissim semper magna. </div> 
</div>
  
  <hr>
    <div class="teaserimage"><img src="//experts.cachefly.net/files/2013/12/23/3e314301-3719-47a2-81aa-b8ed3c88b794.jpg"> </div> 
  <div class="Summary">In hac habitasse platea dictumst. Vestibulum ultricies aliquet diam at varius. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras libero elit, lacinia quis justo nec, iaculis scelerisque est. Morbi sed enim nibh. Maecenas pulvinar arcu et mi ultrices, vitae lacinia lorem posuere. Curabitur viverra consectetur consectetur. Nam vel quam ut elit ultrices pretium. Mauris eu dapibus tortor. Mauris faucibus, nisl et laoreet accumsan, nisl mauris egestas orci, ac scelerisque risus libero sit amet velit. Mauris lobortis aliquet gravida. Morbi dignissim semper magna. </div> 
</div>
  
  <hr>
    <div class="teaserimage"><img src="//experts.cachefly.net/somebadfile.jpg"> </div> 
  <div class="Summary">In hac habitasse platea dictumst. Vestibulum ultricies aliquet diam at varius. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras libero elit, lacinia quis justo nec, iaculis scelerisque est. Morbi sed enim nibh. Maecenas pulvinar arcu et mi ultrices, vitae lacinia lorem posuere. Curabitur viverra consectetur consectetur. Nam vel quam ut elit ultrices pretium. Mauris eu dapibus tortor. Mauris faucibus, nisl et laoreet accumsan, nisl mauris egestas orci, ac scelerisque risus libero sit amet velit. Mauris lobortis aliquet gravida. Morbi dignissim semper magna. </div> 
</div>


</body>
</html>

Open in new window

0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
if you hide the teaserImage div, does that move the text over? if not, can you show the css for both of the classes?

also, i noticed in your teaserimage div, you're missing the closing ">" char for the start tag:

<div class="teaserimage" > </div>
0
 
sherbug1015Author Commented:
I don't have the css for it.  This will have to be a new css class.  That is what I am asking is how to write the css.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
how do you determine if an image is going to appear? through server side processing I assume? what language?
0
 
sherbug1015Author Commented:
Sorry, I had to go to a couple of meetings.  Yes.   If the user uploads an image, the blogTeaser property will have a GUID, else it will be null an the blank head will appear.  Language C#
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I have a working sample below.  Notice I have this working where either the div.teaserimage is blank or the child img src is blank.  I have documented the jquery in the code.  Please let me know if you have any questions.


http://jsbin.com/foxamu/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
  <style>
    div.teaserimage{float:left;margin-right:10px;}
  </style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script>
    $(function(){
  $('.teaserimage').hide(); // start out hiding the image
  $('.teaserimage img').each(function(){   // loop through div.teaserimage
    var img=$(this).attr('src'); //check if img has src="something"
    if(img){
      $('.teaserimage').show();  // if there is an image src, show div
    }
  });
  
});
  </script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div> 
    <div class="teaserimage"></div> 
  <div class="Summary">In hac habitasse platea dictumst. Vestibulum ultricies aliquet diam at varius. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras libero elit, lacinia quis justo nec, iaculis scelerisque est. Morbi sed enim nibh. Maecenas pulvinar arcu et mi ultrices, vitae lacinia lorem posuere. Curabitur viverra consectetur consectetur. Nam vel quam ut elit ultrices pretium. Mauris eu dapibus tortor. Mauris faucibus, nisl et laoreet accumsan, nisl mauris egestas orci, ac scelerisque risus libero sit amet velit. Mauris lobortis aliquet gravida. Morbi dignissim semper magna. </div> 
</div>
  <hr>
  <div class="teaserimage"><img src=""> </div> 
  <div class="Summary">In hac habitasse platea dictumst. Vestibulum ultricies aliquet diam at varius. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras libero elit, lacinia quis justo nec, iaculis scelerisque est. Morbi sed enim nibh. Maecenas pulvinar arcu et mi ultrices, vitae lacinia lorem posuere. Curabitur viverra consectetur consectetur. Nam vel quam ut elit ultrices pretium. Mauris eu dapibus tortor. Mauris faucibus, nisl et laoreet accumsan, nisl mauris egestas orci, ac scelerisque risus libero sit amet velit. Mauris lobortis aliquet gravida. Morbi dignissim semper magna. </div> 
</div>
  
  <hr>
    <div class="teaserimage"><img src="//experts.cachefly.net/files/2013/12/23/3e314301-3719-47a2-81aa-b8ed3c88b794.jpg"> </div> 
  <div class="Summary">In hac habitasse platea dictumst. Vestibulum ultricies aliquet diam at varius. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras libero elit, lacinia quis justo nec, iaculis scelerisque est. Morbi sed enim nibh. Maecenas pulvinar arcu et mi ultrices, vitae lacinia lorem posuere. Curabitur viverra consectetur consectetur. Nam vel quam ut elit ultrices pretium. Mauris eu dapibus tortor. Mauris faucibus, nisl et laoreet accumsan, nisl mauris egestas orci, ac scelerisque risus libero sit amet velit. Mauris lobortis aliquet gravida. Morbi dignissim semper magna. </div> 
</div>
  
</body>
</html>

Open in new window

0
 
sherbug1015Author Commented:
Thank you so much.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.