Здравствуйте.
Есть такой HTML код:
Ссылка на codepen:
https://codepen.io/machenkovby/pen/opjRgj.
<div class="tariffs">
<div class="menu-selection-tariffs">
<ul>
<li><a href="#">Интернет</a></li>
<li><a href="#">Телевидение</a></li>
<li><a href="#">Телефон</a></li>
<li><a href="#">Умный дом</a></li>
</ul>
<div class="selected-tariff">
<div class="internet">Интернет (блок 1)</div>
<div class="tv">Телевидение (блок 2)</div>
<div class="phone">Телефон (блок 3)</div>
<div class="smarthome">Умный дом (блок 4)</div>
<div class="package-nophone">Пакет услуг без телефонии (блок 5)</div>
<div class="package-phone">Пакет услуг с телефонией (блок 6)</div>
<div class="package-smarthome-nophone">Пакет услуг без телефонии, но с умным домом (блок 7)</div>
<div class="package-smarthome-phone">Пакет услуг с телефонией и умным домом (блок 8)</div>
</div>
</div>
</div>
Необходимо реализовать скрытие и показ блоков таким образом:
Если нажата вкладка “Интернет”, то показать только блок 1.
Если нажата вкладка “Телевидение”, то показать только блок 2.
Если нажата вкладка “Телефон”, то показать только блок 3.
Если нажата вкладка “Умный дом”, то показать только блок 4.
Если нажаты вкладки “Интернет” и “Телевидение”, то показать только блок 5.
Если нажаты вкладки Интернет”, “Телевидение” и “Телефон”, то показать только блок 6.
Если нажаты вкладки “Интернет, “Телевидение” и “Умный дом”, то показать только блок 7.
Если нажаты вкладки “Интернет, “Телевидение”, “Телефон” и “Умный дом”, то показать только блок 8.
Пример как должно работать здесь:
http://www.onlime.ru/internet/calc2/.