.p-correct { display:none; } .p-grid p { display:grid; grid-template-row: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .p-grid input { } #p2:checked ~ #p3:checked ~ #p5:checked ~ #p7:checked ~ .p-correct { display:block; } #p2:checked ~ #p3:checked ~ #p5:checked ~ #p7:checked ~ .p-incorrect { display:none; } #p1:checked ~ .p-correct, #p4:checked ~ .p-correct, #p6:checked ~ .p-correct, #p8:checked ~ .p-correct, #p9:checked ~ .p-correct { display:none; } #p1:checked ~ .p-incorrect, #p4:checked ~ .p-incorrect, #p6:checked ~ .p-incorrect, #p8:checked ~ .p-incorrect, #p9:checked ~ .p-incorrect { display:block; } .book-binding { height:30em; width:30em; position:relative; } .book-binding details { display:inline; list-style:none; position: absolute; padding: 0 2em; } details[open] { height:25em; width:26em; border:none; } .book-binding details > summary { list-style:none; width:2em; margin:0; } .book-binding details { background: #ccc; } .book-binding details:not([open]) + details:not([open]) { display: none; } .book-binding details[open] > summary:before { content:"←"; } .book-binding details[open] + details:not([open]) > summary:before { content:"→"; } .book-binding details:not([open]):nth-of-type(1) > summary:before { content:"↑" } .book-binding details[open] { left:0; } .book-binding details[open] + details:not([open]) { right:0; } .book-binding details:not([open]) ~ details { display:none; }