سلام دوست عزیز

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

آیا شما یک صفحه کلی دارید و می خواهید ای کد ها روی آن اجرا شود ؟

اگر اینگونه است ، از Java Script استفاده کنید.

ابتدا باید استایل های مورد نیاز و استایل هایی که برای المان در نظر دارید را در css وارد کنید.

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

با کلاس chekmikonam کار میکنیم :

.chekmikonam{
	display: none;
	position: absolute;
}

حال باید در جاوااسکریپت المان مورد نظر رو انتخاب کنیم.

برای مثال شما میخواهیم div با کلاس chekmikonam  رو با کلیک بر روی button خاصی نمایش بدیم.

پس المانی با کلاس chekmikonam رو انتخاب میکنیم.

var box = document.getElementsByClassName("chekmikonam")[0];

اون رو درون متغیری بنام box انتخاب کردیم و ایندکس [0] در آخر کد نشان از این است که اولین المان با کلاس chekmikonam رو میخواهیم انتخاب  بکنیم.

حالا باید button ای که میخواهیم وقتی رو آن کلیک شد رو انتخاب کنیم.

فرض میکنیم ایدی اون show است.

var btn = document.getElementById("show");

اون رو درون متغیری بنام btn انتخاب کردیم.

حالا باید برای button یک رخداد (Event) کلیک تعریف کنیم و تابعی را برای آن در نظر بگیریم که وقتی رو button کلیک شد ، المان مورد نظر نمایش داده شود.

btn.addEventListener("click",function(){
    
box.style.display="block";
})

برای اینکه المان را مخفی کنید کافیست یک رخداد دیگر یا... بسازید که مقدار display المان مورد نظر را none کند

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

برای مثال در jQuery همین کار را با تابع ()fadeIn یا ()show یا ()slideDown میتوانیم بصورت انیمیشنی و زیبا انجام دهیم

مثال:

$("#btn").click(function(){
	$(".chekmikonam").fadeIn();
})

موفق باشید