أكورديون سؤال — إجابة باستخدام CSS فقط

أكورديون "سؤال — إجابة" باستخدام CSS فقط

أكورديون مصمم باستخدام CSS فقط، ويتم استخدامه لوظيفة الأسئلة الشائعة، حيث يتم كتابة السؤال، وعند النقر عليه يتم عرض الإجابة. في هذه المقالة، يتم تقديم أكورديون أصلي تم إنشاؤه باستخدام CSS فقط، حيث يتم استخدام وظيفته كعنصر قابل للتمديد أو الطي، وذلك باستخدام HTML وCSS فقط دون الحاجة إلى سكريبتات.

الميزة الكبرى ليست فقط عدم وجود سكريبتات أو مكتبات، ولكن أيضًا أن هذا الحل لا يشغل مساحة كبيرة مقارنة بالحلول المماثلة.

يمكنكم تثبيت هذا الكود، حيث نكتب في البداية الأسئلة الأكثر شيوعًا، وتحت العنوان يتم كتابة الإجابة التي تكون مخفية بشكل افتراضي. وبالتحديد، هنا يتم تقديم العناوين الخاصة بكم، وعند النقر عليها، يظهر المحتوى المقابل تلقائيًا المرتبط بهذا السؤال.

من حيث الترقيم، قمنا بإنشاء عدة علامات div لأسئلة مختلفة مع محتوى قابل للتمديد. استخدمنا علامة القائمة غير المرتبة لإنشاء قائمة غير مرتبة في جزء المحتوى القابل للتمديد.

ما هو قسم الأسئلة الشائعة؟

FAQ تعني الأسئلة الشائعة. هذا قسم يمكن للعميل من خلاله كتابة أسئلته وكذلك مشاركة تجربته في استخدام المنتجات. يسمح لك هذا بالرد على الأسئلة التي تظهر بشكل متكرر حول منتجاتك أو خدماتك. وجود قسم الأسئلة الشائعة على موقعك الإلكتروني له أيضًا العديد من المزايا الأخرى.

هذا الكود هو مثال لتصميم واجهة مستخدم تفاعلية باستخدام HTML وCSS. سأشرح كل جزء من الكود بالتفصيل:

الهيكل العام (HTML)

الكود يحتوي على قسم رئيسي (div) بكلاس opredeleniye، وهو يحتوي على:

عنوان رئيسي (h2) مع نص وعلامة span لإضافة تفاصيل إضافية.
مجموعة من العناصر التفاعلية التي تعتمد على input من نوع checkbox وlabel لعرض عناصر قابلة للطي (Toggle).

التصميم (CSS)

تهيئة عامة للصفحة:

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
}

يتم إزالة الهوامش (margin وpadding) وتعيين عرض الصفحة بنسبة 100% وارتفاعها ليكون مساويًا لارتفاع الشاشة (100vh).
يتم تعيين خط افتراضي للصفحة.

تهيئة العناصر العامة:

body * {  
  box-sizing: border-box;  
  outline: none;  
}

يتم تعيين box-sizing: border-box لجميع العناصر لضمان أن الحشو (padding) والحدود (border) لا تؤثر على الأبعاد الكلية للعناصر.
يتم إزالة الحدود الخارجية (outline) عند التركيز على العناصر.

تصميم القسم الرئيسي:

.opredeleniye {
  width: 50%;
  min-height: 100vh;
  padding: 5vmin 5vmin 5vmin 10vmin;
  float: left;
}

يتم تعيين عرض القسم بنسبة 50% من الصفحة.
يتم تعيين ارتفاعه ليكون مساويًا لارتفاع الشاشة على الأقل (min-height: 100vh).
يتم إضافة حشو (padding) باستخدام وحدات vmin لجعل التصميم متجاوبًا.

تصميم العنوان (`h2`):

h2 {
  color: #302f2f;
}

