Attachment "New Text Document.txt" to
wiki page [devteam_plan]
added by
Sahar
2023-01-12 20:02:57.
<html>
<head>
<title>CSS Accordion Slider</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.accordion {
box-sizing: border-box;
display: flex;
font-family: Arial, Helvetica, sans-serif;
overflow: hidden;
width: 100%;
}
.accordion-select {
cursor: pointer;
margin: 0;
opacity: 0;
z-index: 1;
}
.accordion-title {
position: relative;
}
.accordion-title:not(:nth-last-child(2))::after {
border: 1px solid transparent;
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
}
.accordion-title span {
bottom: 0px;
box-sizing: border-box;
display: block;
position: absolute;
white-space: nowrap;
width: 100%;
}
.accordion-content {
box-sizing: border-box;
overflow: auto;
position: relative;
transition: margin 0.3s ease 0.1s;
}
.accordion-select:checked + .accordion-title + .accordion-content {
margin-bottom: 0;
margin-right: 0;
}
/* Generated styles starts here */
.accordion {
border-color: #335ea1;
border-radius: 0px;
border-style: solid;
border-width: 0px;
flex-direction: column;
height: auto;
}
.accordion-title,
.accordion-select {
background-color: #5191fb;
color: #ffffff;
width: 100%;
height: 57px;
font-size: 21px;
}
.accordion-select {
margin-bottom: -57px;
margin-right: -57px;
}
.accordion-title:not(:nth-last-child(2))::after {
border-bottom-color: rgb(220, 230, 246);
border-right-color: transparent;
}
.accordion-select:hover + .accordion-title,
.accordion-select:checked + .accordion-title {
background-color: #004ecf;
}
.accordion-title span {
transform: rotate(0deg);
-ms-writing-mode: lr-tb;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
padding-left: 29px;
padding-right: 29px;
line-height: 57px;
}
.accordion-content {
background-color: #c3d3ed;
color: #000000;
height: 230px;
margin-bottom: -230px;
margin-right: 0;
padding: 28px;
width: 100%;
}
</style>
</head>
<style type="text/css">
.tg {border-collapse:collapse;border-color:#9ABAD9;border-spacing:0;}
.tg td{background-color:#EBF5FF;border-color:#9ABAD9;border-style:solid;border-width:1px;color:#444;
font-family:Arial, sans-serif;font-size:14px;overflow:hidden;padding:11px 7px;word-break:normal;}
.tg th{background-color:#409cff;border-color:#9ABAD9;border-style:solid;border-width:1px;color:#fff;
font-family:Arial, sans-serif;font-size:14px;font-weight:normal;overflow:hidden;padding:11px 7px;word-break:normal;}
.tg .tg-hsa2{font-family:Arial, Helvetica, sans-serif !important;font-size:16px;font-weight:bold;text-align:center;
vertical-align:top}
.tg .tg-cmyl{background-color:#D2E4FC;font-family:Arial, Helvetica, sans-serif !important;font-size:14px;text-align:center;
vertical-align:top}
.tg .tg-9cfx{font-family:Arial, Helvetica, sans-serif !important;font-size:14px;text-align:center;vertical-align:top}
</style>
<meta content="width=device-width, initial-scale=1.0">
<div style="overflow-x:auto;">
<table class="tg">
<thead>
<tr>
<th class="tg-hsa2" align = center>1</th>
<th class="tg-hsa2"align = center>1</th>
<th class="tg-hsa2"align = center>1</th>
<th class="tg-hsa2"align = center>1</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-cmyl"align = center>1</td>
<td class="tg-cmyl"align = center>1</td>
<td class="tg-cmyl"align = center>1</td>
<td class="tg-cmyl"align = center>1</td>
</tr>
<tr>
<td class="tg-9cfx"align = center>1</td>
<td class="tg-9cfx"align = center>1</td>
<td class="tg-9cfx"align = center>1</td>
<td class="tg-9cfx"align = center>1</td>
</tr>
</tbody>
</table>
</div>
<body>
<div class="accordion">
<input type="radio" name="select" class="accordion-select" checked />
<div class="accordion-title"><span>Title</span></div>
<div class="accordion-content">Content</div>
<input type="radio" name="select" class="accordion-select" />
<div class="accordion-title"><span>Title</span></div>
<div class="accordion-content">Content</div>
<input type="radio" name="select" class="accordion-select" />
<div class="accordion-title"><span>Title</span></div>
<div class="accordion-content">Content</div>
</div>
</body>
</html>