title: JSon and Jquery Accordion
body: <p>This is driving me freaking BATTY as hell. 
  This is essentially what I am trying to accomplish. 
  You'll see the Json there are a 2 different departments "Office" and "Stockroom"
  What I am trying to accomplish is to arrange everyone by the department they are in. The problem with this is that the HTML needs to look something like this</p>
  
  <pre><code>    &lt;h3&gt;&lt;a href="#"&gt;Section 1&lt;/a&gt;&lt;/h3&gt;
      &lt;div&gt;
          &lt;p&gt;
          First Paragraph
          &lt;/p&gt;
  
          &lt;p&gt;
          Second Paragraph
          &lt;/p&gt;
  
          &lt;p&gt;
          Third Paragraph
          &lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>But unfortunately I cannot seem to get the <code>&lt;/div&gt;</code> tag in the right spot at the end of the last paragraph of each section</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="http://jqueryui.com/themes/base/jquery.ui.all.css" /&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  
  
      &lt;script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.core.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.widget.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.accordion.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
      $(document).ready(function () {
          var contacts = [{"displayname":"Bruce Lee","email":"Bruce.lee@karate.com","department":"stockroom"},
  {"displayname":"Your Momma","email":"Your.Momma@Yourmom.com  ","department":"stockroom"},
  {"displayname":"Bob","email":"Bob@bob.com  ","department":"Office"},
  {"displayname":"Cathy","email":"Cathy@Cathy.com  ","department":"Office"},
  {"displayname":"mike","email":"mike@Cathy.com  ","department":"Office"},
  {"displayname":"scott","email":"scott@Cathy.com  ","department":"Office"}
  ];          
  var contacts2 = contacts;
              var r = 1;
  
              var lastvalue = 'blah';
              for(var i=0; i &lt;=contacts.length; i++)
              {
                  if(contacts[i].department != null)
                  {
                      if(lastvalue != contacts[i].department)
                      {
                          if(i&lt;1)
                          {
                          $('#accordion').append('&lt;/div&gt;&lt;h3&gt;&lt;a href="#"&gt;' + contacts[i].department + '&lt;/a&gt;&lt;/h3&gt;');
                          $('#accordion').append('&lt;div&gt;&lt;p&gt;&lt;a href="mailto:'+ contacts[i].email +'"&gt;' + contacts[i].displayname + '&lt;/a&gt;&lt;/p&gt;');
                          }else{
                          $('#accordion').append('&lt;h3&gt;&lt;a href="#"&gt;' + contacts[i].department + '&lt;/a&gt;&lt;/h3&gt;');
                          $('#accordion').append('&lt;div&gt;&lt;p&gt;&lt;a href="mailto:'+ contacts[i].email +'"&gt;' + contacts[i].displayname + '&lt;/a&gt;&lt;/p&gt;');
                          }
                      }else{
                          $('#accordion').append('&lt;p&gt;&lt;a href="mailto:'+ contacts[i].email +'"&gt;' + contacts[i].displayname + '&lt;/a&gt;&lt;/p&gt;');
  
                      }
  
                  lastvalue = contacts[i].department;
                  r++;
                  }
              }
          });
          $(function() {
          $( "#accordion" ).accordion();
      });
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="contactlist"&gt;
      &lt;div id="accordion"&gt;
  
      &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>