Вы хотите найти свой объект, чтобы потом работать с ним, как это сделать?

.block - это класс нашего объекта. Думаю вы знаете, что на тильде можно задавать какому-либо объекту в зеро блоке свой класс. Также его можно найти и в коде элемента. Как это сделать читайте в моей первой статье в вк: https://vk.com/ahmedes?w=wall424616130_9856

var - это херня, которая дает понять коду, что мы задаем какую либо переменную. Можно использовать var, const и let. Между ними есть отличия, но не будем сейчас вдаваться в это.

param - это ваше название переменной, можете написать любое, не используйте тире.

Стоит понимать, что на тильде бывают объекты с одинаковым классом. Поэтому чтобы обратится к ним мы будем использовать id блока в начале. Вот так:

Стоит учитывать, что все элементы в виде текста, квадратов в зеро блоке зачастую обернуты в какой-либо блок и из-за этого наш код может не сработать т.к мы элементарно не можем достучаться до нужного блока.

Очень часто при поиске нужного блока в коде элемента мы можем натолкнуться на объект с классом .tn-atom

А также при загрузке страницы не всегда загружается нужный нам блок. Например к форме в зеро блоке невозможно достучаться при загрузке сайта. Поэтому в таком случае используются таймеры. Мы дойдем до них позже.

Если вы поняли, что ваш код не работает и проверили в коде элемента, что внутри блока есть еще один и как раз до него нужно достучаться, то просто допишите его класс.

Давайте попробуем

Айди следующего блока с квадратом #rec585138771

Что находится в коде элемента?

1. Он обернут в объект с классами .t396__elem, .tn-elem, .tn-elem__5851387711682856842053. Мы видим одну большую оранжевую строку, но на деле там три отдельных класса, которые отвечают на отдельные правила.
2. .tn-atom внутри того блока

А значит как мы будем стучаться до него? Легко и просто.

1. Берем айди блока - #rec585138771
2. Берем класс верхнего элемента с большим количеством цифр обязательно (это уникальный айди от тильды) - .tn-elem__5851387711682856842053
3. Берем .tn-atom т.к это и есть наш квадрат

Отлично! Мы сделали первый шаг.

Теперь давайте сделаем скрытие и показ данного объекта по кнопке.

Проще это сделать на jquery, я рекомендую вам работать с ним.

1. Создаем кнопку и находим ее класс

Что мы тут видим?

1. Айди блока на первой строке - #rec585143563
2. Множество других блоков контейнеров, они нам не нужны
3. Блок, который начинается с <a href="#click" target class> - он нам нужен.

Находим кнопку кодом используя пункты выше:

Этот код уже короче, почему? Потому что мы не используем класс кнопки или же айди. Мы используем ее тег.

Вы видели у блоков типа <div> <span> и прочее, это все теги.

Кнопка имеет тег <a>. У тегов мы не ставим . точку или # решетку, мы просто пишем сам тег без <>. А также чтобы не конфликтовать с кнопками из других блоков указываем в начале айди самого блока.

Мы успешно достучались до кнопки.

Теперь добавим функцию которая будет включать и выключать блок.

Я немного откомментировал чтобы вам было понятнее.

Итак, первым делом мы запустили работу скрипта, на это пока вниманием не обращаем. Это должно быть по стандарту, чтобы все работало.

Создали переменную и назвали ее button - для нашей кнопки

Создали вторую переменную для квадрата block

Далее написали, что при клике на кнопку - запускается функция, а именно (переменная).click(function() {

Функция в которой у блока есть метод slideToggle(1) - этот метод показывает и скрывает нужный блок за 1 секунду.

Не забывайте про скобки, без них ничего работать не будет.

Теперь давайте посмотрим как это работает на деле:

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

Дальше уже легче, изучая jquery или js вы поймете, что таких методов как slideToggle() миллионы, есть просто hide() который скроет объект, есть просто toggle().

Есть show(), который просто покажет объект. Есть множество методов для работы с текстом, блоками и прочим.