Как спрятать ссылку под спойлер

Автопринадлежности

Вопрос № 75. Как спрятать часть моей записи под ссылкой? Что такое lj-cut и lj-spoiler?

Тэг позволит вам целиком или частично скрыть запись под ссылкой. (или кат) не работает в комментариях.

Кат работает (текст скрыт): на главной странице вашего журнала, на страницах лент друзей, на второй и последующих страницах комментариев к записи, на страницах просмотра за определённую дату.
При желании кат можно раскрыть прямо на одной из этих страниц: для этого нажмите на ссылку ката либо используйте сочетание клавиш «ctrl alt +». Чтобы свернуть кат, нажмите на кнопку «Свернуть», которая появится вместо текста ссылки ката либо воспользуйтесь сочетанием клавиш «ctrl alt –». Чтобы кат корректно разворачивался на этих страницах, в вашем браузере должен быть включен Java Script.
Нажатие на кат учитывается в статистике просмотров.

Кат не работает (текст, убранный под кат, виден): на странице записи из актуального редактора и на странице предварительного просмотра записи из старого редактора (на нее можно попасть по ссылке «Предпросмотр» на странице создания записи), на странице самой записи в журнале, на первой странице комментариев к записи.

Как поставить кат?

  • Актуальный редактор: начните новый абзац в том месте, где вы хотите открыть кат. Левее поля для текста появится иконка «+». Нажмите на неё и в появившемся меню выберите иконку «Ножницы», после чего в поле для текста появится открывающий кат в виде полосы и верхней половинки ножниц. Чтобы закрыть кат, повторите описанные выше шаги, чтобы в редакторе появилась закрывающая половинка ножниц.
  • Визуальный редактор: выделите текст и другое содержимое, которое вы хотите скрыть (мышкой или с клавиатуры), затем нажмите кнопку «Кат» (). В открывшемся окне можете заменить текст «Читать дальше. » на фразу, которая станет ссылкой на скрытый отрывок. В этом режиме редактора часть, спрятанная под кат, будет отображаться в окне редактирования записи между двумя пунктирными линиями с изображением половин ножниц.
  • Редактор HTML: наберите перед текстом, который хотите спрятать, заменив «Read more» фразой, которая станет ссылкой на скрытый отрывок. Если хотите продолжать запись открытым текстом по окончании скрытого отрывка, в конце скрываемого текста наберите .

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

Обратите внимание, что в Промо в Ленте друзей кат ставится автоматически.

Тэг работает и в записях, и в комментариях. Как и в случае с катом, он скрывает часть текста под ссылкой. Когда кто-либо просматривает запись на своей странице друзей и видит в ней , скрытый под ссылкой текст будет раскрыт по клику на той же самой странице (вместо загрузки отдельной страницы, как в случае с катом). Даже если пользователь зайдет под кат, часть текста под спойлером останется скрыта.

Как создать спойлер?

  • Актуальный редактор: выделите текст, который хотите скрыть. В появившемся меню нажмите на иконку «Глаз» и в открывшемся окне введите текст, который будет отображаться на месте скрытого отрывка. После нажатия «Enter» спойлер будет добавлен, и вы увидите пиктограмму глаза рядом с текстом.
  • Визуальный редактор: выделите текст, который вы хотите скрыть (мышкой или с помощью клавиатуры), затем нажмите на кнопку «Спойлер» (). В открывшемся окне замените текст «Нажмите, чтобы прочитать» на фразу, которая станет ссылкой на скрытый отрывок. В режиме визуального редактора часть, скрытая под спойлером, будет отображаться в окне редактирования записи между двумя пунктирными линиями с изображением стрелочек.
  • Редактор HTML / Форма комментария: используйте тэг Этот текст будет скрыт .

Источник

Прячем текст под спойлер

Как сделать спойлер – вставьте в сообщение в режиме html следующий код.

Читайте также:  Шноркель для брп g1 715001136

