JSFiddle - React, Tailwind, and code Playground

HTML

<div id="accordeon">
    <div class="encart" id="current">
        <div class="accordeon-box"></div>
        <div class="titre-presentation"></div>
        <div class="texte-presentation">
            <ul>
                <li><a id="a_decouverte" href="#">DĂ©couverte</a></li>
            </ul>
        </div>
    </div>
    <div class="encart" id="decouverte">
        <div class="accordeon-box"></div>
        <div class="titre-presentation"></div>
        <div class="texte-presentation"></div>
    </div>
    <div class="encart" id="crescendo">
        <div class="accordeon-box"></div>
        <div class="titre-presentation"></div>
        <div class="texte-presentation"></div>
    </div>
    <div class="encart" id="intensif">
        <div class="accordeon-box"></div>
        <div class="titre-presentation"></div>
        <div class="texte-presentation"></div>
    </div>
    <div class="encart" id="iplaynotes">
        <div class="accordeon-box"></div>
        <div class="titre-presentation"></div>
        <div class="texte-presentation"></div>
    </div>
</div>

CSS

#accordeon {
	width:900px;
	margin:auto auto;
}
#accordeon .encart {
	float: left;
	padding:0px;
	margin-right: 0px;
	border:1px solid black;
	display: block;
	overflow: hidden;
	height: 430px;
	width: 46px;
	outline: none;
	cursor: pointer;
}
#accordeon #current {
	width: 650px;
	background-color:transparent;
}
#accordeon .titre-presentation h1 {
	margin: -50px;
	padding: 0;
	width: 600px;
	line-height:50px;
	display: block;
	margin-left: 70px;
	margin-bottom: 38px;
	color:darkorange;
	font-size:16px;
}
#accordeon .texte-presentation {
	margin: -25px;
	line-height:17px;
	padding: 0;
	width: 600px;
	display: block;
	margin-left: 50px;
	color:white;
	font-size:12px;
}
#accordeon p {
	margin-bottom:20px;
}
#accordeon .texte-presentation a {
	text-decoration:none;
	background-color:transparent;
}
#accordeon .texte-presentation a:hover {
	text-decoration:none;
	color:#F90;
}
#accordeon .texte-presentation h2 {
	color:#FF9900;
	font-size:12px;
	margin-left:20px;
}
#accordeon .texte-presentation a:hover {
	text-decoration:none;
	font-weight:bold;
	background-color:transparent;
}
.accordeon-box {
	width:430px;
	height:50px;
	font-size:20px;
	position:relative;
	bottom:-190px;
	left:-188px;
	color:#F2F2F2;
	display:block;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordeon-box:hover {
	background-color:#F30;
	opacity:0.2;
}

JavaScript

$(document).ready(function () {
    var current = $("#current");
    var taille_max = 650; //max width
    var taille_min = 46; //min width
    $("#accordeon .encart").click(function () {
        $(current).animate({
            width: taille_min
        }, {
            queue: false,
            duration: 400
        });
        $(this).animate({
            width: taille_max
        }, {
            queue: false,
            duration: 400
        });
        current = this;
    });
});

$(document).ready(function () {
    var current = $("#current");
    var taille_max = 650; //max width
    var taille_min = 46; //min width
    $("#a_decouverte").click(function () {
        $(current).animate({
            width: taille_min
        }, {
            queue: false,
            duration: 400
        });
        $("#decouverte").animate({
            width: taille_max
        }, {
            queue: false,
            duration: 400
        });
    });
});