JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="accordion-1" class="accordion" data-autoclose="false" data-openfirst="true" data-openall="true">                
  <h2>
    <button class="accordion-title collapse-item collapsed" data-toggle="collapse" data-target="#accordion-1-item-1" id="accordion-1-item-1-title" aria-expanded="false" role="button">Item 1
    </button>
  </h2>
  <div class="accordion-content collapse" id="accordion-1-item-1" aria-expanded="false">
    <p>
      Contenu de l'item 1
    </p>
  </div>
</div>

CSS

body {
			background: #f9f9f9;
			font-size: 175%;
		}
		.h1, h1 {
			font-size: 200%;
			font-weight: bold;
		}
		.h2, h2 {
			font-size: 150%;
			font-weight: bold;
		}
		.h3, h3 {
			font-size: 125%;
			font-weight: bold;
		}
		div.accordion-content {
			padding: 20px 20px 10px;
			background-color: #fff;
		}
		.accordion-title {
			margin-top: 15px;	
			font-size: 80%;
		}
		.collapse-item {
			display: block;
			padding: 5px 15px;
			color: #3c4047;
			background-color: #dcdcdc;
			border: none;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			-moz-background-clip: padding;
			-webkit-background-clip: padding-box;
			background-clip: padding-box;
		}
		.collapse-item:hover,
		.collapse-item:active,
		.collapse-item:focus {
			cursor: pointer;
			color: #fff;
			background-color: #3c4047;
			text-decoration: none
		}
		.collapse-item .icon-collapse {
			display: none
		}
		.collapse-item.collapsed .icon-collapse {
			display: inline-block
		}
		.collapse-item.collapsed .icon-expanded {
			display: none
		}
		.collapse-content.collapse {
			display: block;
			visibility: visible;
			position: absolute;
			left: -99999px
		}
		.collapse-content.collapse.in {
			display: block;
			position: relative;
			left: 0
		}
		hr {
			border-color: #777;	
		}
		.bs-callout {
			padding: 20px;
			margin: 20px 0;
			border: 1px solid #eee;
			border-left-width: 5px;
			border-radius: 3px;
		}
	
		.bs-callout-info {
			border-left-color: #1b809e;
		}
		
		.tabpanels p {
			margin: 1.5em 0;	
		}
		
		.tabpanels ul,
		.tabpanels ol {
			margin-bottom: 30px;	
		}
		
		.wb-tabs>.tabpanels>details, 
		.wb-tabs>details {
			padding: 0px 30px;
		}

JavaScript

// BOOTSTRAP ACCORDION ACCESSIBILITY ADJUSTMENTS
if ($('.accordion-title').length != 0) {
  $('.accordion-title').prepend('<i class="fa fa-caret-right icon-collapse"></i><i class="fa fa-caret-down icon-expanded"></i> ');

  $('.accordion-title').each(function(index, element) {
    if (!$(this).attr('id')) {
      $(this).attr('id', $(this).attr('data-target').substr(1) + '-title');
    }
  });
}