Breaking News: Grepper is joining You.com. Read the official announcement!

accordion

Magnificent Macaque answered on July 20, 2022 Popularity 10/10 Helpfulness 1/10

answer accordion

related accordion

accordion

Comment

<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;
    }

Popularity 10/10 Helpfulness 1/10 Language html

Source: Grepper

Tags: accordion html

Link to this answer
Share Copy Link

Contributed on Jul 20 2022

Magnificent Macaque

0 Answers Avg Quality 2/10

Closely Related Answers

accordion

Comment

-1

1
2
3
4
5
6
<div id="accordion">
  <h3>First header</h3>
  <div>First content panel</div>
  <h3>Second header</h3>
  <div>Second content panel</div>
</div>

Popularity 10/10 Helpfulness 1/10 Language whatever

Source: api.jqueryui.com

Tags: accordion acco

Link to this answer
Share Copy Link

Contributed on Aug 05 2022

shanmuga priya

0 Answers Avg Quality 2/10

accordion

Contents

More Related Answers

accordion

Closely Related Answers

accordion

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.