html accordion generator

Solutions on MaxInterview for html accordion generator by the best coders in the world

showing results for - "html accordion generator"
Andrea
03 May 2019
1                    Select HTML    
2 <div class="accordion">
3     <input type="radio" name="select" class="accordion-select" checked />
4    <div class="accordion-title"><span>Title</span></div>
5    <div class="accordion-content">Content</div> 
6         <input type="radio" name="select" class="accordion-select" />
7    <div class="accordion-title"><span>Title</span></div>
8    <div class="accordion-content">Content</div> 
9         <input type="radio" name="select" class="accordion-select" />
10    <div class="accordion-title"><span>Title</span></div>
11    <div class="accordion-content">Content</div> 
12</div> 
13                
Jena
29 Feb 2019
1                    Select CSS
2.accordion {
3    box-sizing: border-box;
4    display: flex;
5    font-family: Arial, Helvetica, sans-serif;
6    overflow: hidden;
7    width: 100%;
8}
9
10.accordion-select {
11    cursor: pointer;
12    margin: 0;
13    opacity: 0;
14    z-index: 1;
15}
16
17.accordion-title {
18    position: relative;
19}
20
21.accordion-title:not(:nth-last-child(2))::after {
22    border: 1px solid transparent;
23    bottom: 0;
24    content: '';
25    left: 0;
26    position: absolute;
27    right: 0;
28    top: 0;
29}
30
31.accordion-title span {
32    bottom: 0px;
33    box-sizing: border-box;
34    display: block;
35    position: absolute;
36    white-space: nowrap;
37    width: 100%;
38}
39
40.accordion-content {
41    box-sizing: border-box;
42    overflow: auto;
43    position: relative;
44    transition: margin 0.3s ease 0.1s;
45}
46
47.accordion-select:checked + .accordion-title + .accordion-content {
48    margin-bottom: 0;
49    margin-right: 0;
50}
51
52/* Generated styles starts here */
53
54.accordion {
55    border-color: #dedede;
56    border-radius: 8px;
57    border-style: solid;
58    border-width: 1px;
59    flex-direction: column;
60    height: auto;
61} 
62
63.accordion-title,
64.accordion-select  {
65    background-color: #ffffff;
66    color: #7f8787;
67    width: 100%;
68    height: 65px;
69    font-size: 15px;
70}
71
72.accordion-select {
73    margin-bottom: -65px;
74    margin-right: 0;
75}
76
77.accordion-title:not(:nth-last-child(2))::after {
78    border-bottom-color: rgb(234, 234, 234);
79    border-right-color: transparent;
80} 
81
82.accordion-select:hover + .accordion-title,
83.accordion-select:checked + .accordion-title {
84    background-color: #ffffff;
85} 
86
87 .accordion-title span  {	
88    transform: rotate(0deg);
89    -ms-writing-mode: lr-tb;
90    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
91    padding-left: 33px;
92    padding-right: 33px;
93    line-height: 65px;
94} 
95
96.accordion-content {
97    background-color: #f7f7f7;
98    color: #7f8787;
99    height: 280px;
100    margin-bottom: -280px;
101    margin-right: 0;
102    padding: 30px;
103    width: 100%;
104} 
105