JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>Montrer / Cacher</title>
</head>
<body>
<div id="tohide1">Coucou</div>
<input type="button" id="bouton1" value = "Plus 1" />
<div id="tohide2">la</div>
<input type="button" id="bouton2" value = "Plus 2" />
<div id="tohide3">team</div>
<input type="button" id="bouton3" value = "Plus 3" />
<div id="tohide4">développez!</div>
<input type="button" id="bouton4" value = "Plus 4" />
</body>
</html>
CSS
div { display: none; height: 50px; }
JavaScript
function performDisplay(id) {
$("#tohide" + id).toggle("slide");
$("#bouton" + id).val(($('#bouton' + id).val() == 'Plus '+id ? 'Moins ' : 'Plus ') + id);
}
function makeDisplayCallback(id) {
return function() {
performDisplay(id);
};
}
$(document).ready(function() {
for (var i=1; i<5; i++) {
$("#bouton" + i).click(makeDisplayCallback(i));
}
});