Skip to main content

Native Accordion - HTML

 


Use details element to create native accordion, is so simple and effective without javascript.

Tap here to see more details
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius. Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim dicta aliquam porro maxime minima sed a ullam, aspernatur corporis. Debitis nemo dolores sit in nihil vero, necessitatibus eveniet labore velit numquam voluptatibus quia.

HTML

<details>
    <summary>
      Tap here to see more details
    </summary>

    <article>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius. Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim dicta aliquam porro maxime minima sed a ullam, aspernatur corporis. Debitis nemo dolores sit in nihil vero, necessitatibus eveniet labore velit numquam voluptatibus quia.
    </article>
  </details>
Labels:

Comments

Post a Comment

Popular posts from this blog

Input Range with CSS

  Use ::in-range and ::out-of-range pseudo-classes to style input depending on input value. DEMO 1 to 10 are valid. HTML < label > 1 to 10 are valid .</ label > < input type = "number" value = "1" min = "1" max = "10" > CSS input : in - range { background - color: limegreen; } input :out - of - range { background - color: orange; }
Post a Comment
Read more

Create Vertical Text - CSS

From the old internet, the direction of text is pretty much fixed on left-to-right. In modern CSS has addressed the issue and supports vertical text with ease. Right to Left Vertical Text Right to Left Vertical Text HTML <div class= "v-rl" > <p> Right to Left </p> <p> Vertical Text </p> </div> CSS .v-rl { writing - mode : vertical - rl; } Left to Right Vertical Text Left to Right Vertical Text HTML <div class= "v-lr" > <p> Left to Right </p> <p> Vertical Text </p> </div> CSS .v-lr { writing - mode : vertical - lr; } All Characters Upright All Characters Upright Ultraman ウルトラマン HTML <div class= "t-upright" > <p> All Characters </p> <p> Upright </p> <p> Ultraman ウルトラマン </p> </div> CSS .t-upright { writing - mode : vertical - rl; text - orie...
Post a Comment
Read more

Distortion Glitch Text Effect - CSS

  Use multiple text-shadow properly in CSS on a text by comma separating the values. DEMO Distortion CSS h2 { color : darkorange ; font-family : sans-serif ; font-size : 3.5em ; text-transform : uppercase ; text-shadow : -3px -3px 0 cyan , 3px 3px 0 pink ; }
Post a Comment
Read more