Как сделать, чтобы при нажатии на кнопку открывался тест, а при на жатии на другую он изменился на другой?

Question

Помогите! Нужно реализовать что-то вроде скрипта продаж только на PHP либо HTML. Есть 4 кнопки по горизонтали (может быть больше), при заходе на страницу, текст скрыт, при на жатии на кнопку чтобы текст открывался как спойлер, у каждой кнопки свой текст + так же кнопки. При нажатии на кнопки ниже верхний блок свернуть Надеюсь поймете) голова уже кругом.

Кнопки:

<a href="#" class="button10">кнопка</a>  
<a href="#" class="button10">кнопка</a>
<a href="#" class="button10">кнопка</a>

Answer 1

Подключите к сайту Bootstrap. Сверху, где стили вставьте: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

В самый низ вставьте: <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> После чего, создайте блоки которые хотите увидеть при нажатии кнопки и повесьте на кнопку сам коллапс, должно получиться:

  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">кнопка со спойлером</button>
  <div class="collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Спойлер
      </div>
    </div>

Прошу заметить что id блока, который должен раскрываться должен совпадать с атрибутами кнопки data-target и aria-controls На данной странице описано как Bootstrap Collapseи

БЛОГ НА HUSL

Как сделать, чтобы при нажатии на кнопку открывался тест, а при на жатии на другую он изменился на другой?

Ответы (1 шт):