Можно ли создать такой список с помощью bootstrap? Если да, то подскажите пример. Если нет, то подскажите как без bootstrap. Чем проще, тем лучше.
-
bootstrap - это всего то немного html классов, css и js красоты.– Segrei UlanovCommented 28 мая 2018 в 19:26
-
а скролл обязателен?– RandallCommented 28 мая 2018 в 20:12
-
@Избытоксусликов Да)– Rafael ShepardCommented 28 мая 2018 в 20:13
-
@RafaelShepard, можно и без Bootstrap. ru.stackoverflow.com/q/824239/280567– ArthurCommented 28 мая 2018 в 20:25
-
Возможный дубликат вопроса: Смена узла при раскрытии дерева– ArthurCommented 28 мая 2018 в 20:26
4 ответа
Очень давно делал такую штуку для одного туристического сайта.
И вот их код опять пригодилось.
Тут есть лишный 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>
По-моему оптимальное и простое решение ^_^ :
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
Если нужно на Bootstrap, то есть готовые части кода, называются сниппеты. Вот две ссылки на два похожих, как в примере сниппета списка на Bootstrap(там анимации ещё,и стилизация, но её можно спокойно убрать,внизу код можно выполнить прямо на странице), если поискать, то можно найти больше, и помимо Bootstrap есть еще хорошие фреймворки Materialize, Foundation, Semantic ui и тд. В них тоже часто можно найти хорошие сниппеты.
-
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>
Чекбоксы, разумеется, обстилить чтобы были похожи на плюсики-минусики.