Я себе для того же самого сделала шорткодик (поскольку у меня блог standalone). Сокращает число движений. если, конечно, помнишь, как им пользоваться. 🙂 На бесплатных сервисах такое невозможно в принципе, а у себя можно накрутить в своё удовольствие.

Как-то столкнулся с желанием сделать спойлер на форуме. Там это с одной стороны сложнее, с другой — проще, так как делается всего 1 раз. Необходимо в администраторской панели добавлять отдельный BBCode, а найти его в чистом виде не так просто: у многих разработчиков в коды вставлены свои ссылки, которые они готовы убрать за определенную плату).

Не работает у меня на Джумла 3, текст прячется, кнопка есть, но не нажимается, подскажите чего делать : )

Видимо существует конфликт. Попробуйте этот код:

Код, опубликованный выше будет работать только при подключенной библиотеке jquery

Столкнулся с проблемой: при размещении двух или более спойлеров на одной странице открывает только содержимое первого спойлера. даже если нажимаешь на ссылку 3 спойлера, все равно открывает содержимое первого спойлера.

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

Было бы лучше, если бы были разные тексты «Показать», а потом «Скрыть».

Возникла проблема с приведённым в тексте вариантом спойлера: сначала работало нормально, но сейчас по умолчанию показывает содержимое. Т.е. при заходе на страницу спойлер раскрытый, нажимаю на кнопку — сворачивается. Как решить?

Анонимный, попробуйте переустановить код. Если в нем появились такие теги, как br, то их убрать.

Источник

Аккордеон, faq, спойлер и другие раскрывающиеся виджеты

Создать аккордеон, faq, спойлер и подобное, можно при помощи Div и JavaScript.
Но лучше: Details и Summary

Поддерживается всеми современными браузерами и это семантически правильно оформленный код, при использовании которого будут плюсы:

  1. Людям с ограниченными возможностями проще будет пользоваться вашим сайтом! Их софт (скринридеры и подобное) прекрасно понимает html5 теги и будет правильно обрабатывать их и правильно информировать людей о содержимом.
  2. Улучшится связанность текста, и поисковики смогут более качественно индексировать сайт, так как будут лучше понимать, как связаны между собой видимый и скрытый текст.
  3. Будет доступно управление элементами с клавиатуры и других устройств.
  4. Уменьшается количество javascript кода, который нужно подгружать, что увеличивает скорость загрузки страницы, скорость обработки и корректность.
  5. Улучшаются показатели в Lighthouse, Google PageSpeed и других подобных инструментах.
  6. Работает при выключенном javascript.

Минус:

  1. Старые браузеры не знают таких тегов и не будут скрывать информацию.

HTML:

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

К сожалению, у дефолтного маркера есть два недостатка:

  1. Старые браузеры его не видят.
  2. Вебкит баузеры не позволяют менять символ маркера.

По этой причине, дефолтный маркер надо спрятать и создать свой.

Рассмотрим первый пример Details/Summary с измененным текстовым маркером:

Дефолтным маркерам делаем display:none и показываем альтернативный при помощи summary:before

summary:focus — обводка при помощи box-shadow, это нужно для клавиатуры, чтоб видно было активный элемент и можно было перемещаться клавишей таб и открывать и закрывать при помощи пробела.

Для тега summary я поставил display:inline-block — это чтоб он не растягивался на всю ширину и были кликабельными только слова, а не вся строка.

Текстовый маркер справа + простейшая анимация текста и маркера:

В новом примере я использую для маркера summary:after вместо summary:before, для того чтоб он отображался справа.

Анимация маркера при помощи transform: scale(1,-1);

Всем элементам, которые находится после summary, ставлю анимацию плавного появления при помощи animation: sweep .5s ease-in-out;

Svg маркер + анимация поворота:

Summary:before пришлось серьезно переделать:

  1. Поставить position: absolute; left: .3em; top: .4em; width: 1em; height: 1em;
  2. Текстовому маркеру надо обязательно поставить color: transparent; иначе он будет виден.
  3. Картинку вешаем при помощи background.