h2:before {
  content: "";
  background: url(https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico) no-repeat center center #f7f6f6;
  width: 1.25em;
  height: 1.25em;
  border-radius: 100%;
  display: inline-block;
  margin: 0 0.5em -0.3em 0;
  background-size: calc(1.5em);
}

يتم إضافة أيقونة قبل العنوان باستخدام :before.
الأيقونة تأتي من رابط خارجي وتكون دائرية الشكل.

تصميم العناصر التفاعلية (`input` و`label`):

input {display:none;}

label {
  width: 100%;
  float: left;
  background: #1f1f1f;
  outline: none;
  border: 0;
  margin: 0;
  padding: 0.65em;
  cursor: pointer;
  border-radius: 0.15em;
  overflow: hidden;
  color: #f7f6f6;
  font-size: 1.35em;
}

يتم إخفاء input من نوع checkbox لأنه يستخدم للتحكم في ظهور المحتوى.
يتم تصميم label لتبدو كزر تفاعلي مع خلفية داكنة ونص فاتح.

تصميم المحتوى المخفي (`kipodsa`):

.kipodsa {
  float: left;
  width: 100%;
  background: #302f2f;
  color: #e6e6e6;
  overflow: hidden;
  max-height: 0vmin;
  transition: max-height 0.75s ease 0s;
  margin-top: -0.5vmin;
  margin-bottom: 1vmin;
  border-radius: 0 0 0.5vmin 0.5vmin;
  border-bottom: 0.5vmin solid #1f1f1f;
}

يتم إخفاء المحتوى بشكل افتراضي عن طريق تعيين max-height: 0vmin.
يتم إضافة تأثير انتقالي (transition) لظهور المحتوى بسلاسة.

التفاعل مع `checkbox`:

input:checked + label + .kipodsa {
  max-height: 20vh;
  transition: max-height 0.75s ease 0s;
}

عند تحديد checkbox، يتم تغيير max-height لعرض المحتوى المخفي.

تصميم الروابط (`a`):

.kipodsa a {
  float: right;
  background: #356379;
  color: #f7f6f6;
  font-size: 0.8em;
  text-decoration: none;
  padding: 0.25em 0.5em;
  margin: 0.5vmin 0;
  border-radius: 0.15em;
  word-spacing: -0.25em;
}

يتم تصميم الروابط لتظهر كأزرار صغيرة مع خلفية زرقاء.

تصميم علامة "FREE" و"PRO":

label[for=vedsaka-0]:before,  
label[for=vedsaka-1]:before,  
label[for=vedsaka-2]:before {
  content: "FREE";
  font-size: 0.5em;
  background: #a2a2a2;
  padding: 0.25em 0.5em;
  font-weight: bold;
  margin: 0.4em 1em 0 0;
  float: left;
  color: #1f1f1f;
  border-radius: 0.25em;
}

يتم إضافة علامة "FREE" أو "PRO" قبل النص في label باستخدام :before.

التصميم المتجاوب:

@media (max-width:767px){
  .opredeleniye {
    width: 100%;
    padding: 5vmin !important;
    min-height: auto;
  }
}

يتم تعديل التصميم ليكون متجاوبًا على الشاشات الصغيرة (أقل من 767px).

التفاعل (JavaScript ضمني)

الكود يعتمد على checkbox للتحكم في ظهور المحتوى المخفي دون الحاجة إلى JavaScript. عند النقر على label، يتم تحديد checkbox، مما يؤدي إلى تغيير max-height لعرض المحتوى.

استخدامات الكود

يمكن استخدام هذا الكود لإنشاء قوائم تفاعلية أو أقسام قابلة للطي في موقعك.
يعتبر مثالًا جيدًا لتصميم واجهة مستخدم نظيفة وسهلة الاستخدام.

الكود كاملا


