Using jQuery to create an accordion of provided content

I don't really know JS / jQuery. I need to take this HTML and use JS to convert / re-structure it so it functions as an accordion.

HTML:

<h6>heading 1</h6>
<p>this is some content</p>
<p>this is some more content</p>

<h6>heading 2</h6>
<p>this is some content</p>
<p>this is some more content</p>

<h6>heading 3</h6>
<p>this is some content</p>
<p>this is some more content</p>

I need to take the h6 as the accordion link and content between for the content area. I managed to get this together from a tutorial but it does it as tabs and not sure how to redo so it acts / structures as an accordion:

I guess would need to be something like (when clicking on title changes to right content of course):

<div class="accordion">
  <div class="title">title 1</div>
  <div class="content">content 1</div>

  <div class="title">title 2</div>
  <div class="content">content 2</div>
</div>

JS that I need to adjust:

var headers = $("#tab_description h6");

  $('#tab_description h6').each(function(i){      
    $(this).nextUntil("h6").andSelf().wrapAll('<div class="tab" id="tab-'+i+'"/>');
  });

  for( var i = 0; i < headers.length; i++ ) {
    $('.tabs').append('<li class=""><a href="#tab-'+i+'">'+headers[i].innerHTML+'</a></li>');
  }

  $('ul.tabs').each(function(){
    var active, content, links = $(this).find('a');
    var listitem = $(this).find('li');
    active = listitem.first().addClass('active');
    content = $(active.attr('href'));
      $('.tab').hide();
    $(this).find('a').click(function(e){
      $('.tab').hide();
      $('ul.tabs li').removeClass('active');
      content.hide();
      active = $(this);
      content = $($(this).attr('href'));
      active.parent().addClass('active');
      content.show();
      return false;
    });
  });

  headers.remove(); // remove headers from description  
  $('#tab-0').show(); // show the first tab