Раскрывающийся список на css

204
15 июня 2018, 13:50

Можно ли создать такой список с помощью bootstrap? Если да, то подскажите пример. Если нет, то подскажите как без bootstrap. Чем проще, тем лучше.

Answer 1

Очень давно делал такую штуку для одного туристического сайта.

И вот их код опять пригодилось.

Тут есть лишный HTML код я думаю сами справитесь если вы владеете HTML-ом на средном уровне

Скролл появляется при клике одного плюса то есть если в него есть нужды

Реализовано на jQuery как бы я его не любил и плюс это старый код

Не сто процентно так как у вас в картинке но если потратить часок 2 то можете сделать полную копию

Удачи

$(".summary").click(function(){ 
    var acSel = '#' + $(this).attr('aria-controls'); 
 
    if ($(acSel).is(":hidden")) { 
        $(acSel).slideDown("slow"); 
    } 
    else { 
	    $(acSel).hide("slow");			 
    } 
    $(this).toggleClass("open"); 
});
body { 
  width:50%; 
} 
.tab_content { 
  overflow-y:scroll; 
  height:600px; 
} 
.is-hidden { 
	display: none; 
} 
.summary { 
	font-size: 14px; 
	padding: 14px 40px; 
	position: relative; 
	list-style-type: none; 
	margin: 0; 
	font-weight: 400; 
} 
.summary:before { 
	/*-webkit-transform: translate(-50%,-50%) rotate(0);*/ 
	transform: translate(-50%,-50%) rotate(-90deg); 
    will-change: translate,rotate; 
} 
.summary:after { 
	transform: translate(-50%,-50%); 
    will-change: translate,opacity; 
 
} 
.summary.open:before{ /* добавочный класс */ 
    transform:translate(-50%,-50%) rotate(-0deg); 
    width:0; 
} 
.summary:after, 
.summary:before { 
	content: ""; 
	width: 14px; 
	height: 2px; 
	border-radius: 2px; 
	background-color: #37454d; 
	display: block; 
	position: absolute; 
	top: 50%; 
	transition: all .2s ease-in-out; 
	opacity: 1; 
	left: 21px; 
	contain: strict; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<div id="tab2" class="tab_content"> 
  <section class="details"> 
  <h4 class="summary" role="tab" aria-expanded="false" aria-owns="hotel-facilities" aria-controls="hotel-facilities" tabindex="0">Hotel facilities</h4> 
  <div id="hotel-facilities" class="is-hidden"> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="hotel-facilities-200" class="checkbox"> 
        <span class="label">24-hour reception (4923)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="hotel-facilities-200" class="checkbox"> 
        <span class="label">24-hour room service (286)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="hotel-facilities-200" class="checkbox"> 
        <span class="label">Airport shuttle (602)</span> 
      </label> 
    </div> 
      <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="hotel-facilities-200" class="checkbox"> 
        <span class="label">Beach umbrellas (2094)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox"> 
        <span class="label">Bungalows (152)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="hotel-facilities-200" class="checkbox"> 
        <span class="label">Business center (3052)</span> 
      </label> 
    </div> 
        <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="hotel-facilities-200" class="checkbox"> 
        <span class="label">Casino (113)</span> 
      </label> 
    </div> 
    
  </div> 
</section> 
<section class="details"> 
  <h4 class="summary" role="tab" aria-expanded="false" aria-owns="lodging-type" aria-controls="lodging_type" tabindex="0">Type of lodging</h4> 
  <div id="lodging_type" class="is-hidden"> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox"  name="lodging_type-200" class="checkbox"> 
        <span class="label">Bed & Breakfast (427)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox"  name="lodging_type-200" class="checkbox"> 
        <span class="label">Camping Site (27)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox"  name="lodging_type-200" class="checkbox"> 
        <span class="label">Hostel (121)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox"  name="lodging_type-200" class="checkbox"> 
        <span class="label">Hotel (8967)</span> 
      </label> 
    </div> 
    
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox"  name="lodging_type-200" class="checkbox"> 
        <span class="label">Serviced Apartment (493)</span> 
      </label> 
    </div> 
 
  </div> 
</section> 
<section class="details"> 
  <h4 class="summary" role="tab" aria-expanded="false" aria-owns="food_and_beverages" aria-controls="food_and_beverages" tabindex="0">Food and beverages</h4> 
  <div id="food_and_beverages" class="is-hidden"> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Offers all inclusive deals (35)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Serves Halal (6)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Serves Kosher Food (6)</span> 
      </label> 
    </div> 
  </div> 
</section> 
<section class="details"> 
  <h4 class="summary" role="tab" aria-expanded="false" aria-owns="childcare" aria-controls="childcare" tabindex="0">For Children</h4> 
  <div id="childcare" class="is-hidden"> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Child / Baby cot (2651)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Childcare / Babysitting (386</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Kids' club (61)</span> 
      </label> 
    </div> 
     <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Kids' playground (317)</span> 
      </label> 
    </div> 
     <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Organized activities for kids (55)</span> 
      </label> 
    </div> 
  </div> 
</section> 
<section class="details"> 
  <h4 class="summary" role="tab" aria-expanded="false" aria-owns="wellness" aria-controls="wellness" tabindex="0">Wellness / Spa</h4> 
  <div id="wellness" class="is-hidden"> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Beauty Salon (323)</span> 
      </label> 
    </div> 
 
  
      
      <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Steam room (266)</span> 
      </label> 
    </div> 
  </div> 
</section> 
<section class="details"> 
  <h4 class="summary" role="tab" aria-expanded="false" aria-owns="aHotelSize" aria-controls="aHotelSize" tabindex="0">Number of rooms</h4> 
  <div id="aHotelSize" class="is-hidden"> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">1-50 (1318)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">51-150 (1207)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">150+ (595)</span> 
      </label> 
    </div> 
  </div> 
</section> 
<section class="details"> 
  <h4 class="summary" role="tab" aria-expanded="false" aria-owns="hotel_chain" aria-controls="hotel_chain" tabindex="0">Hotel chain</h4> 
  <div id="hotel_chain" class="is-hidden"> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">7 Days Inn (3)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">APA Hotels (2)</span> 
      </label> 
    </div> 
   
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Belmond (1)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Best Western (1)</span> 
      </label> 
    </div> <div role="treeitem" aria-selected="false"> 
 
 
   
    
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Design Hotels (2)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Doubletree (41)</span> 
      </label> 
    </div> <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Dusit (1)</span> 
      </label> 
    </div> 
 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">FairBridge Inn & Suites (2)</span> 
      </label> 
    </div> 
  </div> 
</section> 
<section class="details"> 
  <h4 class="summary" role="tab" aria-expanded="false" aria-owns="room_facilities" aria-controls="room_facilities" tabindex="0">Room facilities</h4> 
  <div id="room_facilities" class="is-hidden"> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Air conditioning (8299)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Balcony / Terrace (2995)</span> 
      </label> 
    </div> 
   
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Cable TV (6378)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Central heating (5449)</span> 
      </label> 
 
 
 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Free WiFi in the rooms (3064)</span> 
      </label> 
    </div> <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Hairdryer (8319)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Hypoallergenic bedding (127)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Ironing board (8058)</span> 
      </label> 
    </div> <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Kitchen / Kitchenette (8177)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Microwave (9994)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Refrigerator (10370)</span> 
      </label> 
    </div> <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Room safe (1085)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Satellite TV (7527)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Telephone (6629)</span> 
      </label> 
    </div> <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Television (12046)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">WiFi in the rooms (6030)</span> 
      </label> 
    </div> 
 
  </div> 
</section> 
<section class="details"> 
  <h4 class="summary" role="tab" aria-expanded="false" aria-owns="sport_facilities" aria-controls="sport_facilities" tabindex="0">Sport facilities</h4> 
  <div id="sport_facilities" class="is-hidden"> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Archery / Shooting (109)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Badminton (72)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Bike Rental (1251)</span> 
      </label> 
    </div> 
     <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Bathroom with shower (6985)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Billiards (1012)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Boats to Rent (1119)</span> 
      </label> 
    </div> <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Bowling (912)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Diving (523)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Fitness / Aerobics (1511)</span> 
      </label> 
    </div> <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Golf Course (3432)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Hiking trail (2194)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Horse riding (1028)</span> 
      </label> 
    </div> <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Indoor tennis court (8319)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Minigolf (575)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Sailing (947)</span> 
      </label> 
    </div> <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Skiing (470)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Squash (208)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Surfing (834)</span> 
      </label> 
    </div> <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Table Tennis (1085)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Tennis Court (7527)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Volleyball / Beach Volleyball (613)</span> 
      </label> 
    </div> 
  </div> 
</section> 
<section class="details"> 
  <h4 class="summary" role="tab" aria-expanded="false" aria-owns="hotel_theme" aria-controls="hotel_theme" tabindex="0">Theme / Type</h4> 
  <div id="hotel_theme" class="is-hidden"> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Airport Hotel (275)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Beachfront Hotel (542)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Boutique Hotel (509)</span> 
      </label> 
    </div> 
     <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Centrally Located Hotel (3463)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Club Hotel (91)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Convention Center Hotel (588)</span> 
      </label> 
    </div> <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Country Hotel (728)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Design Hotel (212)</span> 
      </label> 
    </div> 
    
 
  </div> 
</section> 
<section class="details"> 
  <h4 class="summary" role="tab" aria-expanded="false" aria-owns="suitable_for" aria-controls="suitable_for" tabindex="0">Suitable fore</h4> 
  <div id="suitable_for" class="is-hidden"> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Adults only (108)</span> 
      </label> 
    </div> 
    
 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Singles (655)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Winter Sports Enthuisasts (301)</span> 
      </label> 
    </div> 
 
  </div> 
</section> 
<section class="details"> 
  <h4 class="summary" role="tab" aria-expanded="false" aria-owns="accessibility" aria-controls="accessibility" tabindex="0">Accessibility</h4> 
  <div id="accessibility" class="is-hidden"> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Accessible parking (2108)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Accessible paths / corridors (1852)</span> 
      </label> 
    </div> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Deaf accessibility equipment (1046)</span> 
      </label> 
    </div> 
     <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container grouped"> 
        <input type="checkbox" name="lodging_type-200" class="checkbox"> 
        <span class="label">Wheelchair accessible (4350)</span> 
      </label> 
    </div> 
 
  </div> 
</section> 
</div>

Answer 2

По-моему оптимальное и простое решение ^_^ :

jQuery(document).ready(function() { 
	$.fn.extend({ 
	    toggleText: function(a, b){ 
	        return this.text(this.text() == b ? a : b); 
	    } 
	}); 
     
	$('.list_item > a').click(function(event) { 
		 
		$(this).children('span').toggleText('+', '-'); 
		$(this).next('.second_list').slideToggle(200); 
	}); 
	$('.second_list_item > a').click(function(event) { 
		$(this).children('span').toggleText('+', '-'); 
		$(this).next('.third_list').slideToggle(200); 
	}); 
 
 
 
});
a { 
  text-decoration: none; 
} 
.list .list_item { 
  padding: 12px 16px; 
  border-bottom: 1px solid #ccc; 
  display: flex; 
  flex-wrap: wrap; 
} 
.list .list_item a { 
  color: #000; 
  font-size: 16px; 
  font-family: sans-serif; 
  line-height: 1.5; 
  display: flex; 
  flex-wrap: wrap; 
  width: 100%; 
} 
.list .list_item span { 
  margin-right: 4px; 
  display: block; 
  width: 16px; 
  text-align: center; 
} 
.list .list_item .open .arrow_icon { 
  margin-top: -20px; 
  transform: rotate(90deg); 
} 
.list .list_item .arrow_icon { 
  margin-left: auto; 
  position: relative; 
  display: block; 
  width: 24px; 
  height: auto; 
  transition: 0.3s; 
} 
 
.list .list_item_toggler { 
  width: 100%; 
  display: none; 
  padding-left: 10px; 
  margin-top: 10px; 
  border-left: 1px solid #ccc; 
} 
.list .list_item_toggler a { 
  line-height: 32px; 
} 
 
.second_list, .third_list{ 
  display: none; 
} 
.second_list{ 
  padding-left: 20px; 
} 
.third_list{ 
  padding-left: 40px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<section class="list"> 
  <div class="list_item"> 
    <a href="javascript:void(0);"> 
      <span>+</span> 
      блюдо №1 
    </a> 
    <div class="second_list"> 
      <div class="second_list_item"> 
        <a href="#"> 
          <span>+</span> 
          Блюдо №1 
 
        </a> 
        <div class="third_list"> 
          <a href="#">Салат №1</a> 
          <a href="#">Салат №2</a> 
          <a href="#">Салат №3</a> 
        </div> 
      </div> 
      <div class="second_list_item"> 
        <a href="#"> 
          <span>+</span> 
          Блюдо №1 
 
        </a> 
        <div class="third_list"> 
          <a href="#">Салат №1</a> 
          <a href="#">Салат №2</a> 
          <a href="#">Салат №3</a> 
        </div> 
      </div> 
      <div class="second_list_item"> 
        <a href="#"> 
          <span>+</span> 
          Блюдо №1 
 
        </a> 
        <div class="third_list"> 
          <a href="#">Салат №1</a> 
          <a href="#">Салат №2</a> 
          <a href="#">Салат №3</a> 
        </div> 
      </div> 
 
    </div> 
  </div> 
  <div class="list_item"> 
    <a href="javascript:void(0);"> 
      <span>+</span> 
      блюдо №1 
    </a> 
    <div class="second_list"> 
      <div class="second_list_item"> 
        <a href="#"> 
          <span>+</span> 
          Блюдо №1 
 
        </a> 
        <div class="third_list"> 
          <a href="#">Салат №1</a> 
          <a href="#">Салат №2</a> 
          <a href="#">Салат №3</a> 
        </div> 
      </div> 
      <div class="second_list_item"> 
        <a href="#"> 
          <span>+</span> 
          Блюдо №1 
 
        </a> 
        <div class="third_list"> 
          <a href="#">Салат №1</a> 
          <a href="#">Салат №2</a> 
          <a href="#">Салат №3</a> 
        </div> 
      </div> 
      <div class="second_list_item"> 
        <a href="#"> 
          <span>+</span> 
          Блюдо №1 
 
        </a> 
        <div class="third_list"> 
          <a href="#">Салат №1</a> 
          <a href="#">Салат №2</a> 
          <a href="#">Салат №3</a> 
        </div> 
      </div> 
 
    </div> 
  </div> 
</section>

Стилизацию настроете под себя)

Без лишних bootstrap-овских штучек)

Answer 3

Если нужно на Bootstrap, то есть готовые части кода, называются сниппеты. Вот две ссылки на два похожих, как в примере сниппета списка на Bootstrap(там анимации ещё,и стилизация, но её можно спокойно убрать,внизу код можно выполнить прямо на странице), если поискать, то можно найти больше, и помимо Bootstrap есть еще хорошие фреймворки Materialize, Foundation, Semantic ui и тд. В них тоже часто можно найти хорошие сниппеты.

  1. Первая ссылка

  2. Вторая ссылка

Answer 4

А можно вообще без скриптов.

Стиля:

li {list-style-type:none;}
ul {padding-left:20px;}
input[type="checkbox"] {margin-left:-20px;}
input[type="checkbox"]:not(:checked) + ul li {display:none;}

HTML:

<ul>
    <li>
        <input type="checkbox"/> Кухня и столовая
        <ul>
            <li>Кухни</li></li>
            <li>
                <input type="checkbox"/> Столы
                <ul>
                    <li>Круглые</li>
                    <li>Синие</li>
                    <li>Гладкие</li>
                </ul>
            </li>
            <li>Буфеты</li>
            <li>Стулья</li>
            <li>Стойки</li>
        </ul>
    </li>
    <li>Спальня</li>
    <li>
        <input type="checkbox"/> Детская
        <ul>
            <li>Шкафы</li>
            <li>Воплегасители</li>
            <li>Топотопоглотители</li>
        </ul>
    </li>
    <li>Прихожая</li>
</ul>

Чекбоксы, разумеется, обстилить чтобы были похожи на плюсики-минусики.

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте hersones.com.ua
ТОП-10
READ ALSO
Выделять блок, если &ldquo;доскроллил&rdquo; до него
jQuery

Выделять блок, если “доскроллил” до него

Есть к примеру в тексте заголовки <h1> и есть справа блок, в котором создаются ссылки с названием этих заголовков

 235
Иерархия массива
jQuery

Иерархия массива

Можно ли воссоздать иерархию в массиве? К примеру такую:

 227
блоки сообщений как в вк
jQuery

блоки сообщений как в вк

я сделал такую вот небольшую ленту с двумя пользователями: html

 183
Код на jQuery не работает
jQuery

Код на jQuery не работает

В html неправильный путь к картинкеСуть в том, чтобы поменять атрибут alt через 3 секунды после загрузки

 239