title: Read more div with images expand/collapse Toggle excerpt/content
body: <p>Okay, I've been spending all day trying to figure out the right approach for this, but have come out short, so maybe someone here can point me in the right direction. </p>
  
  <p>Problem:
  I have a div with class "article-content". There will be around 2-10 of these on the page. Each of them will contain output from a wysiwyg. i.e. texts wrapped in p-tags, some strong tags, em tags and even img tags. </p>
  
  <p>I need to create a preview/excerpt version of these that wont show the images and will append a [...] to the end of x characters + a "read more" link. When this is clicked the full article will be shown including images. </p>
  
  <p>Ive seen the following appraches: </p>
  
  <ol>
  <li><p>Strip the content of the div after x characters and add [...] + link. This makes the content a bit fragile since it can strip end tags, and even strip the middle of an image tag resulting in broken html being outputtet.</p></li>
  <li><p>Change the height on content element, and overflow:hidden;. This could result in an image overflowing out of the box - with parts of it inside, and even cut a line in half depending on the line-height vs. the content height. this makes the js very css dependant. </p></li>
  <li><p>Create new content element with the first x characters and toggle display none/block on the short version and long version. This creates 2 instances of the text in the markup, which i would prefer. This would also make it impossible to take advantage of css transitions for the height when the elements expands. </p></li>
  </ol>
  
  <p>I find it a little strange that i havent been able to find a bullet proof plugin for this supposedly simple - and much used - task. But maybe im just missing something. Maybe im google for the wrong terms. what is this thing offically called ? toggle expand? read-more-read-less? show more? </p>
  
  <p>What would be considered the best approach? and is there a way to get around all these problems?</p>
  
  <p>Thank you for your time </p>