JQuery Accordion with CSS

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans|Lato|Ubuntu:bold"></script>
<div id="tabs">
   <h3 class="bar">This is first tab</h3>

  <div class="tab_content">
    <p>abcdefg</p>
  </div>
   <h3 class="bar">This is first tab</h3>

  <div class="tab_content">
    <p>hijklm</p>
  </div>
   <h3 class="bar">This is first tab</h3>

  <div class="tab_content">
    <p>nopqrst</p>
  </div>
   <h3 class="bar">This is first tab</h3>

  <div class="tab_content">
    <p>uvwxyz</p>
  </div>
</div>

CSS

body {
  font: 16px/26px"Open Sans", Helvetica Neue, Arial;
  margin: 0;
  padding:20px 0px 0px 0px;
  background:#222222;
}
#tabs {
  width: 100%;
  margin: 0 auto;
}
.bar {
  cursor:pointer;
  background: #9a305b;
 display: inline;
  padding: 5px;
  color: white;
  border-bottom: 1px solid #222222;
}
.tab_content {
  display: none;
  width:100%;
  background-color: #f5f5ef;
  padding:10px
}
.tab_content p {
  margin: 0;
   display: inline;
}
.selected {
  background: #cd4079
}

JavaScript

var tab = $('#tabs .bar')

tab.on('click', function (e) {

  tab.removeClass('selected');
  $(this).addClass('selected');

  $('.tab_content').stop().slideUp(200)
  $(this).next().slideToggle(500);

});