Красивая выпадающая панель со скрытым текстом.

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



Пример того о чём сегодня пойдёт речь можно увидеть, перейдя по этой ссылке. Я взяла фрагмент сказки "Золотой ключик" и спрятала его внутри. Удобно применять такой эффект, когда сообщение само по себе очень длинное. Или же есть желание оформить таким образом цитату. Красиво это смотрится и в гаджете. Тут только всё зависит от вашей фантазии. Первое, что мне пришло ну ум, это оформить красиво какое-нибудь объявление на блоге. Или приветствие с информацией об авторе.

Вот весь код.

<style type="text/css">
#paneltovik {display:block}
#panel {
  background-color:#DBD7D7 ;
  border:2px solid:#a7cc54 ;
  border-width:2px 2px 0 2px;

  overflow:auto;
  margin:0;
  padding:10px;
  color:#111;
  font:normal 12px Times,Serif;
  -webkit-box-shadow:inset 0 0 7px#222 ;
  -moz-box-shadow:inset 0 0 7px#222 ;
  box-shadow:inset 0 0 7px#222 ;
  display:none;
}

.tombolpanel {
  position:relative;
  cursor:pointer;
  text-shadow:1px 1px 2px #000;
  padding:7px 15px;
  background-color:#8C9B8B ;
  border-top:3px solid #a7cc54;
  color:#e5e5e5;
  text-align:center;
  font:bold 14px Times,Sans-Serif;
  font-style:italic;
  -webkit-box-shadow:0 -1px 2px #222;
  -moz-box-shadow:0 -1px 2px #222;
  box-shadow:0 -1px 2px #222;
  -webkit-border-radius:0 0 14px 14px;
  -moz-border-radius:0 0 14px 14px;
  border-radius:0 0 14px 14px;
}

.tombolpanel:hover {color:#ccc}

.tombolpanel:after {
  content:'';
  position:absolute;
  top:100%;
  margin-top:-10px;
  left:5%;
  width:0;
  height:0;
  display:block;
  border-width:10px;
  border-style:solid;
  border-color:#DBD7D7 #DBD7D7 transparent#DBD7D7 ;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.tombolpanel').click(function() {
        $('#panel').slideToggle('slow');
        $('.tombolpanel span.in').toggle();
    });
});
</script>

<div id="paneltovik">
<div id="panel">тут весь текст который будет скрыт </div>
<div class="tombolpanel">
<span class="in">отображаемый на панели заголовок</span>
    <span class="in" style="display: none;">закрыть</span>
  </div>
</div>


Код вставляем в то место сообщения, в режиме HTML, где панель должна отображаться. Или же в любой гаджет HTML/JavaScript.
Обратите внимание на скрипт библиотеки jquery в коде. Если что-то у вас не получается при установке, проверьте. Возможно она у вас уже подключена.  В этом случае строку, выделенную красным цветом нужно убрать. С остальными подсказками думаю всё понятно.

Спасибо, что читаете мои шпаргалки. До новых встреч. Удачи всем.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email



