title: Jquery Toggle Function - Trigger/Button After Revelaed Content
body: <p>I've been struggling with this and I'm sure there must be a simple solution! I have a simple button that triggers a Jquery toggle reveal/hide which is working fine:</p>
  
  <p>JS</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
   $(document).ready(function() {
   //hide the all of the element with class msg_body
    $(".reveal-info-1").hide();
    //toggle the componenet with class msg_body
     $(".reveal-btn").click(function(){
      $(this).next(".reveal-info-1").slideToggle(500);
     });
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>My HTML looks something like this (there's a lot of content so I've simplified it):</p>
  
  <pre><code>&lt;div class="reveal-1"&gt;
   &lt;div class="reveal-btn"&gt;&lt;input type="button" value="Read More" id="reveal-btn-1" class="reveal-btn" /&gt;&lt;/div&gt;
   &lt;div class="reveal-info-1"&gt;
    &lt;p&gt;Content goes here&lt;/p&gt;
   &lt;/div
  &lt;/div&gt;
  </code></pre>
  
  <p>What I need is for the button/trigger to appear after the revealed content. Moving the button seems to break things so I guess in the flow of the code it has to appear before the toggled content? Is there anyway of achieving this without some nasty CSS hacks?</p>
  
  <p>Thanks,</p>
  
  <p>James</p>