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

Share

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

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

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

روش اول:

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

از بین المان های المنتور، المان دکمه را به صفحه اضافه می کنیم و سپس در تب تنظیمات پیشرفته، قسمت 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>

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

المنتور پلاس

المنتور پلاس

15 پاسخ

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

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

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

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

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

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

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

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

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

  4. سلام و درود من می خواهم روی دکمه نوشته ای لینک بشود که متاسفانه نمی توانم نمونه آن را برای شما ارسال می کنم در صورت امکان به من کمک کنید که چگونه اینکار را انجام دهم با تشکر
    https://bootstrapmade.com/demo/Delicious/
    در این سایت در قسمت منوها روی دکمه سالاد که میزنید یک متن می آورد روی پیش غذا یک منو و روی دسر یک متن و روس همه کل منو را می آورد من می خواهم ببینم چطور در المنتور آن را طراحی کنم

    Check our tasty Menu
    در این قسمت متشکرم

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

  5. در ضمن این مخفی کردن المان را امتحان کردم فوق العاده عالی بود ولی سوال وقتی بخش المنتور غیر فعال می شود و روی بخش اصلی اینکار انجام شود دیگر نمیتوان بخش را دید راهکار دیدن بخش چیست؟

    1. سلام
      اگه منظور شما وقتی است که بخش مربوطه مخفی میشود چجوری باید آن را ویرایش کنیم راهکار اینه که اول همه تغییرات لازم رو انجام دهید و در آخر اون بخش رو پنهان کنید.
      منظورتون همین مورد بود؟

  6. با سلام خدمت شما ببخشید من چطوری می تونم زیر سکشن صفحه بندی کنم برای مثال عدد 1و2و3 بزارم و روی هر کدام کلیک شد محصولات اون صفحه رو نشون بده

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

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

نشانی ایمیل شما منتشر نخواهد شد.

20 − هفده =