JSFiddle - React, Tailwind, and code Playground

HTML

<!--Menu Projet 1-->
    <div id="container" class="tete">
		<h1 class="chap1">Projet 1</h1>
			<h2 class="chap1-2 souschap">/ iconographie<span class="minus"> ×</span></h2>
      <h3 class="chap1-3 souschap">/ description<span class="minus"> ×</span></h3>
			<h4 class="chap1-4 souschap">/ référence<span class="minus"> ×</span></h4>
      <span class="plus">+</span><br/>
      
      <!--Contenu Projet 1-->
      <img class="iconographie" src="https://pbs.twimg.com/profile_images/559620099003260928/ggWxxn54.jpeg" alt="" />
      <p class="description">Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis.</p>
		<a href="#" class="lien">lien à télécharger</a>
		</div>
    
    
    
    <!--Menu Projet 2-->
		<div id="container" class="tete">
		<h1 class="chap1">Projet 2</h1>
			<h2 class="chap1-2 souschap">/ iconographies<span class="minus"> ×</span></h2>
      <h3 class="chap1-3 souschap">/ description<span class="minus"> ×</span></h3>
			<h4 class="chap1-4 souschap">/ référence<span class="minus"> ×</span></h4>
			<h5 class="chap1-4 souschap">/ source<span class="minus"> ×</span></h5>
			<span class="plus">+</span>
      <br/>
      
      <!--Contenu Projet 2-->
      <img class="iconographie" src=" https://pbs.twimg.com/profile_images/1189974683/z-0008.gif" alt="" />
      <p class="description">Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis.</p>
		<a href="#" class="lien">Référence</a>
    <p class="source">
   Quam quidem partem accusationis admiratus et moleste tuli potissimum esse Atratino datam.</p>
		</div>

CSS

body {
    margin:1%;
    padding:0;
}
#container{
	display:table;
	float:left;
	padding:0% 1% 0 1%;
  width:100%;
  margin-bottom:1%;
}
h1, h2, h3, h4, h5, h6{
	display:table-cell;
	float:left;
	margin:0 1% 0 0;
  font-size:15px;
  font-weight:500;
  font-family: Arial;
}
h2, h3, h4, h5, h6{
  display:none;
	background:lightgrey;
	padding-right:1%;
 }
.plus {
	color:Blue;
	font-weight:900;
	cursor:pointer;
	border-left: 1px solid RoyalBlue;
	padding-left:1%;
}
.minus {
	color:red;
	font-weight:900;
	cursor:pointer;
}
.souschap{
  display:none;
}
.visible{
   display:inline!important;
}

.invisible{
  display:none!important;
}
/*
.iconographie, .description, .lien, .source{
  display:none;
  }
  */

JavaScript

$(document).ready(function(){
	
		// Au clic sur le plus
    $(".plus").click(function(){
    		//On recupère les sous chapitres associés au projet
    		var $sousChap = $(this).parent('.tete').find('.souschap');
        var sousChapNb = $sousChap.length;
        var $plus = $(this).parent('.tete').find('.plus');
     
        //On verifie quel sous chap afficher et afficher si necessaire 
        var isVisible = 0;
      	$sousChap.each(function(i,$el){
      	var $this = $(this);
        
     	 //tant qu'aucun sous chap n'a ete affiche
       if(isVisible == 0){
        	if(! $this.hasClass('visible') ){
				  	$this.addClass('visible');
          	isVisible = 1;
            
            // si c'est le dernier on cache le plus
        if( i>= (sousChapNb-1) )
        	$plus.addClass('invisible');
          }
        } 
      }) 
    });
    
    
    $('.souschap').click(function(){
    	//on cache le sous chap
    	$(this).removeClass('visible');
      //on rend le plus visible
      $('.plus').removeClass('invisible');
    });
 
});