JSFiddle - React, Tailwind, and code Playground

HTML

<div class='clearfix'>
                <label for='adresGelijk'>Optie:</label>
                <div class='input'>
                    <ul class="inputs-list">
                        <li>
                            <label><input type='checkbox' name='adresGelijk' id='adresGelijk'> <span><em>Factuur</em> adres is <strong>niet</strong> gelijk aan <em>bezorg</em> adres.</span></label>
                        </li>
                    </ul>
                </div>
            </div>

<!-- Bezorg address -->
        <fieldset id='Bzorgaddr' style='overflow:hidden;height:0px;padding-top:0px;margin-bottom:0px;'>
            <legend>Bezorg adress</legend>
            <div class='clearfix'>
                <label for='bezorg-straat'>Straat / huisnummer:</label>
                <div class='input'>
                    <input id='bezorg-straat' name='bezorg-straat' placeholder='straat naam'>
                    <input id='bezorg-huisnummer' name='bezorg-huisnummer' placeholder='nummer' class='mini'>
                </div>
            </div>
            <div class='clearfix'>
                <label for='bezorg-postcode'>Postcode:</label>
                <div class='input'>
                    <input id='bezorg-postcode' name='bezorg-postcode' placeholder='1234' class='small'>
                </div>
            </div>
            <div class='clearfix'>
                <label for='bezorg-land'>Land:</label>
                <div class='input'>
                    <select name='bezorg-land' id='bezorg-land'>
                        <option value="AF">Afghanistan</option>
                        <option value="AL">Albani&euml;</option>
                        <option value="DZ">Algerij&euml;</option>
                        <option value="AS">Amerikaans Samoa</option>
                        <option value="AD">Andorra</option>
                        <option value="AO">Angola</option>
                        <option value="AI">Anguilla</option>
                        <option...

JavaScript

// zorgt voor het uitklappen van de Bezorg gegevens
        $(document).ready(function(){
            $('#adresGelijk').change(function(){
                // hoogte van de colom
                var $height = 157;
                
                var $windowposition = $(window).scrollTop();
                // id van het field
                var $Bzorgaddr = $('#Bzorgaddr');
                
                // Als het de eerste keer is klap uit
                if(!$Bzorgaddr.hasClass('buzzy') && !$Bzorgaddr.hasClass('hidden-buzzy')){
                    $Bzorgaddr.addClass('buzzy');
                    $Bzorgaddr.stop().animate({ 'height' : $height, 'padding-top' : 18, 'margin-bottom' : 18});
                    $('html, body').stop().animate({scrollTop: $windowposition+$height+18});
                }
                // als die ingeklapt is klap in
                else if($Bzorgaddr.hasClass('hidden-buzzy')){
                    $Bzorgaddr.removeClass('hidden-buzzy');
                    $Bzorgaddr.addClass('buzzy');
                    $Bzorgaddr.stop().animate({ 'height' : $height, 'padding-top' : 18, 'margin-bottom' : 18});
                    $('html, body').stop().animate({scrollTop: $windowposition+$height+18});
                }
                // als die uitgeklapt is klap uit
                else{
                    $Bzorgaddr.removeClass('buzzy');
                    $Bzorgaddr.addClass('hidden-buzzy');
                    $Bzorgaddr.stop().animate({ 'height' : 0, 'padding-top' : 0, 'margin-bottom' : 0});
                    $('html, body').stop().animate({scrollTop: $windowposition-$height-18});
                }
            });
        });