JSFiddle - React, Tailwind, and code Playground

by Super_baloo8

HTML

<div id="resalers-area">
    	<h3><label title="" class="hasTip" for="jform_revendeurs" id="jform_revendeurs-lbl">Revendeurs</label></h3>

    <input type="text" class="inputbox" value="" id="jform_revendeurs" name="jform[revendeurs]"
    /> <a title="Afficher la Liste des Revendeurs" href="#hideshow">Afficher la Liste des Revendeurs</a>

    <div
    id="resalers-block">
        <ul class="left">
            <li class="resale-checkbox">
                <input type="checkbox" value="1" /><span>Etam</span>

            </li>
            <li class="resale-checkbox">
                <input type="checkbox" value="3" /><span>Revendeur 3</span>

            </li>
        </ul>
        <ul class="right">
            <li class="resale-checkbox">
                <input type="checkbox" value="2" /><span>PRINTEMPS HAUSSMANN</span>

            </li>
        </ul>
</div>
</div>

CSS

div#resalers-block {
    width: 50%;
}
li.resale-checkbox {
    display: block;
    margin: auto;
    padding-right: 1.5em;
    width: 100%;
}
li.resale-checkbox input {
    margin: 0;
}
li.resale-checkbox span {
    margin-left: 10%;
}
input#jform_revendeurs, #resalers-block {
    display: none;
}

JavaScript

var resalers_block = $('#resalers-block'),
    text_hide = 'Masquer la Liste des Revendeurs',
    text_show = 'Afficher la Liste des Revendeurs';

$('#resalers-area').on('click', 'a', function () {
    if (resalers_block.is(':hidden')) {
        resalers_block.show();
        $(this).text(text_hide).prop('title', text_show);
    } else {
        resalers_block.hide();
        $(this).text(text_show).prop('title', text_hide);
    }
});