Как сделать кнопку Подробнее чтобы показать скрытый текст на чистом JS

[@ITDoctor]

Курс Frontend разработчик на HTML, CSS и JavaScript: stepik.org/z/113402

[@ЖасикХд]

СПАСИБО! ТЫ ПРОСТО МОЙ ГЕРОЙ В ЭТУ ХОЛОДНУЮ ДОЖДЛИВУЮ НОЧЬ!

[@ITDoctor]

Побольше вам солнечных деньков

[@КириллБулыгин-р8о]

Спасибо огромное, не мог долго найти решение, спасибо огромное!!!!!!

[@jacpat6980]

спасибо, все детально и понятно!

[@ITDoctor]

Рад что понравилось

[@KvN-UA]

Класс, и так доступно изложено все. Спасибо!

[@скоростьипейс]

Спасибо большое, очень выручил

[@ITDoctor]

Рад что помог

[@_Fantom_.]

Отличный урок, спасибо!

[@D_P_Shmot]

Респект, помогло ❤‍🔥

[@ITDoctor]

Рад слышать

[@ПавелРумянцев-й5п]

Спасибо! Лайк! Побольше таких видео

[@ITDoctor]

Пожалуйста

[@yflow5337]

Спасибо большое! Жаль что только один лайк можно поставить!

[@ITDoctor]

Вам спасибо

[@latest548]

Очень полезный урок

[@ITDoctor]

спасибо за оценку

[@saintdeveloper6407]

Спасибо. Все понятно!

[@ВячеславХотеев]

Большое спасибо!

[@ITDoctor]

Пожалуйста!

[@Anatoli-bq1pe]

Класс! Благодарю

[@ITDoctor]

Рад что оценили

[@codetherapytt978]

Класс! Мастер!

[@ITDoctor]

спасибо

[@allasv]

Спасибо большое!

[@ITDoctor]

Пожалуйста

[@АлександрШатохин-н7г]

Молодец. Давай какой-нибудь интересный слайдер, например с изображением по 3 штуки, с затемнением левого и правого и явно видимого по центру. Либо круговой слайдер.

[@andreyArzumaniyan]

а как сделать с анимацией выдвижения?

[@СветланаЖалнина-к6л]

Спасибо большое, очень поучительно) К сожалению, у меня возникла проблема, кнопка "Подробнее" есть и половина текста скрыта, но при нажатии на кнопку остальной не открывается. Можете подсказать почему?

[@ДмитрийВасинюк]

Подскажите пожалуйста, набрал все вроде точь в точь, но в браузере при нажати пропадает полностью кнопка "далее", текс раскрывается, а кнопка пропадает полностью.Что делать и как исправить?

[@bulbazavr1823]

ты в итоге смог исправить ошибку?

[@victorchilari]

Спасибо, помогло

[@_Peterhof_]

Уважаемый доктор, прошу помочь. Голову сломал. Почему мы в if прописываем сначала условие, которое является ложным, а не наоборот? Я хотел попробовать разными способами для практики, и сделал по-другому. В if писал условие истинное - dots.style.display === “inline”, то есть код в случае если условие будет истиной: текст показать, точки убрать, кнопку изменить на Скрыть. В else соответственно наоборот: точки вернуть, текст убрать, текст вернуть на Подробнее. Но в этом случае с первого раза не срабатывает кнопка. Только со второго. Почему она срабатывает со второго раза??? Думаю..

[@_Peterhof_]

В общем всё-таки сделал как хотел. Я завел переменную checkIt равную true. Вынес ее за функцию, так как если не вынести, то обратно не свернётся при следующем клике. В условии if написал условие checkIt - которое является истиной, чтобы выполнился первый блок if. в коде if внизу поменял true на false, чтобы при следующем клике выполнился else. И в коде else в конце вернул обратно значение на true, чтобы уже при следующем клике опять выполнялся if. var checkIt = true; function readMore() { var dots = document.getElementById("dots"); var more = document.getElementById("more"); var btn = document.getElementById("btn"); if (checkIt) { more.style.display = "inline"; dots.style.display = "none"; btn.innerHTML = "Скрыть"; checkIt = false; } else { dots.style.display = "inline"; more.style.display = "none"; btn.innerHTML = "Подробнее"; checkIt = true; }

[@ITDoctor]

рад что у вас получилось. я сейчас немного ограничен в своих ответах. если вы не в курсе почему то читайте Новости на странице сообщества канала

[@zFL1CKz]

А если таких блоков, например, 20? Как тогда можно сделать?

[@fazliddin__web-development1910]

нашол ответ,

[@fazliddin__web-development1910]

?

[@zFL1CKz]

@@fazliddin__web-development1910 по-моему, я пришел к тому, что заюзал какую-то библиотеку. Но можно просто в каждом блоке при клике передавать this и в функции отлавливать сам блок и искать нужный в нем класс с текстом (не самый лучший вариант наверняка, но это должно работать)

[@DamianTrash]

А как на счёт автоматического разделения текста? Вряд ли контент-менеджер будет сидеть с кодом возиться при заполнении сайта. Особенно, если тысячи страниц.

[@Jastioknowyt]

надо сообщение разделить на массив и если есть пробелы то разделять элементы и получается если в массиве больше 50 элементов (это 50 сообщений) то выполняется код для сокращения

[@nicoleangelova1095]

Пытаюсь применить это на пункты (), но почему то их не скрывает. Может можно это как то исправить?

[@vitaliishostak3237]

а не проще доставать елементы с помощью querySelector?

[@opa_hromosoma645]

Всьо круто видео действительно оказалось очень лаконичным и понятым.)) Но не могли бы вы добавить ссылку на скачивание кода ето бы во много раз упростило работу остальных людей)))

