<div class="radikalwp-cp-acc"><details open><summary>چطور کدها را استفاده کنم؟<//summary><p>کد را کپی کنید و در فایل CSS یا بلوک HTML المنتور بچسبانید؛ پیش‌نمایش زنده همان خروجی نهایی است.<//p><//details><details><summary>روی قالب‌های من کار می‌کند؟<//summary><p>بله، همه اسنیپت‌ها با HTML و CSS خالص نوشته شده‌اند و مستقل از قالب هستند.<//p><//details><//div>

.radikalwp-cp-acc { width: 320px; display: grid; gap: 9px; }
.radikalwp-cp-acc details {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  overflow: hidden;
  transition: border-color .25s ease;
}
.radikalwp-cp-acc details[open] { border-color: #a5b4fc; }
.radikalwp-cp-acc summary {
  padding: 13px 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.radikalwp-cp-acc summary::-webkit-details-marker { display: none; }
.radikalwp-cp-acc summary::after {
  content: '+';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #4f46e5;
  font-size: 17px;
  font-weight: 400;
  transition: transform .25s ease;
}
.radikalwp-cp-acc details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.radikalwp-cp-acc p {
  margin: 0;
  padding: 0 16px 14px;
  font-size: 12.5px;
  line-height: 2.1;
  color: #64748b;
}