Search
 
SCRIPT & CODE EXAMPLE
 
CODE EXAMPLE FOR HTML

accordion

<details>
  <summary> Detailed description</summary>
   This is an accordion and you can use buttons here or whatever tag you want.
   ive stylized it a little to make it look more modern
   but the default should be good enough too
</details>

// css

details {
      border: 1px solid #aaa;
      border-radius: 4px;
      padding: 0.5em 0.5em 0;
    }
 
    summary {
      font-weight: bold;
      margin: -0.5em -0.5em 0;
      padding: 0.5em;
    }
 
    details[open] {
      padding: 0.5em;
      transition: all 0.5s;
    }
 
    details[open] summary {
      transition: all 0.5s;
      border-bottom: 1px solid #aaa;
      margin-bottom: 0.5em;
    }
 
    details > summary {
      list-style-type: "+";
      cursor: pointer;
    }
 
    details[open] > summary {
      list-style-type: "-";
      cursor: pointer;
    }
Source by api.jqueryui.com #
 
PREVIOUS NEXT
Tagged: #accordion
ADD COMMENT
Topic
Name
6+3 =