Как сделать кнопку Подробнее чтобы показать скрытый текст на чистом JS
HTML-код
- Опубликовано: 12 сен 2024
- В этом видео я покажу как сделать кнопку Подробнее (Read More) для того чтобы показать скрытый текст на чистом JavaScript без библиотек и фреймворков.
✔Советую посмотреть:
Быстрый старт в JavaScript: • #0 Основы программиров...
Курс по JavaScript: • Уроки по JavaScript
⚡️ Эксклюзив на Boosty - boosty.to/itdo...
💡 Telegram канал - t.me/itdoctor_...
🎥 Курсы на Stepik - stepik.org/use...
💰 Донаты на ЮMoney - sobe.ru/na/itd...
ВКонтакте - itdocto...
Яндекс Дзен - zen.yandex.ru/...
Rutube - rutube.ru/chan...
#javascript #js #itdoctor
Курс Frontend разработчик на HTML, CSS и JavaScript: stepik.org/z/113402
СПАСИБО! ТЫ ПРОСТО МОЙ ГЕРОЙ В ЭТУ ХОЛОДНУЮ ДОЖДЛИВУЮ НОЧЬ!
Побольше вам солнечных деньков
Спасибо огромное, не мог долго найти решение, спасибо огромное!!!!!!
спасибо, все детально и понятно!
Рад что понравилось
Класс, и так доступно изложено все. Спасибо!
Очень полезный урок
спасибо за оценку
Спасибо большое, очень выручил
Рад что помог
Отличный урок, спасибо!
Большое спасибо!
Пожалуйста!
Спасибо. Все понятно!
Спасибо большое, очень поучительно) К сожалению, у меня возникла проблема, кнопка "Подробнее" есть и половина текста скрыта, но при нажатии на кнопку остальной не открывается. Можете подсказать почему?
Класс! Благодарю
Рад что оценили
Молодец. Давай какой-нибудь интересный слайдер, например с изображением по 3 штуки, с затемнением левого и правого и явно видимого по центру. Либо круговой слайдер.
Спасибо большое! Жаль что только один лайк можно поставить!
Вам спасибо
Класс! Мастер!
спасибо
Спасибо большое!
Пожалуйста
Спасибо! Лайк! Побольше таких видео
Пожалуйста
Респект, помогло ❤🔥
Рад слышать
Спасибо, помогло
а как сделать с анимацией выдвижения?
Подскажите пожалуйста, набрал все вроде точь в точь, но в браузере при нажати пропадает полностью кнопка "далее", текс раскрывается, а кнопка пропадает полностью.Что делать и как исправить?
ты в итоге смог исправить ошибку?
А как на счёт автоматического разделения текста? Вряд ли контент-менеджер будет сидеть с кодом возиться при заполнении сайта. Особенно, если тысячи страниц.
надо сообщение разделить на массив и если есть пробелы то разделять элементы и получается если в массиве больше 50 элементов (это 50 сообщений) то выполняется код для сокращения
Спасибо!
а не проще доставать елементы с помощью querySelector?
Уважаемый доктор, прошу помочь. Голову сломал. Почему мы в if прописываем сначала условие, которое является ложным, а не наоборот? Я хотел попробовать разными способами для практики, и сделал по-другому. В if писал условие истинное - dots.style.display === “inline”, то есть код в случае если условие будет истиной: текст показать, точки убрать, кнопку изменить на Скрыть. В else соответственно наоборот: точки вернуть, текст убрать, текст вернуть на Подробнее. Но в этом случае с первого раза не срабатывает кнопка. Только со второго. Почему она срабатывает со второго раза??? Думаю..
В общем всё-таки сделал как хотел. Я завел переменную 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;
}
рад что у вас получилось. я сейчас немного ограничен в своих ответах. если вы не в курсе почему то читайте Новости на странице сообщества канала
Пытаюсь применить это на пункты (), но почему то их не скрывает. Может можно это как то исправить?
А если таких блоков, например, 20? Как тогда можно сделать?
нашол ответ,
?
@@fazliddin__web-development1910 по-моему, я пришел к тому, что заюзал какую-то библиотеку. Но можно просто в каждом блоке при клике передавать this и в функции отлавливать сам блок и искать нужный в нем класс с текстом (не самый лучший вариант наверняка, но это должно работать)
Подскажите, пожалуйста. Как сделать, чтобы текст открывался плавно? Примерно 1 секунду
Изучайте CSS более детально, можно анимировать разные свойства. у меня есть несколько уроков на эту тему
ruclips.net/video/vagLoF1MZac/видео.html
ruclips.net/video/g-EbZ684J30/видео.html
ruclips.net/video/dQ0nAcj76yk/видео.html
посмотрев их, если будет недостаточно чтобы сделать задуманное, у вас точно появятся мысли, идеи и общее понимание сути. А уже имея это вы сможете дальше погуглить, почитать и сделать то что требуется. Таким образом решите задачу и приобретете бесценный, реальный, практический опыт и кучу дополнительных знаний мелких нюансов, которые в будущем точно еще пригодятся.
Всьо круто видео действительно оказалось очень лаконичным и понятым.))
Но не могли бы вы добавить ссылку на скачивание кода ето бы во много раз упростило работу остальных людей)))
если постоянно копировать код то его трудно научиться писать самому. мне не жалко но для начинающих будет полезней делать это вручную
Спасибо! Супер! Вопрос есть, немного не по теме, но вам наверняка его решить как два байта отправить) Итак, есть форма, Имя, телефон, и собственно сам текст, форма такая, при нажатии кнопки отправить открывается почтовая программа, но в ней весь кириличный текст преобразовался в кракозябры, как это исправить? Спасибо ещё раз)
подписался, с нетерпением жду от вас новое видео на эту тему)
кодировка в теге meta установлена корректно? в utf8?
@@ITDoctor да, всё автоматом на VSC
спасибо
Я один не понимаю почему мы проверяем display none у dots если мы указали его у more? точки всегда видимы и открыты
Спасибо большое за урок! У меня все получилось, но остался маленький вопрос)))
Подскажите, как можно реализовать идею кнопки использую query.sectors? Чтоб можно было обратиться по названию класса, а не по getElementById?
А то у меня более 10 кнопок подробнее... Через id не вариант. Много кода в .js, вот и ищу альтернативу.
learn.javascript.ru/searching-elements-dom вот тут посмотрите
@@ITDoctor Спасибо
могли бы вы рассказать подробнее, как обратиться ко всем кнопкам "подробнее" если их больше чем 1? мучаюсь уже часа 4
@@user-mx6cd8ns4i фор циклом или форич
Если карточек/блоков несколько, каким образом можно их растиражировать? Тупо скопировать, разумеется, не сработает. Какие переменный и команды надо подредактировать. Спасибо.
как раз следующий после этого урок в плейлисте про это ruclips.net/video/_YLpvnqQ95g/видео.html
весь плейлист-курс ruclips.net/p/PLuY6eeDuleINjS4_G7KuYThU_T4uzpAuG
Отлично! Тнкс
я поставил лайк, но: onclick??? да и текст лучше обрезать не с помощью а с помощью js...
Здравствуйте а как применить это для нескольких а то я на 3 применил, а он открывает только одно с помощью кода а другие не реагируют
ruclips.net/video/_YLpvnqQ95g/видео.html ответ на ваш вопрос
в 2019 году переменные объявлять через var ну такое себе)
А если у нас несколько кнопок "подробнее" и к ним отдельный текст, то как js подкорректировать?
ruclips.net/video/_YLpvnqQ95g/видео.html вот видео в этом же плейлисте на вашу тему
проблема в том, что срабатывает только со второго клика, как решить не подскажете ???
Событие onclick срабатывает от одного нажатия. Возможно что-то не так делаете
Спасибо тебе большое! Все круто! Но есть проблема, не могу реализовать такую фичу... Есть много элементов в инет магазине. У которых, есть кнопка "Подробнее" Как сделать так чтобы при клике на кнопку появлялся скрытый контент. Ведь в данном ролике такое применимо к одному блоку. Просто не хотелось бы к каждой отдельной кнопки прописывать скрипт. Потому как это не разумно. Если таких кнопок будет штук пятьсот? Но за видео еще раз Спасибо
если магазин расположен на CMS (а так и должно быть), то там немного по другому всё это реализуется. Зависит от CMS, обычно просто плагин ставится или уже есть возможность делать такие элементы.
@@ITDoctor Ок, спасибо.
А куда сохранить JavaScript? html и css то понятно...
в каталог JS например или в корень
кнопка вверх на js на bootstrap 5
А если много таких карточек?
ruclips.net/video/_YLpvnqQ95g/видео.html
где ссылка на код?
во втором уроке, в продолжении ruclips.net/video/_YLpvnqQ95g/видео.html
ну или сразу github.com/morphIsmail/readmore
Вроде скрытый текст плоха не сео влияет
а что делать если не получаеться
Ды́мковская игру́шка - один из русских народных глиняных художественных промыслов. Возник в заречной слободе Дымково, близ города Вятки (ныне на территории города Кирова)... Возникновение игрушки связывают с весенним праздником Свистунья, к которому женское население слободы Дымково лепило свистульки из глины в виде коней, баранов, козлов, уток и других животных; их красили в разные яркие цвета. Позднее, когда праздник потерял своё значение, промысел не только сохранился, но и получил дальнейшее развитие.
подробнее
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";
}
}
решил?
Пойду компьютер куплю а у меня нет денег
Ничего не понял, и не работает
onclick="" в 2019? Ты серьёзно?)))
Я думаю даже в 2077 ничего не изменится. Какая разница какой год....
у меня ничего не получилось ((((((( в чем может быть причина . Подскажите пожалуйста . Вот мой код :
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.
в чем проблема? я запустил ваш код. Конечно пришлось повозиться его собирать из фрагментов. лучше на гитхаб или кодпен загружайте чтобы показать свой код. (ну это уже другая история) вроде как работает скрытие и показ фрагмента текста. Правда ваши теги picture и source мне не понятны для какой цели были использованы...
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)
ошибка кто поможет?
Видосу уже 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';
}
}
Вот html.
Я долго думал над функционалом кнопки, постоянно удалял и вставлял новый код, писал как внутри Html при помощи тега script так и в отдельном окне JS,
создавал кнопку которая окрашивала фон, кнопку с выскакивающим окном и пришёл к выводу...
что будет прикольно сделать это. Дело в том что я лазил по разным сайтам, смотрел оформление, и спустя несколько дней узнал что на многих из них были следующие фичи.
Кнопки с сылками на источник, кнопки открывающие текст, как в Википедии
и кнопки открывающие окна, но это слишком
просто, так как по сути единственное что можно сделать, это оформить выскакивающее окно в CSS.
Развернуть
Нашёл ошибку, причём она очень глупая, всё из-за того что написал случайно det вместо get.