[@ITDoctor]

если постоянно копировать код то его трудно научиться писать самому. мне не жалко но для начинающих будет полезней делать это вручную

[@ЭПИКмамант]

Спасибо!

[@_cyborg]

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

[@ITDoctor]

Изучайте CSS более детально, можно анимировать разные свойства. у меня есть несколько уроков на эту тему kzbin.info/www/bejne/rJLKfaJ8ZrKNl8U kzbin.info/www/bejne/nV6ok41sbZl9aZI kzbin.info/www/bejne/moKTn3SZn5xpr80 посмотрев их, если будет недостаточно чтобы сделать задуманное, у вас точно появятся мысли, идеи и общее понимание сути. А уже имея это вы сможете дальше погуглить, почитать и сделать то что требуется. Таким образом решите задачу и приобретете бесценный, реальный, практический опыт и кучу дополнительных знаний мелких нюансов, которые в будущем точно еще пригодятся.

[@e_gor8447]

Здравствуйте а как применить это для нескольких а то я на 3 применил, а он открывает только одно с помощью кода а другие не реагируют

[@ITDoctor]

kzbin.info/www/bejne/lYqvoamkprZsa8k ответ на ваш вопрос

[@KapitanDi]

Если карточек/блоков несколько, каким образом можно их растиражировать? Тупо скопировать, разумеется, не сработает. Какие переменный и команды надо подредактировать. Спасибо.

[@ITDoctor]

как раз следующий после этого урок в плейлисте про это kzbin.info/www/bejne/lYqvoamkprZsa8k весь плейлист-курс kzbin.info/aero/PLuY6eeDuleINjS4_G7KuYThU_T4uzpAuG

[@KapitanDi]

Отлично! Тнкс

[@KapitanDi]

Спасибо! Супер! Вопрос есть, немного не по теме, но вам наверняка его решить как два байта отправить) Итак, есть форма, Имя, телефон, и собственно сам текст, форма такая, при нажатии кнопки отправить открывается почтовая программа, но в ней весь кириличный текст преобразовался в кракозябры, как это исправить? Спасибо ещё раз)

[@KapitanDi]

подписался, с нетерпением жду от вас новое видео на эту тему)

[@ITDoctor]

кодировка в теге meta установлена корректно? в utf8?

[@KapitanDi]

@@ITDoctor да, всё автоматом на VSC

[@KapitanDi]

спасибо

[@questionsanswer6293]

Я один не понимаю почему мы проверяем display none у dots если мы указали его у more? точки всегда видимы и открыты

[@Parmax885]

Спасибо большое за урок! У меня все получилось, но остался маленький вопрос))) Подскажите, как можно реализовать идею кнопки использую query.sectors? Чтоб можно было обратиться по названию класса, а не по getElementById? А то у меня более 10 кнопок подробнее... Через id не вариант. Много кода в .js, вот и ищу альтернативу.

[@ITDoctor]

learn.javascript.ru/searching-elements-dom вот тут посмотрите

[@Parmax885]

@@ITDoctor Спасибо

[@АртёмКравченко-и7л]

могли бы вы рассказать подробнее, как обратиться ко всем кнопкам "подробнее" если их больше чем 1? мучаюсь уже часа 4

[@powerjavascriptman]

@@АртёмКравченко-и7л фор циклом или форич

[@МаксимЕкимов-ю1с]

А если у нас несколько кнопок "подробнее" и к ним отдельный текст, то как js подкорректировать?

[@ITDoctor]

kzbin.info/www/bejne/lYqvoamkprZsa8k вот видео в этом же плейлисте на вашу тему

[@zapiski_verstalshika]

я поставил лайк, но: onclick??? да и текст лучше обрезать не с помощью а с помощью js...

[@muradagamedov4975]

А если много таких карточек?

[@ITDoctor]

kzbin.info/www/bejne/lYqvoamkprZsa8k

[@KuKu_RuKu88]

проблема в том, что срабатывает только со второго клика, как решить не подскажете ???

[@АндрейЧелноков-з1э]

Событие onclick срабатывает от одного нажатия. Возможно что-то не так делаете

[@dezo103]

в 2019 году переменные объявлять через var ну такое себе)

[@foforenok]

Пойду компьютер куплю а у меня нет денег

[@HoffmanH]

