JSFiddle - React, Tailwind, and code Playground

HTML

<section class="big">
            <ul>
            	<li><img src="images/btn-droite.png" alt="test" width="25" /> <hr/>
                    <p>blabla</p>
                </li>
                <li><img src="images/btn-droite.png" alt="test" width="25" /> <hr/>
                    <p>blabla</p>
                </li>
            </ul>

            <div id="photo">
                <div id="cache">
                
                </div>
            </div>
</section>
<div class="nbHr"></div>

CSS

.big li p {
    display: none;
}
.nbHr {
    background-color: #0f0;
}

#cache {
    background: #000;
    width: 50px;
    height: 250px;
}

JavaScript

var nbePara;
$('.big li').click(function(){		
    var $iImg = $(this).find('img');
    var $iHr = $(this).find('hr');
    var $iTexte = $(this).find('p');
    $iImg.add($iHr).addClass('ml285').animate({
        marginLeft: "285px",
    }, 1000)
    $($iTexte).show(1000);
    
    nbePara = $('hr.ml285').length;
    $('.nbHr').html(nbePara);
    if ($nbePara == 1) {
			$('#cache').css({'height':'200px'});	
	} else if ($nbePara == 2) {
			$('#cache').css({'height':'100px'});	
	} else {
			$('#cache').css({'height':'50px'});
	};
});