Как сделать выпадающие табы со сменой контента?

Question

[olchagmk]

Доброй ночи! Не могу справится с заданием, У меня есть карта гугла, есть 7 вкладок, в соответствии с выбранной вкладкой показывает определенные метки на карте (Идут именно разные гугл карты с разными меткаи) Вкладки сделаны с помощью Бутстрап.
в целом все ОК. НО! На адаптиве вкладки должны стать выпадающим списком типа селекта вот такими:

Как это реализовать? Код оставлю ниже. Не понимаю что нужно и куда передавать что-бы все работало.

<div class="tab-wrapper">
						<p class="mobile-title">
							213213
						</p>
						<ul class="nav nav-tabs flex-column" id="myTab" role="tablist">
			                <li class="nav-item">
			                    <a class="nav-link active" id="1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="1" aria-selected="true">
			                    <img src="img/map-icon1.svg" alt="">магазины и тц</a>
			                </li>
			                <li class="nav-item">
			                    <a class="nav-link" id="2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="2" aria-selected="false"> <img src="img/map-icon2.svg" alt=""> аптеки и клиники</a>
			                </li>
			                <li class="nav-item">
			                    <a class="nav-link" id="3-tab" data-toggle="tab" href="#tab3" role="tab" aria-controls="3" aria-selected="false"> <img src="img/map-icon3.svg" alt=""> кафе и рестораны</a>
			                </li>
			                <li class="nav-item">
			                    <a class="nav-link" id="4-tab" data-toggle="tab" href="#tab4" role="tab" aria-controls="4" aria-selected="false"> <img src="img/map-icon4.svg" alt=""> банки и банкоматы</a>
			                </li>
			                <li class="nav-item">
			                    <a class="nav-link" id="5-tab" data-toggle="tab" href="#tab5" role="tab" aria-controls="5" aria-selected="false"> <img src="img/map-icon5.svg" alt=""> остановки</a>
			                </li>
			                <li class="nav-item">
			                    <a class="nav-link" id="6-tab" data-toggle="tab" href="#tab6" role="tab" aria-controls="6" aria-selected="false"> <img src="img/map-icon6.svg" alt=""> детский досуг</a>
			                </li>
			                <li class="nav-item">
			                    <a class="nav-link" id="7-tab" data-toggle="tab" href="#tab7" role="tab" aria-controls="7" aria-selected="false"><img src="img/map-icon7.svg" alt=""> учебные заведения</a>
			                </li>
			            </ul>
					</div>
		            <div class="tab-content" id="nav-tabContent">
		                <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="1-tab">
		                    <div id="map1" style="width: 100%; max-width: 729px; height: 461px;"></div>
		                </div>
		                <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="2-tab">
		                    <div id="map2" style="width: 100%; max-width: 729px; height: 461px;"></div>
		                </div>
		                <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="3-tab">
		                   <div id="map3" style="width: 100%; max-width: 729px; height: 461px;"></div>
		                </div>
		                <div class="tab-pane fade" id="tab4" role="tabpanel" aria-labelledby="4-tab">
		                    <div id="map4" style="width: 100%; max-width: 729px; height: 461px;"></div>
		                </div>
		                <div class="tab-pane fade" id="tab5" role="tabpanel" aria-labelledby="5-tab">
		                    <div id="map5" style="width: 100%; max-width: 729px; height: 461px;"></div>
		                </div>
		                <div class="tab-pane fade" id="tab6" role="tabpanel" aria-labelledby="6">
		                    <div id="map6" style="width: 100%; max-width: 729px; height: 461px;"></div>
		                </div>
		                <div class="tab-pane fade" id="tab7" role="tabpanel" aria-labelledby="7">
		                    <div id="map7" style="width: 100%; max-width: 729px; height: 461px;"></div>
		                </div>
		            </div>

Answer 1

[olchagmk]

Вот решение:

if( $(window).width() <= 768 ) {
            $('.title_mob').click( function() {
            $(this).closest('.map_block_mobile').find('ul').slideToggle('fast');
        });
        $('.map_block .nav-tabs a').click( function() {
            var activeTab = $(this).html();
            $(this).closest('.map_block_mobile').find('p').html(activeTab);
            $(this).closest('.map_block_mobile').find('ul').slideUp('fast');
        });
    }

Comments

[Олег]

Осталось понять какое отношение данное решение имеет к НТМЛ-коду в вопросе.
Чой-то я не могу найти там ни .title_mob , ни .map_block_mobile , ни просто .map_block ...

Answer 2

[Александр Лыкасов]

Я так понимаю вам надо nav в navbar обернуть и не забыть про navbar-toggler.

Comments

[olchagmk]

Не совсем, может я чего-то не понимаю, но мне то нужно тянуть не линки а контент.

Answer 3

[Олег]

Это типичное меню-бургер, в инете много примеров, мне помогло понять это - https://www.youtube.com/watch?v=chJQofBSx94
Единственное, что он не объясняет - для чего делает слой :before у хедера. У него в примере это связано с использованием z-index в анимации. Если с анимацией (выезд меню сверху) заморачиваться не будешь, то можно обойтись без z-index и :before.

Comments

[olchagmk]

Да, допустим это типичный бургер. Мне нужно что-бы он был как селект, т.е., как видно на фото, что-бы менялась картинка при выборе другого

[olchagmk]

Бургер же будет нам возвращать просто список к примеру с li a. а нам нужно что-бы я нажал на 1 из пунктов и оно свернулось и появился другой контент

[Олег]

olchagmk, если ты ограничен html/css то используй родственные селекторы.
Что-то вроде:
.nav > .nav-item > #1-tab:target ~ (надо безымянному div-у класс дать) > .tab-content > #tab1 {
display: block;
}
перед этим всем #tab указать display: none;

[olchagmk]

Олег, Можно подключать JS, только я не знаю что там писать)
Т.е. я делаю дефолтное бургер меню:

<ul>
        <li>
            <a href="#1-tab:target">
                
            </a>
        </li>
        <li>
            <a href="#2-tab:target">
                
            </a>
        </li>
        <li>
            <a href="#3-tab:target">
                
            </a>
        </li>
    </ul>

Не совсем понял за безымянный див

[Олег]

olchagmk,
1. структура хтмл, которая в вопросе - вполне нормальная.
2. <a href="#2-tab:target"> - это ошибка, читай что такое псевдоклассы в CSS
3. безымянный див - сорри, проглядел, что у тебя .tab-content находятся вне блока .tab-wrapper это неправильно, это запутывает.
4. div class="tab-content" перемещаешь внутрь div class="tab-wrapper"
5. в style.css пишешь:

.nav > .nav-item > *:target ~ .tab-content > .tab-pane > * {
display: none;
} 
.nav > .nav-item > #1-tab:target ~ .tab-content > .tab-pane > #map1 {
display: block;
}

и так далее еще 6 раз
6. Почитай про родственные селекторы, что бы понять как это работает.
7. Почитай вообще про селекторы, это действительно важно.