<div class="container">

	<h2>Pen View <span>with checkbox input</span></h2>
	
	<input type="checkbox" id="view-0">
	<label for="view-0">Editor View</label>
	<div class="content" id="content-0">
		<div> This is the place you actually write the code to make Pens. The standard editor is HTML, CSS, and JavaScript. <a target="_top" href="https://codepen.io/josetxu/pen/mdRgPLM">/ pen /</a></div>
	</div>
	
	<input type="checkbox" id="view-1">
	<label for="view-1">Full Page View</label>
	<div class="content" id="content-1">
		<div>A way to look at (or share) a Pen that uses almost the whole screen to show the preview, and doesn’t show the code. <a target="_top" href="https://codepen.io/josetxu/full/mdRgPLM">/ full /</a></div>
	</div>
	
	<input type="checkbox" id="view-2">
	<label for="view-2">Details View</label>
	<div class="content" id="content-2">
		<div>Shows a large preview of the Pen, but you can still turn on the code areas if you wish. Details has more social information about your Pen, like who has loved it, the comments, sharing buttons, the license, and more. <a target="_top" href="https://codepen.io/josetxu/details/mdRgPLM">/ details /</a></div>
	</div>
	
	<input type="checkbox" id="view-3">
	<label for="view-3">Debug View</label>
	<div class="content" id="content-3">
		<div>For looking at your Pen full-screen with no iframe. It’s only for logged in you (unless you’re PRO) , so it’s not great for sharing, but it’s great for debugging!  <a target="_top" href="https://codepen.io/josetxu/debug/mdRgPLM">/debug/</a></div>
	</div>
	
	<input type="checkbox" id="view-4">
	<label for="view-4">Live View</label>
	<div class="content" id="content-4">
		<div>A full-screen preview of your Pen that live updates as you code. For PRO members only. <a target="_top" href="https://codepen.io/josetxu/live/mdRgPLM">/live/</a></div>
	</div>
	
	<input type="checkbox" id="view-5">
	<label for="view-5">Collab Mode</label>
	<div class="content" id="content-5">
		<div>And Professor Mode are PRO-only views for working in real-time with other people. <a target="_top" href="https://codepen.io/josetxu/collab/mdRgPLM">/collab/</a></div>
	</div>
	
	<input type="checkbox" id="view-6">
	<label for="view-6">Presentation Mode</label>
	<div class="content" id="content-6">
		<div>PRO-only view using the Pen Editor on an overhead projector, so there are more options for changing the view and extra room. <a target="_top" href="https://codepen.io/josetxu/pres/mdRgPLM">/pres/</a></div>
	</div>
	
</div>
	
	
	
	
	
<div class="container">	
	
	<h2>Editor Layout  <span>with option input</span></h2>

	<input type="radio" name="lay" id="lay-1">
	<label for="lay-1">Left</label>
	<div class="content" id="layout-1">
		<div>The code editor is placed on the left. <a target="_top" href="https://codepen.io/josetxu/pen/mdRgPLM/left/">/left/</a></div>
	</div>
	
	<input type="radio" name="lay" id="lay-2">
	<label for="lay-2">Top</label>
	<div class="content" id="layout-2">
		<div>The code editor is placed on top. <a target="_top" href="https://codepen.io/josetxu/pen/mdRgPLM/top/">/top/</a></div>
	</div>
	
	<input type="radio" name="lay" id="lay-3">
	<label for="lay-3">Right</label>
	<div class="content" id="layout-3">
		<div>The code editor is placed on the right. <a target="_top" href="https://codepen.io/josetxu/pen/mdRgPLM/right/">/right/</a></div>
	</div>	

</div>


body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100vh;
	font-family: Arial, Helvetica, sans-serif;
}

body * { 
	box-sizing: border-box; 
	outline: none; 
}

.container {
    width: 50%;
    min-height: 100vh;
    padding: 5vmin 5vmin 5vmin 10vmin;
    float: left;
}

.container + .container {
	padding: 5vmin 10vmin 5vmin 5vmin;
}

h2 {
    color: #333;
}

