Accordion section
Summary details
Využití HTML tagů summary a details pro klasický vzhled rozbalovacího textového menu
Ukázka accordionu
.accordion details {
border: 1px solid #4CAF50;
border-radius: 4px;
margin-bottom: 0.5em;
padding: 0.5em;
background-color: #f9fff9;
transition: all 0.3s ease;
}
.accordion summary {
font-weight: bold;
cursor: pointer;
list-style: none; Tímto se zbavíme trojúhelníčku (šipky)
position: relative;
padding-right: 1.5em;
}
.accordion summary::after {
content: "+"; U zavřeného tagu 'Summary' dodáme znaménko plus
position: absolute;
right: 0.5em;
font-weight: bold;
transition: transform 0.3s ease;
}
.accordion details[open] summary::after {
content: "–"; U otevřeného tagu 'Details' přidáme znaménko mínus
}
section.all_text h1, h3, p{
padding: 0.15em 0.25em 0.15em 0.5em;
}
section.all_text p::first-line{
color: rgb(0, 83, 32);
letter-spacing: 0.05em;
}
section.all_text p::first-letter {
color: rgb(8, 8, 8);
font-size: 1.6em;
padding: 0.025em;
}
section.all_text details{
width: calc(40%); /*u mobilního rozlišení přepočteme na 100% */
max-width: 60em; /* omezíme šířku textu */
height: auto;
transition: all 2.5s ease;
border: 0.015em rgb(8, 120, 0) dotted;
font-size: 1.25em;
}
section.all_text summary{
text-align: right;
list-style: none;/* skryje trojúhelníček u summary */
padding: 0.05em 0.5em;
cursor: pointer;
background-color: rgb(1, 142, 1);
}
section.all_text details:not([open]){
width: 10em; /* velikost zavřeného bloku */
background-color: green;
color: beige;
}
section.all_text details:not([open]):hover{
color: rgb(250, 151, 1);
}