<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

Данный курс научит Вас программировать на языке Python, который крайне желательно знать любому, кто хоть иногда имеет дело с компьютерами. Курс состоит из 6 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Показать скрытый текст на JS

Показать скрытый текст на JS

Сегодня мы научимся показывать и скрывать текст, при клике по кнопке, на чистом JavaScript. Такой прием обычно используют на сайтах, с целью экономии места, когда публикуют только часть информации и кнопку. При клике по кнопке, раскрывается остальная часть.

Демонстрация примера

HTML структура

Внутри тега p, поместим текст, разделим текст на две части, между ними поставим три точки, которые обернем в тег span с идентификатором dots. Вторую часть текста, так же обернем в тег span с идентификатором more. Ниже создадим кнопку и повесим на нее событие клика, при котором будет выполняться функция с названием showMore.

<p>
Повседневная практика показывает, что консультация с широким активом способствует подготовки <span id="dots">...</span><span id="more"> и реализации существенных финансовых и административных условий. </span>
</p>
<button onclick="showMore()" id="btn">Показать больше</button>

CSS код

Изначально скроем вторую часть текста с идентификатором more.

#more {
    diplay: none;
}

На данный момент мы видим только первую половину текста, троеточие и кнопку. Далее запрограммируем нашу кнопку на JS.

JS код

Создадим функцию, с названием showMore, внутри функции объявим три переменные, которые будут получать элементы по названиям идентификаторов.

function showMore() {
    var dots = document.getElementById("dots");
    var moreText = document.getElementById("more");
    var btnText = document.getElementById("btn");

Теперь нам надо сделать проверку, видимы ли точки? Если невидимы (display находится в состоянии none. ), то показываем точки, меняя значение none на inline, а текст в переменной moreText скрываем. На кнопке прописываем текст: "Показать больше".

if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Показать больше";
    moreText.style.display = "none";
}

На данный момент у нас вторая часть текста скрыта. Напишем вторую часть условия, что делать, в противном случае. Делаем все с точностью наоборот, точки скрываем, а текст показываем.

else {
    dots.style.display = "none";
    btnText.innerHTML = "Показать меньше";
    moreText.style.display = "inline";
}
}

Условный оператор if-else, работает по принципу: или так / или сяк, одно из условий должно выполняться.

Добавим ещё CSS стилей для красоты

body {
    font-family: Tahoma;
}


div {
    background: #f2eaea;
    margin: 0 auto;
    max-width: 600px;
    padding: 20px;
}


#btn {
    background: #2196F3;
    border: none;
    font-size: 18px;
    font-weight: bold;
    color: white;
    padding: 10px;
    text-transform: uppercase;
}

Если хотите научиться создавать на нативном JavaScript больше интерактивных компонентов, то Вам в помощь, этот замечательный видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру".

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

cirip cirip 30.10.2019 20:24:10

Здравствуйте Михаил. Подскажите пожалуйста как мне скрыть половина текста с МАРКОЙ АВТО? https://doskavsem.ru/board/avtomobili/legkovye-avtomobili-618.html

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.