مستخدم:CodeIter/accordion.css

/**
 *
 * HTML Expand Collapse Text without JavaScript
 * @origin author : Muhammad Asif
 * @author        : Mohamed Amin Boubaker (https://github.com/CodeIter | https://ar.wikipedia.org/w/index.php?title=User:CodeIter)
 * @see           : https://codeconvey.com/html-expand-collapse-text-without-javascript
 * @license       : MIT license
 *
 */

/**
 *
 * ALERT ! It seem that ar.wikipedia.org does not support this markup example !
 *
 * import with css:
 *
 *     ```css
 *
 *     @import "https://ar.wikipedia.org/w/index.php?title=مستخدم:CodeIter/accordion.css&action=raw&ctype=text/css";
 *
 *     ```
 *
 * Required HTML markup (without ``` and without leading * ):
 *
 * I- Radio input: Close other opened accordion when select a new one but not toggle same accordion.
 *
 * ```html
 *
 *   <section class="accordion">
 *     <input type="radio" name="collapse" id="handle1" checked="checked">
 *     <div class="handle">
 *       <label for="handle1">The Visible Short Heading</label>
 *     </div>
 *     <div class="content">
 *       <p>Your detailed contents...</p>  
 *     </div>
 *     <input type="radio" name="collapse" id="handle2" checked="checked">
 *     <div class="handle">
 *       <label for="handle2">The Second Visible Short Heading</label>
 *     </div>
 *     <div class="content">
 *       <p>Your second detailed contents...</p>  
 *     </div>
 *   </section>
 *
 * ```
 *
 * II- Checkbox input: Toggle (show / hide) accordion contents but not close others.
 *
 * ```html
 *
 *   <section class="accordion">
 *     <input type="checkbox" name="collapse" id="handle1" checked="checked">
 *     <div class="handle">
 *       <label for="handle1">The Visible Short Heading</label>
 *     </div>
 *     <div class="content">
 *       <p>Your detailed contents...</p>  
 *     </div>
 *     <input type="checkbox" name="collapse" id="handle2" checked="checked">
 *     <div class="handle">
 *       <label for="handle2">The Second Visible Short Heading</label>
 *     </div>
 *     <div class="content">
 *       <p>Your second detailed contents...</p>  
 *     </div>
 *   </section>
 *
 * ```
 *
 */

/* @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/fontawesome.min.css"); */
@import ur("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/fontawesome.min.css");

.accordion > input[name="collapse"] {
  //left: -100vw; /* Behind the scene */
  display: none; /* recommended */
}

.accordion .content {
  background: White;
  overflow: hidden;
  //display: none; /* work, but CSS transition attribute (for smoothness) is not compatible with it. */
  height: 0; /* for smoothness, use "height: 0" instead of "display: none" */
  transition: 0.5s;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); /* black */
}

.accordion label {
  color: White;
  cursor: pointer;
  font-weight: normal;
  padding: 10px;
  background: DarkRed;

}

.accordion label:hover,
.accordion label:focus {
  background: MidnightBlue;
}

.accordion .handle label:before {
  font-family: FontAwesome;
  content: "\f107";
  display: inline-block;
  margin-right: 10px;
  font-size: 1em;
  line-height: 1.556em;
  vertical-align: middle;
  transition: 0.4s;
}

.accordion > input[name="collapse"]:checked ~ .handle label:before {
  transform: rotate(180deg);
  transform-origin: center;
  transition: 0.4s;
}

.accordion > input[name="collapse"]:checked ~ .content {
  //height: auto; /* will not expand contents smoothly */
  height: 380px;
  transition: height 0.5s;
}