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

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

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>

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

روش دوم

اضافه کردن دکمه و استایل css

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

کد زیر را به قسمت css سفارشی دکمه اضافه می کنیم.

#hiddenBlock.hide{
    display: inline-block;
    height: 0;
    opacity: 0;
    transition: opacity 320ms linear 3s;
}
#hiddenBlock.show{ 
    height:auto;
    opacity: 1;
    transition: opacity 320ms linear 3s;
}

نکته: کد css بالا با تاخیر 3 ثانیه می باشد (یعنی زمانی که روی دکمه کلیک کنید با تاخیر 3 ثانیه ای بخش داخلی را نمایش یا مخفی می کند) برای برداشتن این تاخیر کافیست مقدار transition را به صورت زیر وارد کنید.

transition: opacity 320ms linear 1s;

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

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

آیدی و کلاس سکشن داخلی

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

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

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

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

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

<script>
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelector('#showBlock a').addEventListener('click', function() {
let x = document.querySelector('#hiddenBlock')
if(x.classList.contains('show')){
  x.classList.remove('show');
  x.classList.add('hide')
}else{
  x.classList.add('show');
  x.classList.remove('hide')
}
})
});
</script>

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

المنتور پلاس

المنتور پلاس

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

  1. مژده مشهدی

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

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

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

  2. مژده مشهدی

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

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

  3. مبین سجادی

    سلام
    به همین کد چطوری میشه delay اضافه کرد
    تا مثلا 3 ثانیه بعد از کلیک بر روی دکمه اون بخش رو نمایش بده؟

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

    2. سلام
      مقاله به روز شد و روش جدید با امکان تنظیم تاخیر در نمایش/مخفی نمودن بخش به مقاله اضافه شد.
      لطفا بررسی نمایید.
      با تشکر از همراهی شما

      1. مبین سجادی

        خیلی متشکرم از این مطالب مفیدی که در سایت قرار میدید

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

پنج × 3 =