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">
<div class="container">
  <section class="content">
    <div class="titre parent">
       <span>Afficher/Cacher le titre <i class="fa fa-plus-circle" aria-hidden="true"></i><i class="fa fa-minus-circle" aria-hidden="true"></i></span>
       <h1 class="hide">Titre de la section 1</h1>
    </div>
    <div class="description parent">
         <span>Afficher/Cacher la description <i class="fa fa-plus-circle" aria-hidden="true"></i><i class="fa fa-minus-circle" aria-hidden="true"></i></span>
          <p class="hide">Description<br/>Duis rhoncus placerat turpis ut pulvinar. Phasellus elementum lorem ut augue   eleifend, eu tincidunt magna consectetur. Mauris non blandit ligula, vel suscipit libero. In eleifend ipsum vel ante porttitor egestas!</p>
    </div>
    <div class="fichier parent">
             <span>Afficher/Cacher le fichier <i class="fa fa-plus-circle" aria-hidden="true"></i><i class="fa fa-minus-circle" aria-hidden="true"></i></span>
              <p class="fichier hide">Le fichier</p>
    </div>
 </section>
</div>

<div class="container">
  <section class="content">
    <div class="titre parent">
       <span>Afficher/Cacher le titre <i class="fa fa-plus-circle" aria-hidden="true"></i><i class="fa fa-minus-circle" aria-hidden="true"></i></span>
       <h1 class="hide">Titre de la section 2</h1>
    </div>
    <div class="description parent">
         <span>Afficher/Cacher la description <i class="fa fa-plus-circle" aria-hidden="true"></i><i class="fa fa-minus-circle" aria-hidden="true"></i></span>
          <p class="hide">Description<br/>Duis rhoncus placerat turpis ut pulvinar. Phasellus elementum lorem ut augue   eleifend, eu tincidunt magna consectetur. Mauris non blandit ligula, vel suscipit libero. In eleifend ipsum vel ante porttitor egestas!</p>
    </div>
    <div class="fichier parent">
             <span>Afficher/Cacher le fichier <i...

CSS

i.fa{
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 15px;  
}

i.fa:hover{
  cursor: pointer;
}

.container{
  border: 1px solid grey;
  margin-bottom: 20px;
}

.hide{
  display: none;
}

JavaScript

(function($){
	$('.fa-plus-circle').on('click', function(){  		
      	var current = $(this);
        var parent = current.parents('.parent');
        parent.find('h1').show();
        parent.find('p').show();
        parent.find('.fichier').show();  
  });
  
  $('.fa-minus-circle').on('click', function(){  		
      	var current = $(this);
        var parent = current.parents('.parent');
        parent.find('h1').hide();
        parent.find('p').hide();
        parent.find('.fichier').hide();  
  });
  
})(jQuery);