h2:before {
	content: "";
	background: url(https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico) no-repeat center center #fff;
    width: 1.25em;
    height: 1.25em;
    border-radius: 100%;
    display: inline-block;
    margin: 0 0.5em -0.3em 0;
    background-size: calc(1.5em);
}

h2 span {
    font-weight: normal;
    font-size: 0.55em;
    float: right;
    margin-top: 1.3vmin;
    color: #8484841a;
    text-shadow: -1px -1px 0 #00000069;
}

input {display:none;}

label {
	width: 100%;
    float: left;
    background: #1f1f1f;
    outline: none;
    border: 0;
    margin: 0;
    padding: 0.65em;
    cursor: pointer;
    border-radius: 0.15em;
    overflow: hidden;
    color: #fff;
    font-size: 1.35em;
}

label:hover {
    background: #000;
}

input:checked + label {
	background: #000;
}

.content {
	float: left;
    width: 100%;
    background: #333;
    color: #e6e6e6;
    overflow: hidden;
    max-height: 0vmin;
    transition: max-height 0.75s ease 0s;
    margin-top: -0.5vmin;
    margin-bottom: 1vmin;
	border-radius: 0 0 0.5vmin 0.5vmin;
    border-bottom: 0.5vmin solid #1f1f1f;
}

label:hover + .content {
    border-bottom-color: #000;
}

.content > div {
	padding: 0.5em 0.75em;
    border-left: 0.25em dotted #fff;
    border-right: 0.25em dotted #fff;
    text-align: justify;
    font-size: 0.95em;
    color: #e6e6e6;
}

.content a {
    float: right;
    background: #356379;
    color: #fff;
    font-size: 0.8em;
    text-decoration: none;
    padding: 0.25em 0.5em;
    margin: 0.5vmin 0;
    border-radius: 0.15em;
    word-spacing: -0.25em;
}
}

.content a:hover {
    background: #0070ca;
}

.container + .container .content a {
    margin-top: 0;
}

input:checked + label + .content {
	max-height: 20vh;
	transition: max-height 0.75s ease 0s;
}


.container + .container input:checked + label + .content {
	max-height: 10vh;
}


label:after {
    content: "?";
    float: right;
    font-size: 0.75em;
    background: #333;
    color: #fff;
    font-weight: bold;
    border-radius: 100%;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    line-height: 1.5em;
    transition: all 0.5s ease 0s;
}
	
label:hover:after {
    background: #fff;
    color: #222;
}
	
input:checked + label:after {
    background: #fff;
    color: #222;
    content: "\00BB";
    transform: rotate(90deg);
    line-height: 1.25em;
    transition: all 0.5s ease 0s;
    text-align: center;
}
	
input:checked + label:hover:after {
    background: #fff;
    color: #222;
    transform: rotate(-90deg);
}


label[for=view-0]:before, 
label[for=view-1]:before, 
label[for=view-2]:before {
    content: "FREE";
    font-size: 0.5em;
    background: #a2a2a2;
    padding: 0.25em 0.5em;
    font-weight: bold;
    margin: 0.4em 1em 0 0;
    float: left;
    color: #1f1f1f;
    border-radius: 0.25em;
}



label[for=view-3]:before,
label[for=view-4]:before,
label[for=view-5]:before,
label[for=view-6]:before {
    content: "PRO";
    font-size: 0.65em;
    background: #e2c12b;
    padding: 0.25vmin 0.65vmin;
    font-weight: bold;
    margin: 0.4vmin 1vmin 0 0;
    float: left;
    color: #1f1f1f;
    border-radius: 0.25vmin;
}


input[type=radio]:checked + label:after {
    content: "?";
    transform: none;
    line-height: 1.5em;
}

