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

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

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

Вот весь код.

<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