title: How can I refactor this jquery code for a NOOB
body: <p>I have the following code that I can't seem to refactor:</p>
  
  <pre><code>    //opens some drop downs
      $('#proofreading').mouseover(function(){
                  $('.proofreading .accordion-body').collapse('show');
      });
  
  
      $('#edit').mouseover(function(){
                  $('.edit .accordion-body').collapse('show');
      });
  
  
      $('#on_time').mouseover(function(){
                  $('.on_time .accordion-body').collapse('show');
      });
  </code></pre>
  
  <p>Here is the code in the html:</p>
  
  <pre><code>&lt;div class='content-more'&gt;
  &lt;br&gt;
  &lt;span id='proofreading'&gt;
  Read More...
  &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class='accordion proofreading'&gt;
  &lt;div class='accordion-group'&gt;
  &lt;div class='accordion-body collapse'&gt;
  &lt;div class='accordion-inner'&gt;
  &lt;p class='content-desc'&gt;
  &lt;br&gt;
  When your work is proofread at EAPI we will go over your text word by word, line by line correcting the spelling, punctuation, grammar, terminology, jargon, and semantics.  As a result, your writing will be clear, correct, concise, comprehensible, and consistent: the &lt;b&gt;EAPI 5C standard&lt;/b&gt;.
  &lt;/p&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;span class='content-more close-accordion'&gt;
  close
  &lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class='content-more'&gt;
  &lt;br&gt;
  &lt;span id='edit'&gt;
  read more...
  &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class='accordion edit'&gt;
  &lt;div class='accordion-group'&gt;
  &lt;div class='accordion-body collapse'&gt;
  &lt;div class='accordion-inner'&gt;
  &lt;p class='content-desc'&gt;
  &lt;br&gt;
  When your work is edited at EAPI we will check and improve the formatting, style and accuracy of the text without altering the intended meaning.
  &lt;/p&gt;
  &lt;span class='content-more close-accordion'&gt;
  close
  &lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class='content-more'&gt;
  &lt;br&gt;
  &lt;span id='on_time'&gt;
  Read more...
  &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class='accordion on_time'&gt;
  &lt;div class='accordion-group'&gt;
  &lt;div class='accordion-body collapse'&gt;
  &lt;div class='accordion-inner'&gt;
  &lt;p class='content-desc'&gt;
  &lt;br&gt;
  When your work is proofread at EAPI we will go over your text word by word, line by line correcting the spelling, punctuation, grammar, terminology, jargon, and semantics.  As a result, your writing will be clear, correct, concise, comprehensible, and consistent: the &lt;b&gt;EAPI 5C standard&lt;/b&gt;.
  &lt;/p&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;span class='content-more close-accordion'&gt;
  close
  &lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I refactor the code so I don't need the id's and can just use a class as well as reduce the need for three jquery statements.</p>