<fieldset id="brands">
  <div class="header">
        Нажми меня
    </div>
  <div class="brands-wrapper">
    <label for="brands_0" class="">
        <input type="checkbox" name="brands" id="brands_0" value="Acura"  />
        <span>Acura</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_1" class="">
        <input type="checkbox" name="brands" id="brands_1" value="AlfaRomeo"  />
        <span>AlfaRomeo</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_2" class="">
        <input type="checkbox" name="brands" id="brands_2" value="Audi"  />
        <span>Audi</span>&nbsp;<sup>35</sup>
    </label>
    <label for="brands_3" class="">
        <input type="checkbox" name="brands" id="brands_3" value="Bentley"  />
        <span>Bentley</span>&nbsp;<sup>34</sup>
    </label>
    <label for="brands_4" class="">
        <input type="checkbox" name="brands" id="brands_4" value="BMW"  />
        <span>BMW</span>&nbsp;<sup>33</sup>
    </label>
    <label for="brands_5" class="">
        <input type="checkbox" name="brands" id="brands_5" value="Brilliance"  />
        <span>Brilliance</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_6" class="">
        <input type="checkbox" name="brands" id="brands_6" value="Buick"  />
        <span>Buick</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_7" class="">
        <input type="checkbox" name="brands" id="brands_7" value="BYD"  />
        <span>BYD</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_8" class="">
        <input type="checkbox" name="brands" id="brands_8" value="Cadillac"  />
        <span>Cadillac</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_9" class="">
        <input type="checkbox" name="brands" id="brands_9" value="Changan"  />
        <span>Changan</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_10" class="">
        <input type="checkbox" name="brands" id="brands_10" value="Chery"  />
        <span>Chery</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_11" class="">
        <input type="checkbox" name="brands" id="brands_11" value="Chevrolet"  />
        <span>Chevrolet</span>&nbsp;<sup>32</sup>
    </label>
    <label for="brands_12" class="">
        <input type="checkbox" name="brands" id="brands_12" value="Chrysler"  />
        <span>Chrysler</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_13" class="">
        <input type="checkbox" name="brands" id="brands_13" value="Citroen"  />
        <span>Citroen</span>&nbsp;<sup>32</sup>
    </label>
    <label for="brands_14" class="">
        <input type="checkbox" name="brands" id="brands_14" value="Dacia"  />
        <span>Dacia</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_15" class="">
        <input type="checkbox" name="brands" id="brands_15" value="Daewoo"  />
        <span>Daewoo</span>&nbsp;<sup>32</sup>
    </label>
    <label for="brands_16" class="">
        <input type="checkbox" name="brands" id="brands_16" value="DAF"  />
        <span>DAF</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_17" class="">
        <input type="checkbox" name="brands" id="brands_17" value="Daihatsu"  />
        <span>Daihatsu</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_18" class="">
        <input type="checkbox" name="brands" id="brands_18" value="Datsun"  />
        <span>Datsun</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_19" class="">
        <input type="checkbox" name="brands" id="brands_19" value="Dodge"  />
        <span>Dodge</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_20" class="">
        <input type="checkbox" name="brands" id="brands_20" value="DongFeng"  />
        <span>DongFeng</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_21" class="">
        <input type="checkbox" name="brands" id="brands_21" value="Eagle"  />
        <span>Eagle</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_22" class="">
        <input type="checkbox" name="brands" id="brands_22" value="FAW"  />
        <span>FAW</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_23" class="">
        <input type="checkbox" name="brands" id="brands_23" value="Ferrari"  />
        <span>Ferrari</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_24" class="">
        <input type="checkbox" name="brands" id="brands_24" value="FIAT"  />
        <span>FIAT</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_25" class="">
        <input type="checkbox" name="brands" id="brands_25" value="Ford"  />
        <span>Ford</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_26" class="">
        <input type="checkbox" name="brands" id="brands_26" value="Foton"  />
        <span>Foton</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_27" class="">
        <input type="checkbox" name="brands" id="brands_27" value="Geely"  />
        <span>Geely</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_28" class="">
        <input type="checkbox" name="brands" id="brands_28" value="GMC"  />
        <span>GMC</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_29" class="">
        <input type="checkbox" name="brands" id="brands_29" value="GreatWall"  />
        <span>GreatWall</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_30" class="">
        <input type="checkbox" name="brands" id="brands_30" value="Honda"  />
        <span>Honda</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_31" class="">
        <input type="checkbox" name="brands" id="brands_31" value="Hover"  />
        <span>Hover</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_32" class="">
        <input type="checkbox" name="brands" id="brands_32" value="HOWO"  />
        <span>HOWO</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_33" class="">
        <input type="checkbox" name="brands" id="brands_33" value="Hummer"  />
        <span>Hummer</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_34" class="">
        <input type="checkbox" name="brands" id="brands_34" value="Hyundai"  />
        <span>Hyundai</span>&nbsp;<sup>32</sup>
    </label>
    <label for="brands_35" class="">
        <input type="checkbox" name="brands" id="brands_35" value="Infiniti"  />
        <span>Infiniti</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_36" class="">
        <input type="checkbox" name="brands" id="brands_36" value="ISUZU"  />
        <span>ISUZU</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_37" class="">
        <input type="checkbox" name="brands" id="brands_37" value="Iveco"  />
        <span>Iveco</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_38" class="">
        <input type="checkbox" name="brands" id="brands_38" value="Jaguar"  />
        <span>Jaguar</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_39" class="">
        <input type="checkbox" name="brands" id="brands_39" value="Jeep"  />
        <span>Jeep</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_40" class="">
        <input type="checkbox" name="brands" id="brands_40" value="Kia"  />
        <span>Kia</span>&nbsp;<sup>32</sup>
    </label>
    <label for="brands_41" class="">
        <input type="checkbox" name="brands" id="brands_41" value="Lancia"  />
        <span>Lancia</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_42" class="">
        <input type="checkbox" name="brands" id="brands_42" value="LandRover"  />
        <span>LandRover</span>&nbsp;<sup>32</sup>
    </label>
    <label for="brands_43" class="">
        <input type="checkbox" name="brands" id="brands_43" value="Lexus"  />
        <span>Lexus</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_44" class="">
        <input type="checkbox" name="brands" id="brands_44" value="Lifan"  />
        <span>Lifan</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_45" class="">
        <input type="checkbox" name="brands" id="brands_45" value="Lincoln"  />
        <span>Lincoln</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_46" class="">
        <input type="checkbox" name="brands" id="brands_46" value="MAN"  />
        <span>MAN</span>&nbsp;<sup>32</sup>
    </label>
    <label for="brands_47" class="">
        <input type="checkbox" name="brands" id="brands_47" value="Mazda"  />
        <span>Mazda</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_48" class="">
        <input type="checkbox" name="brands" id="brands_48" value="Mercedes-Benz"  />
        <span>Mercedes-Benz</span>&nbsp;<sup>33</sup>
    </label>
    <label for="brands_49" class="">
        <input type="checkbox" name="brands" id="brands_49" value="Mercury"  />
        <span>Mercury</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_50" class="">
        <input type="checkbox" name="brands" id="brands_50" value="MG"  />
        <span>MG</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_51" class="">
        <input type="checkbox" name="brands" id="brands_51" value="MINI"  />
        <span>MINI</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_52" class="">
        <input type="checkbox" name="brands" id="brands_52" value="Mitsubishi"  />
        <span>Mitsubishi</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_53" class="">
        <input type="checkbox" name="brands" id="brands_53" value="Neoplan"  />
        <span>Neoplan</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_54" class="">
        <input type="checkbox" name="brands" id="brands_54" value="Nissan"  />
        <span>Nissan</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_55" class="">
        <input type="checkbox" name="brands" id="brands_55" value="Oldsmobile"  />
        <span>Oldsmobile</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_56" class="">
        <input type="checkbox" name="brands" id="brands_56" value="Opel"  />
        <span>Opel</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_57" class="">
        <input type="checkbox" name="brands" id="brands_57" value="Peugeot"  />
        <span>Peugeot</span>&nbsp;<sup>32</sup>
    </label>
    <label for="brands_58" class="">
        <input type="checkbox" name="brands" id="brands_58" value="Plymouth"  />
        <span>Plymouth</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_59" class="">
        <input type="checkbox" name="brands" id="brands_59" value="Pontiac"  />
        <span>Pontiac</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_60" class="">
        <input type="checkbox" name="brands" id="brands_60" value="Porsche"  />
        <span>Porsche</span>&nbsp;<sup>35</sup>
    </label>
    <label for="brands_61" class="">
        <input type="checkbox" name="brands" id="brands_61" value="RAM"  />
        <span>RAM</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_62" class="">
        <input type="checkbox" name="brands" id="brands_62" value="RANGEROVER"  />
        <span>RANGEROVER</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_63" class="">
        <input type="checkbox" name="brands" id="brands_63" value="Ravon"  />
        <span>Ravon</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_64" class="">
        <input type="checkbox" name="brands" id="brands_64" value="Renault"  />
        <span>Renault</span>&nbsp;<sup>32</sup>
    </label>
    <label for="brands_65" class="">
        <input type="checkbox" name="brands" id="brands_65" value="Rolls-Royce"  />
        <span>Rolls-Royce</span>&nbsp;<sup>34</sup>
    </label>
    <label for="brands_66" class="">
        <input type="checkbox" name="brands" id="brands_66" value="Rover"  />
        <span>Rover</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_67" class="">
        <input type="checkbox" name="brands" id="brands_67" value="Saab"  />
        <span>Saab</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_68" class="">
        <input type="checkbox" name="brands" id="brands_68" value="Samand"  />
        <span>Samand</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_69" class="">
        <input type="checkbox" name="brands" id="brands_69" value="Saturn"  />
        <span>Saturn</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_70" class="">
        <input type="checkbox" name="brands" id="brands_70" value="Scania"  />
        <span>Scania</span>&nbsp;<sup>32</sup>
    </label>
    <label for="brands_71" class="">
        <input type="checkbox" name="brands" id="brands_71" value="SEAT"  />
        <span>SEAT</span>&nbsp;<sup>34</sup>
    </label>
    <label for="brands_72" class="">
        <input type="checkbox" name="brands" id="brands_72" value="SHAANXI"  />
        <span>SHAANXI</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_73" class="">
        <input type="checkbox" name="brands" id="brands_73" value="SHACMAN"  />
        <span>SHACMAN</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_74" class="">
        <input type="checkbox" name="brands" id="brands_74" value="Skoda"  />
        <span>Skoda</span>&nbsp;<sup>34</sup>
    </label>
    <label for="brands_75" class="">
        <input type="checkbox" name="brands" id="brands_75" value="Smart"  />
        <span>Smart</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_76" class="">
        <input type="checkbox" name="brands" id="brands_76" value="SsangYong"  />
        <span>SsangYong</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_77" class="">
        <input type="checkbox" name="brands" id="brands_77" value="Subaru"  />
        <span>Subaru</span>&nbsp;<sup>32</sup>
    </label>
    <label for="brands_78" class="">
        <input type="checkbox" name="brands" id="brands_78" value="Suzuki"  />
        <span>Suzuki</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_79" class="">
        <input type="checkbox" name="brands" id="brands_79" value="Toyota"  />
        <span>Toyota</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_80" class="">
        <input type="checkbox" name="brands" id="brands_80" value="Volkswagen"  />
        <span>Volkswagen</span>&nbsp;<sup>35</sup>
    </label>
    <label for="brands_81" class="">
        <input type="checkbox" name="brands" id="brands_81" value="Volvo"  />
        <span>Volvo</span>&nbsp;<sup>33</sup>
    </label>
    <label for="brands_82" class="">
        <input type="checkbox" name="brands" id="brands_82" value="WAG"  />
        <span>WAG</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_83" class="">
        <input type="checkbox" name="brands" id="brands_83" value="Yamaha"  />
        <span>Yamaha</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_84" class="">
        <input type="checkbox" name="brands" id="brands_84" value="ВАЗ"  />
        <span>ВАЗ</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_85" class="">
        <input type="checkbox" name="brands" id="brands_85" value="ГАЗ"  />
        <span>ГАЗ</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_86" class="">
        <input type="checkbox" name="brands" id="brands_86" value="ЗАЗ"  />
        <span>ЗАЗ</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_87" class="">
        <input type="checkbox" name="brands" id="brands_87" value="ЗИЛ"  />
        <span>ЗИЛ</span>&nbsp;<sup>29</sup>
    </label>
    <label for="brands_88" class="">
        <input type="checkbox" name="brands" id="brands_88" value="КАМАЗ"  />
        <span>КАМАЗ</span>&nbsp;<sup>29</sup>
    </label>
    <label for="brands_89" class="">
        <input type="checkbox" name="brands" id="brands_89" value="МАЗ"  />
        <span>МАЗ</span>&nbsp;<sup>30</sup>
    </label>
    <label for="brands_90" class="">
        <input type="checkbox" name="brands" id="brands_90" value="Москвич"  />
        <span>Москвич</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_91" class="">
        <input type="checkbox" name="brands" id="brands_91" value="ПАЗ"  />
        <span>ПАЗ</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_92" class="">
        <input type="checkbox" name="brands" id="brands_92" value="ТагАЗ"  />
        <span>ТагАЗ</span>&nbsp;<sup>29</sup>
    </label>
    <label for="brands_93" class="">
        <input type="checkbox" name="brands" id="brands_93" value="УАЗ"  />
        <span>УАЗ</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_94" class="">
        <input type="checkbox" name="brands" id="brands_94" value="Урал"  />
        <span>Урал</span>&nbsp;<sup>29</sup>
    </label>
</div>
</fieldset>
/* *, *::before, *::after { border:1px solid red; box-sizing:border-box; } */

body {
    font-family: sans-serif;
}
.brands-wrapper {
    /* transform: scale(0); */
    display: none;
}
.header {
    text-align: center;
}
fieldset.active .brands-wrapper {
    /* transform: scale(1); */
    display: block;
}
#brands {
    display: inline-block;
}
$('.header').click(function () {
  $('fieldset').toggleClass('active');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js