سلام.
قابلیت Smooth scroll که توی گوگل سرچ کنید کدهای زیادی براتون میاد. ولی چون انواع مختلفی دارن و ممکنه تنها برخی از اون کدها با قالبتون سازگاری داشته باشند باید خودتون تست کنید و کد مناسب رو انتخاب کنید.
برای اون کلید “نمایش بیشتر” اون رو میشه با جاوا اسکریپت ایجاد کرد.
کافیه یک لینک برای همین متن نمایش بیشتر بسازید، قسمتی که توضیحات نوشته میشه رو با یک آی دی مشخص کنید و بعد با کد جاوا اسکریپت بیاییم اون قسمت رو Toggle کنیم که باز و بسته بشه. در واقع اینکار با تغییر ارتفاع اون محدوده انجام میشه. حالا یه مقدار هم CSS چاشنی کار میشه و اون هایلایت پایین اضافه میشه.
مثلا این نمونه رو ببینید:
https://freakyjolly.com/demo/ReadMore/customReadMore.html
در لینک بالا روی لینک های آبی Read more کلیک کنید دقیقا همون قابلیتی هست که نیاز دارید. حالا برای داشتن این قابلیت می تونید آموزش ساختن حالت بالا رو توی لینک زیر مطالعه کنید:
https://www.freakyjolly.com/custom-jquery-function-read-more-and-read-less/
توی این لینک هم حالت های بیشتری برای بخش جاوا اسکریپت این قابلیت معرفی کردن کاربران:
https://stackoverflow.com/questions/25341429/jquery-read-more-read-less-how-to-replace-text
توی این لینک هم به زبان ساده تر و کامل تر توضیح داده شده که چطور چنین قابلیتی بسازید که پیشنهاد من استفاده از این لینک هست:
https://www.w3schools.com/howto/howto_js_read_more.asp