Измените один размер div, если флажок установлен - html css only

Question

Here У меня мало проектов, используя только HTML & CSS. Я хочу изменить свойства <div class="pro">, когда установлен флажок. Хотите, чтобы скрыть все остальные <div class="pro"> и сделать <article>, показаны полностью на странице.

.pro{ 
 
    min-width:310px; 
 
    width:350px; 
 
    margin:10px; 
 
    height:200px; 
 
    top:0px; 
 
    position:relative; 
 
    background:rgba(39, 174, 96, 1.0); 
 
    float:left; 
 
    z-index:0; 
 
    overflow:hidden; 
 
} 
 
.proimg{ 
 
    width:100%; 
 
    height:200px; 
 
    position:absolute; 
 
    z-index:1; 
 
    top:0px; 
 
    margin:0; 
 
    backface-visibility:hidden; 
 
    transition:all 500ms; 
 
} 
 
.pro:hover img{ 
 
    transform:rotateY(180deg); 
 
} 
 
.pro:hover .prop{ 
 
    left:0; 
 
    transition:ease 500ms; 
 
    opacity:1; 
 
} 
 
.pro:hover .prolab{ 
 
    right:0; 
 
    transition:ease 500ms; 
 
    opacity:1; 
 
} 
 
.proh{ 
 
    position:absolute; 
 
    z-index:3; 
 
    background:rgba(236, 240, 241, 1.0); 
 
    color:rgba(44, 62, 80, 1.0); 
 
    padding:0 15px; 
 
    top:5px; 
 
    line-height:29px; 
 
    margin:0; 
 
} 
 
.prop{ 
 
    position:absolute; 
 
    z-index:2; 
 
    width:290px; 
 
    height:130px; 
 
    line-height:16px; 
 
    color:rgba(44, 62, 80, 1.0); 
 
    background:rgba(236, 240, 241, 0.7); 
 
    top:19px; 
 
    text-align:center; 
 
    padding:17px 5px; 
 
    margin:0 25px; 
 
    transition:ease 500ms; 
 
    overflow:hidden; 
 
    left:100%; 
 
    opacity:0; 
 
} 
 
input{ 
 
    display:none; 
 
} 
 
.prolab{ 
 
    position:absolute; 
 
    z-index:6; 
 
    bottom:5px; 
 
    right:100%; 
 
    background:rgba(236, 240, 241, 1.0); 
 
    color:rgba(44, 62, 80, 1.0); 
 
    padding:0 15px; 
 
    line-height:29px; 
 
    cursor:pointer; 
 
    opacity:0; 
 
} 
 
.prolab:before{ 
 
    content:"Read more"; 
 
} 
 
article{ 
 
    position:absolute; 
 
    color:rgba(44, 62, 80, 1.0); 
 
    background:rgba(236, 240, 241, 1.0); 
 
    opacity:0; 
 
    z-index:-1000; 
 
    margin:0; 
 
    width:100%; 
 
    overflow:scroll; 
 
    float:left; 
 
    clear:both; 
 
} 
 
input:checked ~ article{ 
 
    opacity:1; 
 
    z-index:5; 
 
    position:absolute; 
 
    height:200px; 
 
    padding:10px; 
 
} 
 
input:checked ~ .pro{ 
 
    z-index:0; 
 
    height:auto; 
 
} 
 
input:checked ~ .prolab{ 
 
    z-index:999; 
 
    position:absolute; 
 
    top:0px; 
 
    margin-right:0px; 
 
    background:rgba(44, 62, 80, 1.0); 
 
    color:rgba(236, 240, 241, 1.0); 
 
    width:25px; 
 
    padding:0; 
 
    text-align:center; 
 
    height:25px; 
 
    line-height:25px; 
 
} 
 
input:checked ~ .prolab:before{ 
 
    content:"x"; 
 
}

<div class="pro"> 
 
    <img class="proimg" src="https://farm9.staticflickr.com/8578/16483910188_982634ea2d_z_d.jpg"> 
 
    <h4 class="proh">Pro Title</h4> 
 
    <p class="prop">text here.</p> 
 
    <input type="checkbox" id="pro1"> 
 
    <label for="pro1" class="prolab"></label> 
 
    <article> text here. 
 
    </article> 
 
</div> 
 
<div class="pro"> 
 
    <img class="proimg" src="https://farm9.staticflickr.com/8578/16483910188_982634ea2d_z_d.jpg"> 
 
    <h4 class="proh">Pro Title</h4> 
 
    <p class="prop">text here.</p> 
 
    <input type="checkbox" id="pro2"> 
 
    <label for="pro2" class="prolab"></label> 
 
    <article> 
 
text here. 
 
    </article> 
 
</div> 
 
<div class="pro"> 
 
    <img class="proimg" src="https://farm9.staticflickr.com/8578/16483910188_982634ea2d_z_d.jpg"> 
 
    <h4 class="proh">Pro Title</h4> 
 
    <p class="prop">text here.</p> 
 
    <input type="checkbox" id="pro3"> 
 
    <label for="pro3" class="prolab"></label> 
 
    <article> 
 
text here. 
 
    </article> 
 
</div> 
 
<div class="pro"> 
 
    <img class="proimg" src="https://farm9.staticflickr.com/8578/16483910188_982634ea2d_z_d.jpg"> 
 
    <h4 class="proh">Pro Title</h4> 
 
    <p class="prop">text here.</p> 
 
    <input type="checkbox" id="pro4"> 
 
    <label for="pro4" class="prolab"></label> 
 
    <article> 
 
text here. 
 
    </article> 
 
</div>

Answer 1

С помощью CSS вы можете использовать селектор ~ если input стоит впереди коробки, чтобы скрыть/показать.

label может стоять внутри ящиков и быть в стиле, он может в конечном итоге произвести некоторые отмеченные коробки через: after /: before pseudo.

Основная идея так:

[type="checkbox"] { 
 
    position:absolute; 
 
    left:-999px; 
 
} 
 
:checked ~.div { 
 
    display:none; 
 
} 
 
#a:checked ~.div.a , 
 
#b:checked ~.div.b , 
 
#c:checked ~.div.c , 
 
#d:checked ~.div.d { 
 
    display:inline-block; 
 
} 
 
div, label { 
 
    margin:0.2em; 
 
    padding:0.5em; 
 
    display:inline-block; 
 
    border:solid; 
 
}

<input id="a" type="checkbox"/> 
 
<input id="b" type="checkbox"/> 
 
<input id="c" type="checkbox"/> 
 
<input id="d" type="checkbox"/> 
 
<div class="div a"> 
 
    <label for="a">a</label> 
 
    <p>box 1</p> 
 
</div> 
 
<div class="div b"> 
 
    <label for="b">b</label> 
 
    <p>box 2</p> 
 
</div> 
 
<div class="div c"> 
 
    <label for="c">c</label> 
 
    <p>box 3</p> 
 
</div> 
 
<div class="div d"> 
 
    <label for="d">d</label> 
 
    <p>box 4</p> 
 
</div>