Закройте div, когда флажок щелкнул с чистым css

Question

Я пытаюсь закрыть div при щелчке по галочке с помощью css только не JQuery или Javascript, но кажется, что он не работает должным образом. Как я могу его отрегулировать?

div[id^="div-"] { 
 
     \t display: block; 
 
    } 
 
    div[id^="div-"]:target { 
 
\t  display: none; 
 
    }

<a href="#div-1"><input type="checkbox" checked></a> 
 
    <div id="div-1">   
 
     Here is the content. 
 
    </div>

Как я могу связать <a> кнопкой мыши и флажок?

Answer 1

Я думаю, что единственный способ сделать это с чистым CSS будет иметь checkbox как прямой родственник к div:

#div-1 {display:none} 
 
#checkbox:checked + #div-1 {display:block;}

<input id="checkbox" type="checkbox" checked> 
 
<div id="div-1">   
 
    Here is the content. 
 
</div>

Answer 2

#text{ 
 
    width:100px; 
 
    height:100px; 
 
    background:black; 
 
} 
 
input[type=checkbox]:checked ~ #text{ 
 
display:none; 
 
    
 
}

<input type="checkbox" name="check" value="checked">Click here<br> 
 
<div id="text"></div>

Answer 3

Используя только CSS вы можете сделать что-то вроде этого.

JSFiddle

+ является смежным селектором родственного, больше информации на https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors

#close + #div-1 { 
 
    display: none; 
 
} 
 

 
#close:checked + #div-1 { 
 
    display: initial; 
 
}

<input id="close" type="checkbox" checked /> 
 
<div id="div-1">Here is the content.</div>

Answer 4

Сначала вы должны удалить якорь и пусть входной элемент, потому что это трюк, который я показываю потребности элементов на том же уровне или второй элемент находится в более низких уровнях HTML структуры.

<input type="checkbox" checked> 
<div id="div-1">   
    Here is the content. 
</div 

CSS

div[id^="div-"] { 
    display: block; 
} 


input:checked ~ div[id^="div-"] { 
    display: none; 
} 

jsfiddle