Is it possible to make the list drop-down and the show all / hide button only with css?

 ul li{ list-style-type: none; } a{ text-decoration: none; color: #464646; } body{ background:#fff; } .catalog_item:hover{ box-shadow: 0 0 10px rgba(0,0,0,0.5); cursor: pointer; border-color: transparent } .catalog_item{ height: 406px; width: 266px; float: left; border: 2px solid #6d87b4; margin: 50px 30px 0 0; position: relative; } .catalog_item>div{ margin: 18px 0 0 23px; } .catalog_item>p{ font: 20px RobotoBold; background: #fff; position: absolute; top: -11px; left: 23px; width: 220px; text-align: center; } .catalog_item div>ul{ margin-top: 20px; height: 130px; overflow: hidden; } .catalog_item div ul li{ clear: both; } .open_list:active .catalog_item div>ul>ul, .open_list:focus .catalog_item div>ul>ul, .open_list:visited .catalog_item div>ul>ul{ overflow: visible !important; max-height: auto; } .catalog_item ul ul{ margin-left: 30px; display: none; } .catalog_item ul ul li{ list-style-type: disc; color: #f7cac9; } .catalog_item div>ul>li:hover>a{ color: #f7cac9; } .catalog_item div>ul>li:hover:before{ color: #f7cac9; } .catalog_item div>ul>li:before { content: "—"; position: relative; color: #6d87b4; } .catalog_item div>ul>li>a{ margin-left: 8px; font-size: 14px; } .catalog_item .open_list{ text-decoration: underline; color: #6d87b4; } #trigger {display: none} label {cursor: pointer;} .hide--list {display: none} #trigger:checked + .catalog_item {height: auto;} #trigger:checked + .catalog_item > div > ul {height: auto} #trigger:checked + .catalog_item .hide--list {display: block;} #trigger:checked + .catalog_item .show--list {display: none} 

 <div class="wrapper"> <input id="trigger" type="checkbox"> <div class="catalog_item"> <p>Мебель для спальни</p> <div> <img src="http://billsupholsterynj.com/communities/5/000/001/766/635//images/9638816.png" alt""/> <ul> <li><a href="">Кровати</a> <ul> <li><a href="">Двухъярусные</a></li> <li><a href="">Деревянные</a></li> <li><a href="">Из ДСП</a></li> <li><a href="">Из МДФ</a></li> <li><a href="">Металлические</a></li> <li><a href="">Подиумные</a></li> </ul> </li> <li><a href="">Матрасы</a> <ul> <li><a href="">Безпружинные</a></li> <li><a href="">Пружинные</a></li> <li><a href="">Наматрасники</a></li> <li><a href="">Топперы</a></li> <li><a href="">Футоны</a></li> </ul> </li> <li><a href="">Комоды</a></li> <li><a href="">Подушки</a></li> <li><a href="">Покрывала</a></li> <li><a href="">Полки</a></li> <li><a href="">Постельное белье</a></li> <li><a href="">Раскладушки</a></li> <li><a href="">Спальни</a></li> <li><a href="">Трюмо и туалетные столы</a></li> <li><a href="">Тумбы</a></li> <li><a href="">Тумбы прикроватные</a></li> <li><a href="">Шкафы распашные</a></li> <li><a href="">Шкафы-купе</a></li> </ul> <div class="clear"></div> <label for="trigger" class="open_list"> <span class="show--list">Показать все</span> <span class="hide--list">Скрыть</span> </label> </div> </div> </div>