Spoiler di Postingan

by Hm Ba

HTML

<body>  
  <div class='post-body'>
    <h2 class='post-title'>موضوع مخفي إضغط لترى </h2>
<div id="flippy"><button>المزيد لتستكشفه</button></div>
<div id="flippanel">
<p class="texty">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع، ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق، هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.
.</p>    
    <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع، ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق، هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.
.</p>     
    <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى...

CSS

body {
    background: #f9f9f9 url(http://4.bp.blogspot.com/-slIpCw8me28/VFTDpK5VZOI/AAAAAAAAGkg/1zr5U-PKryM/s1600/Fly%2BAr1web.png) 50% 0 no-repeat;
    font-size: 16px;
    color: #444;
    background-attachment: fixed;
}

h3 {
font-size: 20px;
font-weight: 400;
font-family:ge_dinar_tworegular;
text-align: center;
padding: 10px;
    position: relative;
margin: 15px auto;
background: #F25050;
border-bottom: 2px solid #DA4444;
border-radius: 3px 3px 5px 5px;
color: #fff;
width: 120px;
box-shadow: 0 0 3px #e5e5e5;
transition: all 0.5s ease-in-out;
}
h3 a {
color: #FFF;
text-decoration: none;
}
h3:hover {
 background: #DA4444; transition: all 0.5s ease-in-out;  color: #A31D1D;
}

.post-body h2 {
    color: #e25633;
    text-align: center;
    font-family:droid arabic kufi;
    font-weight: bold;

}

.post-body {
    max-width: 680px;
    margin: 20px auto;
    border: 10px solid #f0f0f0;
    padding: 15px 20px;
    background-color: #fff;
    color: #444;
}

.post-body img {
    max-width: 100%;
    height: auto;
}

.post-body iframe, iframe {
    max-width: 100%;
    margin: 0 auto;
}

p.vidv {
    text-align: center;
}

p.texty {
    font-weight: bold;
    font-size: 18px;
    color: crimson;
    text-align: center;
    margin: 10px auto;
    font-family: Electrolize,ge_ss_threeregular;
}

#flippy {
    text-align: center;
}

#flippy button {
    background: #50A1E5;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    border: none;
    border-radius: 3px;
    padding: 8px 16px;
    margin: 10px auto;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    cursor: pointer;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    transition: background 0.1s ease-in-out;
    font-family:droid arabic kufi;
}

#flippy button:hover {
    background: #6FADF4;
    outline: none;
}

#flippanel {
    padding: 1px;
    text-align: right;
    background: #f5f5f5;
    font-family: Electrolize,ge_dinar_oneregular;
    border: 1px dashed...

JavaScript

$(document).ready(function() {
    $("#flippy").click(function() {
        $("#flippanel").slideToggle("normal");
    });
});