Как сделать появление блока при переходе по якорю?

Question

[Алексей]

Как сделать чтобы блок появлялся при переходе по якорю?
Т.е. при загрузки страницы его не видно, но если перейти по якорю он появлялся/становился видимым около якоря? Не поверх, а "раздвигая содержимое"?
Т.е. при клике <a href="#anchor"></a>
и переходе на якорь name="anchor"
появлялся блок
====
Лучше на чистом HTML+CSS

Comments

[DotDash]

что за CAA ?

[Dima Polos]

DotDash, самому интересно, что такое чистый caa, гугл подсказал, что это Canadian Automobilist Association)
Как вариант это опечатанный css)

[DotDash]

Dima Polos, у меня Certification Authority Authorization )

Answer 1

[DotDash]

через js самое простое.

$('a[href^="#"]').on('click',function(){ $('block').toggleClass('active'); });

где блок прописан display:none, а active прописан display:block

Comments

[Алексей]

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

[Дмитрий Кузнецов]

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

[Алексей]

Дмитрий Кузнецов, сам анкон не может являться идентификатором?

<a href="#anchor1"></a>
<a href="#anchor2"></a>
.....
<a href="#anchorN"></a>

name="anchor1" id="1"
name="anchor2" id="2"
...
name="anchorN" id="N"

Как в этом случае должен выглядеть скрипт?

[Antony Tkachenko]

Алексей selftrips.ru, если с использованием jQuery то как-то так

<a href="#anchor1"></a>
<div id="anchor1"></div>

$("a[href^='#anchor']").on('click', function (event) {
event.preventDefault();
event.stopPropagation();
var $this = $(this),
      $target = $($this.attr('href'));

$target.toggleClass('active');
});

+ при загрузке страницы можно проверять есть ли window.location.hash с нужным якорем

P.S. писал на коленке с телефона, может придется что-то подправить

[DotDash]

Antony Tkachenko, оформи как ответ

[Алексей]

Antony Tkachenko, что-то не работает, блоки всегда видны
https://sonnik-expert.ru/dream-books/?
(знак вопроса в конце обязателен чтобы обойти кеш)
код такой использую
<a href="#n">Н</a>
...
<a name="n"></a>Н<br><div id="n">111</div>

$("a[href^='#']").on('click', function (event) {
event.preventDefault();
event.stopPropagation();
var $this = $(this),
      $target = $($this.attr('href'));

$target.toggleClass('active');
});

[Antony Tkachenko]

Алексей selftrips.ru, а про css вы не забыли? Js-код только переключает css-класс .active

<div id="n" class="some-class">111</div>

.some-class {display:none;}
.some-class.active {display:block}

[DotDash]

Алексей selftrips.ru, а у вас jquery инициализирован в functions.php?

[Алексей]

DotDash, а как его надо инициализировать?
наличия в коде страницы строки
https://sonnik-expert.ru/wp-includes/js/jquery/jqu...
недостаточно?
вот такой код срабатывает

<script type="text/javascript">
if (window.jQuery) alert("jQuery подключен");
else alert("jQuery не подключен");
</script>
<script type="text/javascript">
$(document).ready(function(){
alert(jQuery.fn.jquery);
});
</script>

пишет что

jQuery подключен

блокируя страницу. После клика загружается страница
а вот такой НЕТ!!!!!

<script>
    $(document).ready(function(){
alert('Ваша версия jQuery ' + jQuery.fn.jquery);
});
</script>
В чем проблема что одни скрипты выполняются, а другие нет?

[Алексей]

Antony Tkachenko, забыл, точнее не знал. Но только не помогает.
Более того, якоря вообще перестают работать!!!!

[DotDash]

Алексей selftrips.ru, https://wp-kama.ru/id_4579/podklyuchenie-jquery-c-...

[Алексей]

Только я вот вообще не подал сам jquery! Он уже подключен темой или каким-то плагином. Соответственно, предполагаю что подключен правильно. Но почему то какой-то код работает, какой-то нет.

[DotDash]

Алексей selftrips.ru, В общем, из описания плохо понятно, что и как должно работать. Как показывать блок по клику на ссылку мы тебе ответили, остальное можно и средствами css решить своими силами (и немного гуглом).