کد نمایش متن مخفی شده

کد نمایش متن مخفی شده  یا همون ادامه مطلب با این کد شما میتوانید در سایت خود یک صفحه ایجاد کنید که متنهای طولانی را در این کد قرار دهید تا کاربر برای دیدن ان روی دیدین بیشتر کلیک کنه و بقیه مطلب براش نمایان بشه اینجوری لازم نیست تا کاربر برای پیدا کردن مطلب مورد نظر خودش کل اسکرولو بکشه پایین تا به مطلب مورد نظرش برسه و از سایت خسته بشه.

این کد با css ساخته شده و بسیار بسیار کاربردیه.برای اینکه متوجه منظورم بشید بهتره دمو کد رو ببینید تا بفهمید کاربرد این کد چیه.

کد نمایش متن مخفی شده

دمو کد

<center>
<style>
.read-more-state {display: none; }
.read-more-target {opacity: 0; max-height: 0; font-size: 0; transition: .25s ease; }
.read-more-state:checked ~ .read-more-wrap .read-more-target {opacity: 1; font-size: inherit; max-height: 999em; }
.read-more-state ~ .read-more-trigger:before { content: 'مشاهده بیشتر'; }
.read-more-state:checked ~ .read-more-trigger:before { content: 'مشاهده کمتر'; }
.read-more-trigger { cursor: pointer; display: inline-block; padding: 0 .5em; color: #726FAC; font-size: 15px; line-height: 2; border: 1px solid #726FAC; border-radius: .25em; }
</style>
<div class="Titr1"><div class="F4"><h2>عنوان متن</h2></div></div>
<div class="Kadr1"><div class="F5"><input type="checkbox" class="read-more-state" id="post-2" />
<p class="read-more-wrap">
متن نمایشی
<br><span class="read-more-target">
متن نمایشی مخفی شده<br>
متن دوم<br>
متن سوم<br>
کدبازان</span></p><label for="post-2" class="read-more-trigger"></label></div></div><div style='display:none'><h2><a title="codebazan" href="https://codebazan.ir">codebazan</a></h2></div>

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *