Красив панел със скрит текст

Поздрави, приятели. Отново искам да ви предложа друга възможност, с която красиво да  оформите като скрит текст или част от него в блога си. Това не е първата публикация по тази тема. Съветвам ви да видите подобен ефект в тези публикации.
Пример за това, което ще бъде обсъдено днес и може да се види, като кликнете върху бутона в тази публикация на един от тестовите ми блогове.
Взех фрагмент от текст и го скрих вътре. Удобно е да приложите този ефект, когато самата публикация е много дълга. Или имате желание да се направите пояснение, допълнение или лирическо отклонение към публикацията си по този начин. Красиво изглежда и в притурката HTML/JavaScript. Всичко зависи от вашето въображение. Панелът е адаптиваен, ширината му е функция на мястото, което му отреждате в публикацията си или притурката.

Ето и целия код

<style type="text/css">

#paneltovik {display:block}

#panel {

background-color:#BFFFFE;

border:2px solid:#a7cc54 ;

border-width:2px 2px 0 2px;

overflow:auto;

margin:0;

padding:10px;

color:#111;

font:normal 18px 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 #fff;

padding:7px 15px;

background-color:#F2FEBF ;

border-top:3px solid #a7cc54;

color:#000000;

text-align:center;

font:bold 18px 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:#F2FEBF #F2FEBF transparent#F2FEBF ;

}

</style>

<script src="https://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 скрипта в кода, който е маркиран в червено. Ако след инсталирането нещо се обърка, проверете дали вече сте го инсталирали в кода на темата. В този случай редът, маркиран в червено, трябва да бъде премахнат от кода на панела. С останалите уточнения в кода мисля, че всичко е ясно.

Редактирайте и тествайте с помощта на този редактор.

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога ми на:


Здраве за всички вас! Не забравяйте да правите добро на други хора!