إضافة قسم أسئلة شائعة لمدونة بلوجر بشكل رائع

<script>
jQuery(function() {
var $ = jQuery;
var faqTitle = $( &quot;.faq h3&quot; );
var answerFaq = $(&quot;.response&quot;);
faqTitle.click(function(e) {
e.preventDefault();
$(this).toggleClass(&#39;titleopen&#39;).next().slideToggle().toggleClass(&#39;open-close&#39;);
});
$( &quot;#showall&quot; ).click(function(e) {
e.preventDefault();
faqTitle.addClass(&#39;titleopen&#39;);
answerFaq.slideDown().addClass(&#39;open-close&#39;);
});
$( &quot;#hideall&quot; ).click(function(e) {
e.preventDefault();
faqTitle.removeClass(&#39;titleopen&#39;);
answerFaq.slideUp().removeClass(&#39;open-close&#39;);
});
});
</script>

<style>
.faq_container{
background: #f5f5f5;
padding: 20px;
border: 1px solid #e5e5e5;
border-radius: 10px;
}
 
#show_hide_wrap{
text-align: right;
}
 
#show_hide_wrap p{
font-size: 16px;
}
 
#showall, #hideall{
display: inline-block;
background: #fff;
border: 2px solid rgba(86, 77, 77, 0.18);
padding: 5px 5px;
line-height: 1.5;
margin-bottom: 20px;
font-weight: bold !important;
height: 25px;
}
 
#showall{
 margin-right: 20px;
}
 
#showall:hover, #hideall:hover{
background: #707070;
color: #fff;
}
 
.response{
display: none;
}
 
ul.faq, ul.faq li{
list-style: none !important;
}
 
.faq h3{
background: #fff;
padding: 10px 10px;
border: 1px solid #e5e5e5;
}
 
.faq h3:hover, .faq h3.titleopen{
background: #808080;
color: #fff;
}
 
.faq h3:after{
content: '+';
float: left
}
 
.faq h3.titleopen:after{
content: '-'
}
 
.faq_qtn{
cursor: pointer;
-webkit-transition: color .2s ease, background .2s ease;
-moz-transition: color .2s ease, background .2s ease;
-o-transition: color .2s ease, background .2s ease;
transition: color .2s ease, background .2s ease;
}
 
.para {
padding-top: 20px;
padding-right: 30px;
font-size: 18px;
text-align: justify;
line-height: 30px;
padding-left: 30px;
}
</style>

<div class="faq_container">
<div id="show_hide_wrap">
<div id="showall" class="faq_qtn">إظهار الجميع</div>
<div id="hideall" class="faq_qtn">إخفاء الجميع</div>
</div>
<ul class="faq">
<!-- القسم الاسئلة الشائعة Q&A -->
<li>
<h3 class="faq_qtn"> هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</h3>
<div class="response">
<p class="para">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق..</p>
</div>
</li>  
<!-- القسم الاسئلة الشائعة Q&A -->
<li>
<h3 class="faq_qtn">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</h3>
<div class="response">
<p class="para">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق..</p>
</div>
</li>  
<!-- القسم الاسئلة الشائعة Q&A -->
<li>
<h3 class="faq_qtn">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</h3>
<div class="response">
<p class="para">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق..</p>
</div>
</li>
<!-- القسم الاسئلة الشائعة Q&A -->
<li>
<h3 class="faq_qtn">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</h3>
<div class="response">
<p class="para">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق..</p>
</div>
</li>
<!-- القسم الاسئلة الشائعة Q&A -->
<li>
<h3 class="faq_qtn">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</h3>
<div class="response">
<p class="para">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق..</p>
</div>
</li>
<!-- القسم الاسئلة الشائعة Q&A -->
<li>
<h3 class="faq_qtn">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</h3>
<div class="response">
<p class="para">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق..</p>
</div>
</li>
<!-- القسم الاسئلة الشائعة Q&A -->
<li>
<h3 class="faq_qtn">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</h3>
<div class="response">
<p class="para">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق..</p>
</div>
</li>
<!-- القسم الاسئلة الشائعة Q&A -->
<li>
<h3 class="faq_qtn">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</h3>
<div class="response">
<p class="para">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق..</p>
</div>
</li>
<!-- يمكنك إضافة المزيد من تكرار الكود نفس الاكواد السابقة -->
</ul>
</div>

<li>
<h3 class="faq_qtn">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</h3>
<div class="response">
<p class="para">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق..</p>
</div>
</li>