JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<article>
  <header> 
    <h1>Titre de la section 2<i class="fa fa-plus-circle" aria-hidden="true"></i></h1>
  </header>
  <section class="hidden description">
    <h2>Description</h2>
    <p>Curabitur semper pharetra ullamcorper. Duis semper consectetur ornare. Nam tristique ante non augue pellentesque, ac aliquet velit dignissim. Maecenas vestibulum lectus eu vehicula accumsan
    </p>
       <span class="footer">Titre/Description<i class="fa fa-plus-circle" aria-hidden="true"></i><i class="fa fa-minus-circle" aria-hidden="true"></i></span>
  </section>
  <section class="hidden fichier">
    <h3>Le fichier</h3>
    <p>
    Le fichier en question
    </p>
     <span>Titre/Description/Fichier<i class="fa fa-minus-circle" aria-hidden="true"></i></span>
  </section>
</article>

CSS

.hidden{
  display: none;
}

i.fa{
  margin-left: 15px;
}

i.fa:hover{
  cursor: pointer;
}

.show{
  display: block;
}

JavaScript

(function($){
	
  /* Show */
	$('h1 .fa-plus-circle').on('click', function(){
  	var current = $(this);
    var parent = current.parents('article');
    var des = parent.find('.description');
    des.show();  
  });
  $('span .fa-plus-circle').on('click', function(){
  	var current = $(this);
		$('.fichier').show();
   
  });
  
  /* Hide */
  $('span .fa-minus-circle').on('click', function(){
  	var current = $(this);
    var parent = current.parents('.fichier');
    parent.hide();
  
  });
  
  $('.footer .fa-minus-circle').on('click', function(){
  	var current = $(this);
    var parent = current.parents('.description');
    parent.hide();
  });

})(jQuery);