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

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

Share

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

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

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

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

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

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

اضافه کردن دکمه
تنظیم آیدی دکمه

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

#hiddenBlock {
    display: none;
}

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

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

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

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

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

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

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

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

<script>
document.addEventListener("DOMContentLoaded", function(event) {
  jQuery('#showBlock a').click(function(){
  var x = document.getElementById("hiddenBlock");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
  });
});
</script>

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

امتیاز دهید

لینک کوتاه

https://elementorplus.net/?p=1520

فهرست مطالب

المنتور پلاس

المنتور پلاس

این پست دارای 5 دیدگاه است

  1. مژده مشهدی

    سلام ارادت
    من مراحل بالا رو اجرا کردم ولی وقتی روی دکمه کلیک میکنم متن مرتب باز وبسته میشه راهنمایی کنید ممنون میشم

    1. سلام و عرض ادب
      اگه همه مراحل رو اجرا کرده باشید بدون هیچ مشکلی اجرا خواهد شد. یه بار دیگه مراحل رو چک کنید.
      در صورتی که مشکلتون برطرف نشد لطفا آدرس سایتتان رو از طریق تیکت ارسال نمایید تا بررسی کنیم.
      با تشکر

    2. سلام مجدد
      مطلب ویرایش شد و تغییراتی در کد داده شد.
      لطفا با کد جاوااسکریپت فعلی مجددا تست کنید.
      لینک دمو هم در انتهای مطلب قرار داده شد.
      سپاس از همراهی شما

  2. مژده مشهدی

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

    1. سلام
      همون طور که در دمو هم مشاهده می کنید کد به درستی کار می کنه.
      در صورت امکان می توانید دسترسی وردپرس سایت رو از طریق تیکت ارسال نمایید تا بررسی شود.
      با تشکر از همراهی شما

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

سیزده − 6 =