Agrandir ou diminuer des éléments au clic

Agrandir ou deminuer des div au clic

See the Pen jquery css by yuyazz (@yuyazz) on CodePen.

en jouant avec la fonction .css en jQuery on va pouvoir en un rien de temps créer un effet sympa sur nos éléments.

Le code html est vraiment basique, il y a ici juste deux blocs.

 <div id="wrapper">
            <div id="moins">
                <p>mon texte</p>
            </div>
            <div id="plus">
                <p>mon texte</p>
            </div>
        </div>

Le jQuery est aussi relativement simple :


        <script>
            $(document).ready(function() {
                $('#moins').click(function() {
                    $('#moins').css('width', '-=100px');
                });
                $('#plus').click(function() {
                    $('#plus').css('width', '+=100px');
                });
            });
        </script>

Au clic sur la div à l’id ‘#moins’ on affecte son css en lui retirant 100px, et inversement pour la div ‘#plus’.

Mis à jour le Par Copier coller | Dans jQuery