JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="content">
        <ul id="menu">
            <li>
                <div class="accordeon">
                <h2>Contenu 1</h2> <span></span>
                </div>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum labore quos in mollitia praesentium, recusandae alias voluptatibus ratione dolorum laudantium maiores! Atque eligendi velit libero veniam ut dolor ullam at obcaecati ipsa labore. Magnam voluptatum excepturi et corporis, nobis fuga enim sint repellendus! Maxime fugit tenetur, error reiciendis sit dolorum ullam alias aperiam debitis ipsa, qui quas at, consequatur quos sapiente odio nobis rerum. Quae, dolores ut! Quibusdam blanditiis odit quod quidem maxime commodi libero quis dicta ratione, reiciendis maiores ullam fugit laborum! Eveniet tenetur, fugit dicta aspernatur harum maxime nulla laudantium asperiores unde, consequatur excepturi!</p>
            </li>
                
            <li>
                <div class="accordeon">
                <h2>Contenu 2</h2> <span></span>
                </div>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum labore quos in mollitia praesentium, recusandae alias voluptatibus ratione dolorum laudantium maiores! Atque eligendi velit libero veniam ut dolor ullam at obcaecati ipsa labore. Magnam voluptatum excepturi et corporis, nobis fuga enim sint repellendus! Maxime fugit tenetur, error reiciendis sit dolorum ullam alias aperiam debitis ipsa, qui quas at, consequatur quos sapiente odio nobis rerum. Quae, dolores ut! Quibusdam blanditiis odit quod quidem maxime commodi libero quis dicta ratione, reiciendis maiores ullam fugit laborum! Eveniet tenetur, fugit dicta aspernatur harum maxime nulla laudantium asperiores unde, consequatur excepturi!</p>
            </li>  

            <li>
                <div class="accordeon">
                <h2>Contenu...

SCSS

*{ 
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background: #f1f1f1;
    display: flex;
    min-height: 100%;
    align-items: center;
    justify-content: center;
}

#content{
    max-width: 400px;
    padding: 20px;
}

#menu{
    width: 400px;
}

#menu >li{
    width: 100%;
    border-bottom: 2px solid blueviolet;
    padding: 10px 0;
    list-style: none;
}

.accordeon{
    padding: 5px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
} 

#menu li h2{
    font:italic bold 20px "times new roman", serif;
}

#menu li p{
    font: 11px "calibri", sans-serif;
    padding: 0 6px;
    display: none;
}



#menu li span{
    width: 28px;
    height: 28px;
    text-align: center;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 30px;
    position: relative;
    
    &:after {
      content: '+';
      display: inline-block;
    }
} 

#menu li.active span {
  &:after {
    content: '-';
  }
}

JavaScript

console.clear();

$(document).ready(function() {
	$('#menu > li').on('click', function(){
  	var active = $(this);
    $('#menu li').not(active).find('p').slideUp();
    $('#menu li').not(active).removeClass('active');
    active.toggleClass('active');
    active.find('p').slideToggle();
  })
});