1

Список

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

5

4 ответа 4

5

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

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

Тут есть лишный 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>

1
  • Хорошо! Спасибо) 29 мая 2018 в 7:23
3

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

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-овских штучек)

1
  • 1
    Отличный вариант! Спасибо 29 мая 2018 в 7:23
2

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

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

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

1
  • 1
    Спасибо большое! 29 мая 2018 в 7:23
1

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

Стиля:

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>

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.