28 комментариев:

  1. Пригодится, беру. Вика, пришла идея расположить такую фишку под фотографии с рукоделками. Можно туда сделать описание работы, например. А индексироваться такая фишка не будет, наверное, она же закрыта?

    ОтветитьУдалить
    Ответы
    1. Сама Доброта, то что скрыто под спойлером поисковики видят как обычный текст. Это скорее для красоты. У меня вопрос к тебе. Когда ты пишешь мне комментарий появляется капча или нет. и с какого браузера ты работаешь. Просто у одного пользователя проблема с этим возникла.

      Удалить
    2. У меня нет, только сейчас комментарий посмотрела, извини. Я пользуюсь разными, сейчас Мозиллой. А этот код сейчас попробую, копирую.

      Удалить
    3. Виктория, эта капча есть во всех продуктах гугл, даже в поиске. Где-то надо один раз доказать, что не бот (к примеру в поиске гугл), а в некоторых случаях (при комментировинии) надо постоянно выбирать эти картинки. Все решается просто: при нахождении и пользовании гугловскими сайтами, надо находится в аккаунте гугл. Сами можете проверить мою теорию: 1) выйдете из аккаунта гугл. 2) Если в хроме, то сотрите куки (можно не стирать, но есть вероятность, что благодаря кукам гугл знает что вы не бот и капчу вам не сунет). 3) Можно зайти с другого браузера, но при этом не заходить в аккаунт гугл. 4) Оставьте у себя комментарий как "аноним", или "имя/url".

      Проблемы с коментариями из-за браузеров и операционных систем. https://support.google.com/blogger/answer/42247?hl=ru&ref_topic=3339243&vid=1-635758549184623810-2659224972

      Удалить
    4. Вышел из аккаунта гугл (куки не трогал) и пишу Вам проверочный комментарий. Капча есть. Что и требовалось доказать.

      Удалить
    5. Это у гугла такая защита от спама.

      Удалить
    6. Да ладно уже Иван. Что есть. Уже надоело правда с ней разбераться. Кому надо и с капчой оставят комментарий.

      Удалить
  2. Ответы
    1. Татьяна, получилось. Или опять с трудом?

      Удалить
    2. Вика, цвета поменяла, а шрифт можно поменять, мелковато?

      Удалить
    3. А всё, нашла, шрифт тоже можно поменять и размер, всё работает! Мне нравится.

      Удалить
    4. Молодец, только хотела ответить, а ты уже справилась сама.

      Удалить
  3. Вика привет. Отличный вариант спойлера. У тебя самая первая ссылка не рабочая. У меня не получилось посмотреть, пустая страница.

    ОтветитьУдалить
    Ответы
    1. Ольга, ещё раз спасибо. Вот видишь не только у Ивана проблема. А за внимание ещё раз спасибо. Ссылку исправила.

      Удалить
  4. Вика, все равно пустая страница, в адресной строке "about:blank"

    ОтветитьУдалить
    Ответы
    1. Оль, сейчас нормально. Что-то у меня сегодня суетливый день такой. Приношу извинения за неудобства. Обновить статью забыла.

      Удалить
  5. Вика, мне этот вариант визуально больше всего понравился, но дался с трудом... Вроде бы все нормально, но у меня получается большой отступ после текста перед спойлером. http://corolesja.blogspot.com/2015/06/pervoklassnik.html

    ОтветитьУдалить
    Ответы
    1. Этот комментарий был удален автором.

      Удалить
    2. Убери закрывающийся тег br в режиме Html перед кодом.

      Удалить
    3. Вика, убрала закрывающийся тег, отступ не уменьшился. Как побороть это препятствие??

      Удалить
    4. Лариса, где я могу это посмотреть?

      Удалить
    5. http://fleshca2.blogspot.com.by/p/blog-page_29.html
      Ещё буду рада любым вашим рекомендациям, чтоб мой блог был лучше, содержательным и интересным:))

      Удалить
    6. Лариса, не нашла у Вас на блоге форму связи. В принципе всё нормально смотрится.Вероятнее всего.. У меня ниже есть форма связи- скопируйте и вышлете пожалуйста весь код вашего сообщения, где установлена панелька.
      А насчёт блога я потом и отпишусь Вам.

      Удалить
    7. Уберите в коде после последнего закрывающегося script тег /br -Это перед всеми DIVами.

      Удалить
    8. Отправила... А на счет формы связи, устанавливала не один код, но сообщение не отправляется:((

      Удалить
    9. Так попробуйте просто родную форму установить. Она здесь. Дизайн-добавить гаджет слева пункт-другие гаджеты-форма связи.

      Удалить
    10. Да, всё работает.. Искала сложное, когда простое рядом. Спасибо:))

      Удалить
    11. Лариса, так всегда и бывает. Хорошо, что всё хорошо. Рада за Вас.

      Удалить

Пользовательский поиск