Аккордеон открывается при нажатии на ссылку - PullRequest
Новая
       29

Аккордеон открывается при нажатии на ссылку

0 голосов
/ 19 октября 2019

В течение долгого времени я страдаю от аккордеона, я не могу открыть его.

Мне нужно, чтобы аккордеон открывался, когда вы нажимаете на ссылку. Как это сделать в моем примере? Я нашел много разных решений этой проблемы на вашем сайте, но ни один из вариантов не подойдет. Аккордеон находится внизу страницы.

http://elementor.echotag.net

1 Ответ

0 голосов
/ 19 октября 2019

Для этого вы используете Bootstrap.

Есть несколько предопределенных классов в начальной загрузке, которые вы можете использовать,

Подробнее об этом здесь 

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <div data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
            Point 1
          </div>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">
          Your Description for point 1
        </div>
        <div class="panel-footer">
          Footer text goes here for point 1
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <div data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
            Point 2
          </div>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">
          Your Description for point 2
        </div>
        <div class="panel-footer">
          Footer text goes here for point 2
        </div>
      </div>
    </div>
  </div>
</body>

</html>

В конце вы делаете некоторые стили, как хотите, например, когда наведенные точки показывают указатель курсора, показывают анимацию, если хотите, или меняют цвет, сохраняете шрифтразмер в соответствии с вашими потребностями.

**

ПРИМЕЧАНИЕ:

Я не открыл предоставленную ссылку, потому что это не безопасно.

Мой код объясняет, как добавить accordian стилей на ваши страницы. надеюсь, что это поможет вам.

**

...