Так же нужно у summary поставить отступ padding-left: 1.5em, чтоб текст и иконка не накладывались друг на друга.

Ну и добавляем transform: rotateZ(90deg) для красивого поворота стрелки.

Читайте также:  Тойота супра без спойлера

Если нам нужна svg иконка справа, то нужно поменять summary:before и вместо left поставить right.

Для summary поставить padding-right: 1.5em;

Давайте теперь сделаем один из наиболее распространенных примеров создания аккордиона, где будет иконка слева, фон, тени, эффекты:

Svg маркер справа + эффект зеркального поворота стрелки:

Теперь вы можете создавать красивые аккордионы, спойлеры и faq, без JavaScript, на чистом HTML5 и CSS.

Прежде чем убирать outline, 100 раз подумайте, чем вы можете его заменить, чтоб человек мог видеть фокус и мог перемещаться с клавиатуры или других устройств.

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

С уважением, создатель конструктора лэндингов для фрилансеров CMS cPortfolio

Источник

LiveInternetLiveInternet

Цитатник

5 ПРОВЕРЕННЫХ СПОСОБОВ УСКОРИТЬ ПОЯВЛЕНИЕ КОРЕШКОВ У РАСТЕНИЙ 5 проверенных способов ускорить .

5 ПРОВЕРЕННЫХ СПОСОБОВ УСКОРИТЬ ПОЯВЛЕНИЕ КОРЕШКОВ У РАСТЕНИЙ 5 проверенных способов ускорить .

Векторные бордюры на прозрачном фоне.

фоны бесшовные плавающие

декоративные элементы разделители

Метки