label[for=lay-1]:before, label[for=lay-2]:before, label[for=lay-3]:before {
    content: "";
    background: 
		linear-gradient(90deg, #fff0 0vmin, #fff0 0.4em, #1f1f1f 0.4em, #1f1f1f 0.5em, #fff 0.5em), repeating-linear-gradient(0deg, #fff 0em, #fff 0.35em, #1f1f1f 0.35em, #1f1f1f 0.45em, #fff 0.45em, #fff 0.45em);
    width: 1.25em;
    height: 1.25em;
    float: left;
    margin-right: 0.35em;
    border-radius: 0.05em;
}
	
label[for=lay-2]:before {
    background: 
		linear-gradient(180deg, #fff0 0vmin, #fff0 0.4em, #1f1f1f 0.4em, #1f1f1f 0.5em, #fff 0.5em), repeating-linear-gradient(90deg, #fff 0em, #fff 0.35em, #1f1f1f 0.35em, #1f1f1f 0.45em, #fff 0.45em, #fff 0.45em)
}

[for=lay-3]:before {
    background: 
		linear-gradient(-90deg, #fff0 0vmin, #fff0 0.4em, #1f1f1f 0.4em, #1f1f1f 0.5em, #fff 0.5em), repeating-linear-gradient(180deg, #fff 0em, #fff 0.35em, #1f1f1f 0.35em, #1f1f1f 0.45em, #fff 0.45em, #fff 0.45em) !important
}







@media (max-width:767px){
	.container {
		width: 100%;
		padding: 5vmin !important;
		min-height: auto;
	}
}

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار

أكورديون سؤال — إجابة باستخدام CSS فقط

أكورديون "سؤال — إجابة" باستخدام CSS فقط

ما هو قسم الأسئلة الشائعة؟

الهيكل العام (HTML)

التصميم (CSS)

تهيئة عامة للصفحة:

تهيئة العناصر العامة:

تصميم القسم الرئيسي:

تصميم العنوان (`h2`):

تصميم العناصر التفاعلية (`input` و`label`):

تصميم المحتوى المخفي (`kipodsa`):

التفاعل مع `checkbox`:

تصميم الروابط (`a`):

تصميم علامة "FREE" و"PRO":

التصميم المتجاوب:

التفاعل (JavaScript ضمني)

استخدامات الكود

الكود كاملا

معاينة

Post a Comment

اذا كنت تبحث اوتبحثين عن عمل اضافي بجانب عملك مقابل مادي اتصل بنا

الدردشة وتساب

إرسال طلب

إنشاء زر تنزيل جميل ومثير للإعجاب على بلوجر

طريقة حذف الرمز ?m=1 في رابط مدونتك أو موقعك على بلوجر

كيفية إنشاء صندوق ملاحظات ملون على مدونة

اهم مكتبات خطوط لمدونات بلوجر

اضافة زر الماسنجر عائم علي مدونة بلوجر

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار

استكشف في مدونة أوعي وشك عالم الابتكار

أكورديون سؤال — إجابة باستخدام CSS فقط

أكورديون "سؤال — إجابة" باستخدام CSS فقط

ما هو قسم الأسئلة الشائعة؟

الهيكل العام (HTML)

التصميم (CSS)

تهيئة عامة للصفحة:

تهيئة العناصر العامة:

تصميم القسم الرئيسي:

تصميم العنوان (h2):

تصميم العناصر التفاعلية (input وlabel):

تصميم المحتوى المخفي (kipodsa):

التفاعل مع checkbox:

تصميم الروابط (a):

تصميم علامة "FREE" و"PRO":

التصميم المتجاوب:

التفاعل (JavaScript ضمني)

استخدامات الكود

الكود كاملا

معاينة

Post a Comment

اذا كنت تبحث اوتبحثين عن عمل اضافي بجانب عملك مقابل مادي اتصل بنا

الدردشة وتساب

إرسال طلب

اوعي وشك

تصميم العنوان (`h2`):

تصميم العناصر التفاعلية (`input` و`label`):

تصميم المحتوى المخفي (`kipodsa`):

التفاعل مع `checkbox`:

تصميم الروابط (`a`):