Якорные ссылки и скрытый <div> display none

[PrestaMan]

Стандарная тема сделана на bootstrap 3, вот пример как там можно сделать
http://bootstrap-ru.com/303/javascript/#collapse

[Ефим]

Стандарная тема сделана на bootstrap 3, вот пример как там можно сделать
http://bootstrap-ru.com/303/javascript/#collapse

Спасибо буду изучать.

а что такое component-animations.less ?

[Ефим]

Стандарная тема сделана на bootstrap 3, вот пример как там можно сделать
http://bootstrap-ru.com/303/javascript/#collapse

отдично это то что надао!
Сделал все работает, но почему-то по умолчанию все div раскрыты(((
Как это вылечить?         

Код: [Выделить]

<div class="panel-group" id="accordion">
 {foreach from=$faqs item='group'}
 {if isset($group.questions) && $group.questions}
 {foreach from=$group.questions item='question'}
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#answer_{$question.id_faq_question|intval}">
         {$question.question|escape:'html':'UTF-8'}
        </a>
      </h4>
    </div>
    <div id="answer_{$question.id_faq_question|intval}" class="panel-collapse collapse in">
      <div class="panel-body">
    {$question.answer nofilter}
      </div>
    </div>
  </div>
      {/foreach}
   {/if}
  {/foreach}
</div>

[Ефим]

Стандарная тема сделана на bootstrap 3, вот пример как там можно сделать
http://bootstrap-ru.com/303/javascript/#collapse

также я наткнулся на русскую версию там немного другой пример

Код: [Выделить]

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
  </div>
</div>и в том и в этом все работает, кроме анкоров(((

[tigran]

Анкор в аккордеоне на внутреннии элементы. Нельзя выставлять анкоры по всему документу.

[Ефим]

Анкор в аккордеоне на внутреннии элементы. Нельзя выставлять анкоры по всему документу.

а как тогда у них это реализовано? https://vsexshop.ru/help#Measures
судя по коду это bootstrap

[tigran]

Анкор в аккордеоне на внутреннии элементы. Нельзя выставлять анкоры по всему документу.

а как тогда у них это реализовано? https://vsexshop.ru/help#Measures
судя по коду это bootstrap

Как я и писал, внутренний блок с ссылкой href="#Measures".

[Ефим]

Тигран,
если зайти к сюда

Код: [Выделить]

https://vsexshop.ru/help#Measures произойдет не только сдвиг экрана к данному диву, но и его раскрытие http://prntscr.com/k133s4

если зайти сюда

Код: [Выделить]

https://intimtouch.ru/faq#collapse_6ничего не происходит, экран не сдвигается, раскрытия нет(((

посмотрим код:

вот их  https://vsexshop.ru/help

Код: [Выделить]

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-parent="#accordion1" data-toggle="collapse" href="#Measures">Как узнать свой размер?</a>
</h4>
</div>
<div class="panel-collapse collapse" id="Measures">
<div class="panel-body">
<div class="center-block">
<img class="full-width" src="//s79983.cdn.ngenix.net/assets/pages/measures_chart-85b541ea3fa8e11e9e244af700b63b5235444f6995e4db465ff7bdc18feb16fb.jpg" alt="Measures chart" />
</div>
</div>
</div>
</div>вот мой код https://intimtouch.ru/faq

Код: [Выделить]

<div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
<a class="accordion-toggle" data-parent="#accordion1" data-toggle="collapse" href="#Measures">Как узнать свой размер?</a>
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse_6">
               вопрос4
              </a>
            </h4>
    </div>
    <div id="collapse_6" class="panel-collapse collapse">
      <div class="panel-body">
  <p>праоногн</p>
      </div>
    </div>
  </div>
Не могу найти существенных отличий... Почему у них работают анкоры+раскрывается список при переходе по анкору?

[PrestaMan]

И у них и у вас список раскрывается при клике одинаково.
Для перехода измените формат ссылки, не используйте подчеркивания, присвойте id блокам с названием якоря.

[Ефим]

И у них и у вас список раскрывается при клике одинаково.
Для перехода измените формат ссылки, не используйте подчеркивания, присвойте id блокам с названием якоря.

Вы имеете ввиду символ нижнего подчеркивания "_" или использование в css text-decoration none ?

У меня div коиорый скрыт по умолчанию с-помощью display none. Может стоит использоаать visibility ? А то так не виден анкор

[Ефим]

удалил "_"
id присвоен блоку который должен раскрыться. изменил css с display none на overflow hidden+height 0
якорь работает, но нет раскрытия дива. т.е. если физически кликнуть НА вопрос, то див раскроется, но если перейти по ссылке с якорем https://intimtouch.ru/faq#collapse3
то как видите только экран сдвигается к нему, а раскрытия не происходит. Почему?

[Adik]

На сайте vsexshop есть функция js которая проверяет наличие хеша в url при открытии страницы и если он есть, то отрывает блок с описанием и тогда происходит переход

Код: [Выделить]

$(document).ready(function() {
    if (location.hash.startsWith('#collapse-') && $(location.hash).length !== 0) {
        $(location.hash + ' panel-body').expand();
    }
});

[Ефим]

На сайте vsexshop есть функция js которая проверяет наличие хеша в url при открытии страницы и если он есть, то отрывает блок с описанием и тогда происходит переход

Код: [Выделить]

$(document).ready(function() {
    if (location.hash.startsWith('#collapse-') && $(location.hash).length !== 0) {
        $(location.hash + ' panel-body').expand();
    }
});

Адик, чтобы не отвлекать Вас глупыми вопросами можете рассказать как мне самостоятельно посмотреть какие шрифты использует сторонний сайт? у хром я нажимаю f12 там есть css но где искать шкрипты?

[Ефим]

смотреть нужно в f12 source вкладка это я понял.
этот шкрипт вставил в 10-bootstrap.min.js

Код: [Выделить]

$(document).ready(function() {
    if (location.hash.startsWith('#collapse-') && $(location.hash).length !== 0) {
        $(location.hash + 'panel-body').expand();
    }
});Ничего не поменялось((( кеш почистил и в админке и в браузере.
есть еще варианты или я не туда вставляю?

[Ефим]

кстати забыл сказать, что у меня акардион как динамический элемент {foreach}
может из за этого не работают якорные ссылки(нет раскрытия вкладки)?