Рубрики

  • (0)
  • (0)
  • (0)
  • Анимация (15)
  • Аудиокниги (1)
  • Баннеры (3)
  • Блюда из рыбы (32)
  • Блюда из творога (11)
  • Бордюры зимние (1)
  • Бордюры цветочные (7)
  • Бродилки (38)
  • В мире прекрасного (47)
  • Варенья (4)
  • Видео (45)
  • Все для блога (81)
  • Все для детей (100)
  • Всё о блоге ЖЖ (11)
  • Всё о ютубе (1)
  • Вторые блюда (83)
  • Выпечка (302)
  • Кремы (2)
  • ПАСХА (4)
  • Вязание крючком (194)
  • Вязание на спицах (115)
  • Генераторы (88)
  • ГИФКИ (15)
  • Градиенты (22)
  • Дача (37)
  • День Победы (6)
  • День рождения, праздники, пожелания (31)
  • Десерт (15)
  • Диеты (12)
  • ЖЕМЧУЖИНЫ МЫСЛЕЙ (1)
  • Заговоры (3)
  • Заготовки на зиму (74)
  • Закуски (45)
  • Здоровые сосуды (15)
  • Здоровье (314)
  • Лечение РАКА (1)
  • Интерьер (7)
  • Информеры (15)
  • ИСКУССТВО (1)
  • История (3)
  • Календари (3)
  • Клипарт (205)
  • ВУАЛЬ (2)
  • Декор (5)
  • Клипарт «Бантики» (2)
  • Клипарт «Города» (1)
  • Клипарт «Девушки» (9)
  • Клипарт «Кружева» (2)
  • Клипарт «Пейзаж» (16)
  • Клипарт «Цветы» (13)
  • клипарт 9 Мая (1)
  • Клипарт зимний (11)
  • Клипарт осенний (12)
  • Клипарт осенний (1)
  • Клипарт танцующие пары (1)
  • клипарт школьный (1)
  • КЛИПАРТНОВОГОДНИЙ (7)
  • Украшалки маленькие (5)
  • Клипарт «Детский» (6)
  • кнопочки-переходы (6)
  • Коллажи (11)
  • Красота и здоровье (41)
  • Кулинария (116)
  • Кулинарные сайты (3)
  • Лекарственные препараты (2)
  • Магия (18)
  • Мои шпаргалки (333)
  • МУЗАЛЬБОМЫ (117)
  • Музыка (150)
  • Музыкальные открытки (3)
  • Музыкальные сайты (2)
  • Надписи (25)
  • Напитки (5)
  • Напитки (3)
  • Народная медицина (149)
  • Натюрморты (40)
  • Новый год, рождество (192)
  • Открытки (92)
  • Открытки «Для тебя» (3)
  • Открытки «Осень» (6)
  • Открытки «с Новым годом» (1)
  • Открытки — коллажи (5)
  • Открытки «с Новым годом» (0)
  • Пейзажи (3)
  • Плееры музыкальные (48)
  • Подарки (2)
  • Поздравления друзьям (26)
  • Полезности (106)
  • Полезные ссылки (51)
  • Помощь блогеру (75)
  • Поэзия (2)
  • Праздники (8)
  • День Победы (5)
  • Природа (3)
  • Притчи (3)
  • Программы (7)
  • Работы мастеров (36)
  • Разделители (82)
  • Разделители голубые (1)
  • Разделители ЗИМНИЕ (6)
  • Разное (28)
  • Рамки (536)
  • Рамочки в клетку (2)
  • Рамочки для текста (186)
  • Рамочки зимние (37)
  • Рамочки кулинарные (5)
  • Рамочки летние (11)
  • Рамочки осенние (3)
  • Рамочки пасхальные (1)
  • Рамочки праздничные (24)
  • Рамочки простые (1)
  • СВИТКИ ДЛЯ ТЕКСТА (4)
  • РАМКИ ПУСТЫЕ (27)
  • Рамки, фоны для коллажей (4)
  • Религия (26)
  • Рукоделие (27)
  • ТЕХНИКИ/цветы из лент, цветы из ткани (5)
  • Салаты (42)
  • Семья, любовь, отношения (16)
  • Скелеты рамочек, уроки (7)
  • Скраб-наборы (3)
  • Смайлики (9)
  • Соусы (5)
  • Спасибо, пожалуйста (15)
  • Справочники (2)
  • Стихи (71)
  • Стихи о любви (21)
  • Схемы (212)
  • Схемы весенние (4)
  • Схемы зимние (30)
  • Схемы Новогодние (9)
  • Схемы осенние (2)
  • Только для меня (51)
  • УГОЛКИ (2)
  • Уроки (143)
  • ФЕЕРВЕРКИ (1)
  • Фильмы (85)
  • Флешки (54)
  • Флеш материал (12)
  • Фоны (335)
  • Фоны осенние (6)
  • Фоны природа (3)
  • Фоны «Герберы» (1)
  • Фоны «Тюльпаны» (1)
  • Фоны «Шёлк» (3)
  • Фоны — БОРДЮРЫ (4)
  • Фоны бесшовные (6)
  • фоны в клетку (1)
  • Фоны зелёные, салатовые, горчичные (7)
  • Фоны ЗИМА (12)
  • Фоны зимние, новогодние (2)
  • ФОНЫ КОСМОС (1)
  • Фоны красные, розовые (3)
  • Фоны кричневые, жёлтые, оранжевые (4)
  • Фоны однотонные (36)
  • Фоны плавающие (3)
  • Фоны плавающие, глитерные, анимированные (23)
  • Фоны прозрачные (33)
  • Фоны радужные, серебристые, золотистые (4)
  • Фоны снег, анимация (9)
  • Фоны фиолетовые, голубые, синие (6)
  • Фоны цветы (12)
  • Фоны черные (2)
  • Фоны чёрные, белые (1)
  • Фоны-обводки (11)
  • Фоны-футажи (11)
  • Фоны для рамочек (42)
  • Формулы (65)
  • Худеем (27)
  • Часы (11)
  • Шитьё (62)
  • Шрифты (21)
  • Эпиграфы (1)
  • Это интересно (60)
  • Юмор (5)
  • ЮТУБ (1)
Читайте также:  Какую лебедку лучше ставить

