title: Expand and collapse with css
body: <p>I have created in Jquery one function to expand and collapse the content of a div. BUt now I would like to make it only with CSS and also use an image of an arrow, like these ones</p>
  
  <p><img src="https://i.stack.imgur.com/mMrKT.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/iavM8.png" alt="enter image description here"></p>
  
  <p>View Live <strong><a href="http://jsfiddle.net/rtgpjh1q/" rel="nofollow noreferrer"><code>jsFiddle</code></a></strong></p>
  
  <p>I also would like to eliminate all these tag span and keep only the div and it's content</p>
  
  <p>Here the code I have so far.</p>
  
  <pre><code>&lt;div class='showHide'&gt;
      &lt;span class='expand'&gt;&lt;span id="changeArrow"&gt;&amp;#8593;&lt;/span&gt;Line expand and collapse&lt;/span&gt;
      &lt;fieldset id="fdstLorem"&gt;Lorem ipsum...&lt;/fieldset&gt;
  &lt;/div&gt;
  </code></pre>
  
  
  
  <pre><code>$(document).ready(function () {
      $('.showHide&gt;span').click(function () {
          $(this).next().slideToggle("slow");
          return false;
      });
      $(".showHide&gt;span").toggle(function () {
          $(this).children("#changeArrow").text("↓");
      }, function () {
          $(this).children("#changeArrow").text("↑");
      });
  });
  </code></pre>