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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

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

Я себе для того же самого сделала шорткодик (поскольку у меня блог 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 / Форма комментария: используйте тэг Этот текст будет скрыт .

Источник