0

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

панел със скрит текст
Поздрави, приятели. Отново искам да ви предложа друга възможност, с която красиво да  оформите като скрит текст или част от него в блога си. Това не е първата публикация по тази тема. Съветвам ви да видите подобен ефект в тези публикации.
Пример за това, което ще бъде обсъдено днес и може да се види, като кликнете върху бутона в тази публикация на един от тестовите ми блогове.
Взех фрагмент от текст и го скрих вътре. Удобно е да приложите този ефект, когато самата публикация е много дълга. Или имате желание да се направите пояснение, допълнение или лирическо отклонение към публикацията си по този начин. Красиво изглежда и в притурката 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 скрипта в кода, който е маркиран в червено. Ако след инсталирането нещо се обърка, проверете дали вече сте го инсталирали в кода на темата. В този случай редът, маркиран в червено, трябва да бъде премахнат от кода на панела. С останалите уточнения в кода мисля, че всичко е ясно.

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

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

BGtop

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

Няма коментари :

Публикуване на коментар


Copyright © БЛОГ ЗА БЛОГОВЕ©2016- | All Rights Reserved
Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита