<p>قائمة تجريبية</p>
        <div>
           <a href="#" class="hide">إخفاء</a>
           <a href="#" class="show">إظهار</a>
           <ol id="list">
              <li>عنصر 1</li>
              <li>عنصر 2</li>
              <li>عنصر 3</li>
           </ol>
        </div>

html {
  direction: rtl;
}
.show {display: none; }
        .hide:focus + .show {display: inline; }
        .hide:focus { display: none; }
        .hide:focus ~ #list { display:none; }
        @media print { .hide, .show { display: none; } }