MrMurphy: Div verstecken

Beitrag lesen

SELF-Forum

Div verstecken

MrMurphy
−1 Informationen zu den Bewertungsregeln

Ich hatte bereits vor längerer Zeit mal ein Beispiel erstellt. Informationen stehen im Quelltext.

Ich muss den Quelltext auf zwei Beiträge verteilen:


<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Text Aus- und Einblenden CSS</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      @media all {
      * {
         /*box-sizing: border-box;*/
      }
      html {
      }
      body {
         padding: 0 0.25rem 0.5rem 0.25rem;
         border-top: 0.01px solid transparent;
         margin: 0;
      }
   }
   /*Schriften*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 150%;
         line-height: 1.3;
      }
      h1 {
         font-family: serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: serif;
         font-size: 1rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      p, li, dl, dt, address {
         font-family: 'Sans-Serif';
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      a {
         color: blue;
         text-decoration: none;
         outline: none;
         margin: 0;
      }
      figcaption {
         font-family: 'Sans-Serif';
         font-size: 0.9rem;
         margin: 0;
      }
   }
   /*Eigener Checkbox Hack (ech01)*/
   @media all {
      .ech01 {
         padding: 1rem;
         border: 2px solid gray;
         border-radius: 0.5rem;
         margin: 1rem 0 0 0;
      }
      .ech01 div {
         padding: 0.5rem;
         border: 2px solid silver;
      }
      .ech01>div:nth-of-type(1) {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-around;
      }
      .ech01 label {
         background-color: gold;
         text-align: center;
         cursor: pointer;
         padding: 0.3rem 0.5rem;
         border: 2px solid transparent;
         border-radius: 0.4rem;
      }
      .ech01>div:nth-of-type(2) label {
         display: none;
      }
      .ech01 label:checked {
         background-color: red;
      }
      .ech01 input {
         position: absolute;
         left: -20000px;
         top: auto;
         width: 1px;
         height: 1px;
      }
      .ech01 section {
         display: none;
      }
      .ech01 #ech011:checked ~ section:nth-of-type(1),
      .ech01 #ech012:checked ~ section:nth-of-type(2),
      .ech01 #ech013:checked ~ section:nth-of-type(3),
      .ech01 #ech014:checked ~ section:nth-of-type(4),
      .ech01 #ech015:checked ~ section:nth-of-type(5),
      .ech01 #ech016:checked ~ section:nth-of-type(6),
      .ech01 #ech017:checked ~ section:nth-of-type(7) {
         display: block;
      }
   }
   @media only screen and (max-width: 1000px) {
      .ech01>div:nth-of-type(1) {
         display: none;
      }
      .ech01 label {
      }
      .ech01>div:nth-of-type(2) label {
         display: block;
         margin: 0.5rem 0rem 0 0rem;
      }
   }
   /*Eigener Checkbox Hack (ech02)*/
   @media all {
      .ech02 {
         padding: 1rem;
         border: 2px solid gray;
         border-radius: 0.5rem;
         margin: 1rem 0 0 0;
      }
      .ech02 div {
         padding: 0.5rem;
         border: 2px solid silver;
      }
      .ech02>div:nth-of-type(1) {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-around;
      }
      .ech02 label {
         background-color: gold;
         text-align: center;
         cursor: pointer;
         padding: 0.3rem 0.5rem;
         border: 2px solid transparent;
         border-radius: 0.4rem;
      }
      .ech02>div:nth-of-type(2) label {
         display: none;
      }
      .ech02 label:checked {
         background-color: red;
      }
      .ech02 input {
         position: absolute;
         left: -20000px;
         top: auto;
         width: 1px;
         height: 1px;
      }
      .ech02 section {
         display: none;
      }
      .ech02 #ech021:checked ~ section:nth-of-type(1),
      .ech02 #ech022:checked ~ section:nth-of-type(2),
      .ech02 #ech023:checked ~ section:nth-of-type(3),
      .ech02 #ech024:checked ~ section:nth-of-type(4),
      .ech02 #ech025:checked ~ section:nth-of-type(5),
      .ech02 #ech026:checked ~ section:nth-of-type(6),
      .ech02 #ech027:checked ~ section:nth-of-type(7) {
         display: block;
      }
   }
   @media only screen and (max-width: 1000px) {
      .ech02>div:nth-of-type(1) {
         display: none;
      }
      .ech02 label {
      }
      .ech02>div:nth-of-type(2) label {
         display: block;
         margin: 0.5rem 0rem 0 0rem;
      }
   }
   /*Cards*/
   @media all {
      .cards {
         padding: 0 0.5rem 1rem 0.5rem;
         border: 2px solid gray;
         border-radius: 0.4rem;
         margin: 0.5rem 0 0 0;
         display: flex;
         flex-wrap: wrap;
      }
      .cards section {
         box-shadow: 5px 5px 5px silver;
         padding: 0 0.5rem 1rem 0.5rem;
         border: 1px solid gray;
         border-radius: 0.4rem;
         margin: 1rem 0.5rem 0 0.5rem;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(25% - 1rem - 2px - 1rem);
      }
   }
   @media only screen and (max-width: 1200px) {
      .cards section {
         flex-basis: calc(33.33% - 1rem - 2px - 1rem);
      }
   }
   @media only screen and (max-width: 900px) {
      .cards section {
         flex-basis: calc(50% - 1rem - 2px - 1rem);
      }
   }
   @media only screen and (max-width: 650px) {
      .cards section {
         flex-basis: calc(100% - 1rem - 2px - 1rem);
      }
   }

   </style>
</head>
Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
−1
Informationen zu den Bewertungsregeln