Видосу уже 3 года, может быть поэтому код не работает, всё написал в точности как вы показывали, по итогу скрипт не работает. function readMore(){ var dots = document.detElementById('dots'); var more = document.detElementById('more'); var btn = document.detElementById('btn'); if(dots.style.display ==='none'){ dots.style.display='inline'; btn.innerHTML='Подробнее'; more.style.display='none'; } else{ dots.style.display='none'; btn.innerHTML='Скрыть'; more.style.display='inline'; } }

[@HoffmanH]

Вот html. Я долго думал над функционалом кнопки, постоянно удалял и вставлял новый код, писал как внутри Html при помощи тега script так и в отдельном окне JS, создавал кнопку которая окрашивала фон, кнопку с выскакивающим окном и пришёл к выводу... что будет прикольно сделать это. Дело в том что я лазил по разным сайтам, смотрел оформление, и спустя несколько дней узнал что на многих из них были следующие фичи. Кнопки с сылками на источник, кнопки открывающие текст, как в Википедии и кнопки открывающие окна, но это слишком просто, так как по сути единственное что можно сделать, это оформить выскакивающее окно в CSS. Развернуть

[@HoffmanH]

Нашёл ошибку, причём она очень глупая, всё из-за того что написал случайно det вместо get.

[@FailValiev]

где ссылка на код?

[@ITDoctor]

во втором уроке, в продолжении kzbin.info/www/bejne/lYqvoamkprZsa8k ну или сразу github.com/morphIsmail/readmore

[@RadioTorrent]

А куда сохранить JavaScript? html и css то понятно...

[@ITDoctor]

в каталог JS например или в корень

[@ВладимирЛитовченко-ш3н]

кнопка вверх на js на bootstrap 5

[@Микс-ь6ж]

Спасибо тебе большое! Все круто! Но есть проблема, не могу реализовать такую фичу... Есть много элементов в инет магазине. У которых, есть кнопка "Подробнее" Как сделать так чтобы при клике на кнопку появлялся скрытый контент. Ведь в данном ролике такое применимо к одному блоку. Просто не хотелось бы к каждой отдельной кнопки прописывать скрипт. Потому как это не разумно. Если таких кнопок будет штук пятьсот? Но за видео еще раз Спасибо

[@ITDoctor]

если магазин расположен на CMS (а так и должно быть), то там немного по другому всё это реализуется. Зависит от CMS, обычно просто плагин ставится или уже есть возможность делать такие элементы.

[@Микс-ь6ж]

@@ITDoctor Ок, спасибо.

[@baurbaur332]

Вроде скрытый текст плоха не сео влияет

[@kefirfix1048]

Ничего не понял, и не работает

[@ДаниилГаниев-щ8к]

а что делать если не получаеться Ды́мковская игру́шка - один из русских народных глиняных художественных промыслов. Возник в заречной слободе Дымково, близ города Вятки (ныне на территории города Кирова)... Возникновение игрушки связывают с весенним праздником Свистунья, к которому женское население слободы Дымково лепило свистульки из глины в виде коней, баранов, козлов, уток и других животных; их красили в разные яркие цвета. Позднее, когда праздник потерял своё значение, промысел не только сохранился, но и получил дальнейшее развитие. подробнее function readMore() { var dots = document.getElementById("dots"); var more = document.getElementById("more"); var btn = document.getElementById("btn"); if(dots.style.display === "none"){ dots.style.display="inline"; btn.innerHTML="Подробнее"; more.style.display="none"; }else{ dots.style.display="none"; btn.innerHTML= "Скрыть"; more.style.display="inline"; } }

[@LegoMasterteam]

решил?

[@ДмитрийС-ш9б]

onclick="" в 2019? Ты серьёзно?)))

[@ITDoctor]

Я думаю даже в 2077 ничего не изменится. Какая разница какой год....

[@LegoMasterteam]

main.js:44 Uncaught TypeError: Cannot read properties of null (reading 'style') at readMore (main.js:44:14) at HTMLSpanElement.onclick (index.html:108:487) ошибка кто поможет?

[@bondar.travel]

у меня ничего не получилось ((((((( в чем может быть причина . Подскажите пожалуйста . Вот мой код : js : function readMore() { var dots = document.getElementById ("dots"); var more = document.getElementById ("more"); var btn = document.getElementById ("btn"); if(dots.style.display === "none") { dots.style.display = "inline"; btn.innerHTML = "close"; more.style.display = "none"; } else { dots.style.display = "none"; btn.innerHTML = "open"; more.style.display = "inline"; }} css: #more{display:none} html : Every caring parent knows how important it is to monitor the nutrition of the child. This question becomes especially important when you... sweets to pamper your little one. The uniqueness of our ice cream lies in the fact that its composition is designed to meet the needs of the child's body. Each ingredient of the delicacy undergoes an additional quality check.

[@ITDoctor]

в чем проблема? я запустил ваш код. Конечно пришлось повозиться его собирать из фрагментов. лучше на гитхаб или кодпен загружайте чтобы показать свой код. (ну это уже другая история) вроде как работает скрытие и показ фрагмента текста. Правда ваши теги picture и source мне не понятны для какой цели были использованы...