گاهی در طراحی یک صفحه، نیاز دارید تا یک بخش یا ستون، و یا حتی یک ویجت، بعد از کلیک بر روی یک دکمه نمایش داده شود. به این صورت بخش به صورت پیش فرض مخفی باشد.
در این آموزش نحوه نمایش یک بخش توسط دکمه را یاد می گیریم.
برای اجرای این آموزش، نیاز به افزونه جانبی زیر داریم:
نمایش دادن یک بخش با کلیک بر روی دکمه
تعیین یک شناسه برای بخش مورد نظر
بر روی بخش، ستون و یا ویجت کلیک کرده و در تب پیشرفته، گزینه شناسه CSS یک مقدار دلخواه وارد کنید. این مقدار برای مخفی کردن بخش و نمایش توسط دکمه انجام می شود.
در ایجا شناسه ما section_hide_b می باشد.
قرار دادن ویجت دکمه افزونه Jet Tricks
بعد از اینکه شناسه CSS بخش مورد نظرتان را تعیین کردید، به سراغ ویجت Read More از افزونه Jet Tricks بروید.
بعد از قرار دادن ویجت بالای بخش قبلی، در تنظیمات ویجت، شناسه CSS که در مرحله قبل تعیین کردید را اینجا وارد کنید. در اینجا می توانید بخش های مختلف دیگر را با شناسه های یکتا مشخص کرده و با زدن افزونه آیتم، بخش های دیگری را با کلیک بر روی دکمه نمایش دهید.
حال می توانید از بخش پیکربندی، متن دکمه، آیکون و انیمیشن نمایش را مشخص کنید. بعد از اینکه استایل دکمه را ویرایش کردید، صفحه را ذخیره کنید.
نتیجه به شکل زیر خواهد بود:
امیدواریم که از این ترفند هم به خوبی استفاده کرده باشید. اگر مشکلی در هنگام اجرای آموزش دارید از بخش نظرات سوال کنید.
یک سوال دارم اینکه بعد از به نمایش درآوردن چطور میشه با زدن بر روی همان دکمه سکشن نمایش داده شده مخفی گردد ؟
با سلام
با این روش امکانش نیست. ولی با بارگذاری مجدد صفحه بخش مخفی شده و مجدد با زدن دکمه نمایش داده میشود.
سلام ،کاش این آموزش ها به صورت ویدئو یا گیف بود بهتر
با سلام
ترفند ها به دلیل کم بودن مراحل و گاها با قرار دادن ویجت انجام می شود، به ویدئو نیازی ندارد.