رفتن به مطلب

ساخت متن با دکمه مشاهده بیشتر


پست های پیشنهاد شده

در در ۱۴۰۰/۱۱/۲۴ در 23:53، milad-day گفته است :

به کمک CSS و Javascript قابل پیاده سازی هستش، قبلا در انجمن سوال مشابهی براش مطرح شده.

 

کدوم بخش انجمن؟ لطفا لینکش بفرستید

لینک به ارسال
در 14 ساعت قبل، milad-day گفته است :

 

البته موردی که دوستمون خواستن متفاوت تر از این تاپیک هست.

 

در در ۱۴۰۰/۱۱/۲۴ در 12:11، seyedmohsen-mot گفته است :

سلام، چطوری میتونم یه همچین چیزی در سایت بسازم؟

Screenshot 2022-02-13 081451.png

Screenshot 2022-02-13 081546.png

برای اینکار از  کدهای زیر استفاده کنید: 

<!-- CSS Codes !-->
.text-box {
	height: 100px;
}

.text-box.open {
	height: inherit;
}

<!-- HTML Codes !-->
<div class="text-box">
  نوشته های شما در این محل قرار میگیره!
</div>
<button class="more">متن کامل</button>

<!-- JS Codes !-->
$('.more').click(function() {
	$('.text-box').toggleClass('open');
});

فقط توجه داشته باشید اگه دیدین که وقتی کلیک میکنید پنل باز نمیشه مقدار inherit رو با auto جایگزین کنید.

درضمن من ساختار و فرستادم و شما باید این کدها رو تو جای مناسب خودشون قرار بدین.

موفق و پیروز باشید.

ویرایش شده توسط هادی خانزاده
لینک به ارسال
در در ۱۴۰۰/۱۱/۲۸ در 09:28، هادی خانزاده گفته است :

البته موردی که دوستمون خواستن متفاوت تر از این تاپیک هست.

 

برای اینکار از  کدهای زیر استفاده کنید: 


<!-- CSS Codes !-->
.text-box {
	height: 100px;
}

.text-box.open {
	height: inherit;
}

<!-- HTML Codes !-->
<div class="text-box">
  نوشته های شما در این محل قرار میگیره!
</div>
<button class="more">متن کامل</button>

<!-- JS Codes !-->
$('.more').click(function() {
	$('.text-box').toggleClass('open');
});

فقط توجه داشته باشید اگه دیدین که وقتی کلیک میکنید پنل باز نمیشه مقدار inherit رو با auto جایگزین کنید.

درضمن من ساختار و فرستادم و شما باید این کدها رو تو جای مناسب خودشون قرار بدین.

موفق و پیروز باشید.

من جاوا اسکریپت بلد نیستم، کد ها داخل این سایت تست کردم جاواسکریپ کار نکرد، مشکل از چی هست؟

https://codepen.io/kirillkrasin/pen/YveLeK

لینک به ارسال
در 17 ساعت قبل، seyedmohsen-mot گفته است :

من جاوا اسکریپت بلد نیستم، کد ها داخل این سایت تست کردم جاواسکریپ کار نکرد، مشکل از چی هست؟

https://codepen.io/kirillkrasin/pen/YveLeK

سلام و عرض ادب

خب کلا چیزی که شما خواستین با چیزی که تو این لینک هست خیلی متفاوته. اینو وقتی رو دکمه کلیک میکنی یدونه پنل رو به صورت پاپ آپ نشون میده ولی اون چیزی که شما خواستین ی چیز دیگه اس.

اگه جاوا اسکریپت بلد نیستید توصیه میکنم بدین ی نفر براتون حل کنه.

موفق و پیروز باشید.

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...