Приложения

  • Я — фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
  • ОткрыткиПерерожденный каталог открыток на все случаи жизни
  • Всегда под рукойаналогов нет ^_^ Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее
  • СтенаСтена: мини-гостевая книга, позволяет посетителям Вашего дневника оставлять Вам сообщения. Для того, чтобы сообщения появились у Вас в профиле необходимо зайти на свою стену и нажать кнопку «Обновить
  • Смешные цитаты и ICQ статусыСмешные цитаты и ICQ статусы из социального цитатника basher.ru

Музыка

Ссылки

Фотоальбом

Поиск по дневнику

Подписка по e-mail

Друзья

Постоянные читатели

Сообщества

Статистика

Как спрятать часть моей записи под ссылкой? Что такое lj-cut и lj-spoiler?

Как спрятать часть моей записи под ссылкой? Что такое lj-cut и lj-spoiler?

Вопрос № 75. Как спрятать часть моей записи под ссылкой? Что такое lj-cut и lj-spoiler?

Тэг позволит вам целиком или частично скрыть запись под ссылкой. (или кат) не работает в комментариях.

Кат работает (текст скрыт): на главной странице вашего журнала, на страницах лент друзей, на второй и последующих страницах комментариев к записи, на страницах просмотра за определённую дату, а также на странице самых новых записей в ЖЖ.
При желании кат можно раскрыть прямо на одной из этих страниц: для этого нажмите на ссылку ката либо используйте сочетание клавиш «ctrl alt +». Чтобы свернуть кат, нажмите на кнопку «Свернуть», которая появится вместо текста ссылки ката либо воспользуйтесь сочетанием клавиш «ctrl alt –». Чтобы кат корректно разворачивался на этих страницах, в вашем браузере должен быть включен Java Script.
Нажатие на кат учитывается в статистике просмотров.

Кат не работает (текст, убранный под кат, виден): на странице предварительного просмотра записи (на нее можно попасть по ссылке «Просмотр» на странице создания записи), на первой странице комментариев к записи.

Как поставить кат?

  • Визуальный редактор: выделите текст и другое содержимое, которое вы хотите скрыть (мышкой или с клавиатуры), затем нажмите кнопку «Кат» ( ). В открывшемся окне можете заменить текст «Читать дальше» на фразу, которая станет ссылкой на скрытый отрывок. В этом режиме редактора часть, спрятанная под кат, будет отображаться в окне редактирования записи между двумя пунктирными линиями с изображением половин ножниц.
  • Редактор HTML: наберите перед текстом, который хотите спрятать, заменив «Read more» фразой, которая станет ссылкой на скрытый отрывок. Если хотите продолжать запись открытым текстом по окончании скрытого отрывка, в конце скрываемого текста наберите .
  • Программа-клиент: многие программы-клиенты предоставляют простые способы использования тэга . За информацией по работе клиента обратитесь к его документации или пунктам меню.

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

Тэг работает и в записях, и в комментариях. Как и в случае с катом, он скрывает часть текста под ссылкой. Когда кто-либо просматривает запись на своей странице друзей и видит в ней , скрытый под ссылкой текст будет раскрыт по клику на той же самой странице (вместо загрузки отдельной страницы, как в случае с катом). Даже если пользователь зайдет под кат, часть текста под спойлером останется скрыта.

Как создать спойлер?

  • Визуальный редактор: выделите текст, который вы хотите скрыть (мышкой или с помощью клавиатуры), затем нажмите на кнопку «Спойлер» (http://stat.livejournal.com/js/ck/skins/v2/icons-new.png?v=17019) no-repeat 0 -325px;» width=»16″/>). В открывшемся окне замените текст «Нажмите, чтобы прочитать» на фразу, которая станет ссылкой на скрытый отрывок. В режиме визуального редактора часть, скрытая под спойлером, будет отображаться в окне редактирования записи между двумя пунктирными линиями с изображением стрелочек.
  • Редактор HTML / Форма комментария: используйте тэг Этот текст будет скрыт .

Источник

Поделиться с друзьями
Тюнинг авто