نحوه مخفی کردن و نمایش المان ها با کلیک روی دکمه

Share

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در linkedin
اشتراک گذاری در print

ممکنه در بعضی سایت ها دیده باشید که با کلیک روی یک دکمه بخشی در زیر آن نمایان می شود و با کلیک مجدد دکمه، آن بخش مخفی می شود.

امروز قصد دارم در این آموزش نحوه مخفی کردن و نمایش المان ها را را با کلیک روی دکمه آموزش دهیم.

در این آموزش از افزونه زیر استفاده شده است:

اضافه کردن دکمه و بخش داخلی

از بین المان های المنتور، المان دکمه را به صفحه اضافه می کنیم و سپس در تب تنظیمات پیشرفته، قسمت id، شناسه showBlock را وارد نمایید.

المان دکمه
دکمه

کد css زیر را در قسمت css سفارشی وارد کنید

#hiddenBlock {
    display: none;
}

اضافه کردن بخش داخلی

بخش مربوطه که میخواید با کلیک دکمه نمایش داده شود را اضافه می کنیم و در تنظیمات پیشرفته در قسمت id مقدار hiddenBlock را وارد نمایید.

در این بخش داخلی هر محتوایی نیاز دارید می توانید قرار دهید. (به عنوان مثال: فرم، تصویر، ویدیو و یا هر چیز دیگری)

نکته: وقتی در قسمت id مقدار hiddenBlock را وارد می کنید این بخش مخفی خواهد شد، پس ابتدا محتوای مورد نظر خود را در این بخش قرار بدید و بعد شناسه مربوطه را وارد نمایید.

اضافه کردن کد های جاوا ‎اسکریپت

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

برای این منظور المان Html را به صفحه اضافه می کنیم. (بهتر است بالای دکمه قرار دهید) سپس کد زیر را در المان وارد کنید.

<script>
jQuery(document).ready(function( $ ){

   $('#showBlock').click(function() {
   $('#hiddenBlock').toggle("slow");
 });
});
</script>

خب حالا می تونید نتیجه کار رو ببینید، اگه در حین انجام این آموزش به مشکلی بر خورد کردید حتما در نظرات اعلام کنید تا راهنمایی کنم.

علی رحمانی

علی رحمانی

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

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

داستان المنتور پلاس

المنتورپلاس تقریبا از اوایل سال 97 کار خودشو به صورت تخصصی در حوزه آموزش های حرفه ای المنتور و ابزار های المنتوری شروع کرد.
در المنتورپلاس در کنار شما هستیم تا بدون کدنویسی، وبسایت های حرفه ای و زیبا خلق کنید و از آن لذت ببرید.

ما را در شبکه های اجتماعی دنبال کنید

با اطمینان خرید کنید

کلیه حقوق این وبسایت محفوظ است.

طراحی شده با المنتور توسط علی رحمانی