Как переключить эффект в Div, используя только css?

Question

Примечание: Я пробовал все вопросы & ответов, связанных с этой темой. Кроме того, я пробовал смежные вопросы и пытался их решить, но не успел. Поэтому, пожалуйста, прочтите мой вопрос смертельно.

Я хочу

1. I click me Div затем Второй hiddendiv Div отображения. Но я хочу нажать второй раз в click me Div, затем скрыть hiddendiv Div. Подобный toggle event используя чистый css.

2. I click me Div then Second hiddendiv Div display. Но я нажимаю другую область, а затем скрываю hiddendiv Div. Поэтому я не хочу скрывать hiddendiv Div в любом другом клике, используя чистый css.

Примечание:Только чистый CSS, CSS3 Использование в ответ не использовать (JavaScript, JQuery) & любой другой из-под контроля

Code

.clicker { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    outline: none; 
 
    cursor: pointer; 
 
    color:#FFF; 
 
} 
 

 
.hiddendiv { 
 
    display: none; 
 
    height: 200px; 
 
    background-color: green; 
 
} 
 

 
.clicker:focus+.hiddendiv { 
 
    display: block; 
 
}

<div> 
 
    <div class="clicker" tabindex="1">Click me</div> 
 
    <div class="hiddendiv"></div> 
 
</div>

Answer 1

Это невозможно с заданными требованиями, все элементы, являющиеся в div.

Было бы возможно, если изменить div «S выступает в качестве ссылки на якоря a и использовать :target псевдо

Устанавливая display: inline-block на якорь a, вы можете выбрать размер его, как вы можете с div

.clicker { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 50px; 
 
    background-color: blue; 
 
    color:#FFF; 
 
} 
 
.clicker.hidden { 
 
    display: none; 
 
} 
 
.hiddendiv { 
 
    height: 0px; 
 
    background-color: green; 
 
    overflow: hidden; 
 
    transition: height 0.5s; 
 
} 
 
.hiddendiv.nr2 { 
 
    background-color: red; 
 
} 
 

 
#showdiv1:target ~ div a[href="#showdiv1"], 
 
#showdiv2:target ~ div a[href="#showdiv2"] { 
 
    display: none; 
 
} 
 
#showdiv1:target ~ div a[href="#hidediv1"], 
 
#showdiv2:target ~ div a[href="#hidediv2"] { 
 
    display: inline-block; 
 
} 
 
#showdiv1:target ~ div .hiddendiv.nr1, 
 
#showdiv2:target ~ div .hiddendiv.nr2 { 
 
    height: 150px; 
 
}

<div id="showdiv1"></div> 
 
<div id="showdiv2"></div> 
 

 
<div> 
 
    <a href="#showdiv1" class="clicker" tabindex="1">Click me 1</a> 
 
    <a href="#hidediv1" class="clicker hidden" tabindex="1">Click me 1</a> 
 

 
    <a href="#showdiv2" class="clicker" tabindex="2">Click me 2</a> 
 
    <a href="#hidediv2" class="clicker hidden" tabindex="2">Click me 2</a> 
 

 
    <div class="hiddendiv nr1"></div> 
 
    <div class="hiddendiv nr2"></div> 
 
</div>

Answer 2

вы достичь этого, используя флажок с некоторыми CSS манипуляции

div input { 
 
    margin-right: 100px; 
 
} 
 

 
.check-btn label { 
 
    display: inline-block; 
 
} 
 

 
.check-btn input { 
 
    display: none; 
 
} 
 

 
.clicker { 
 
    background: green; 
 
    padding: 5px 10px; 
 
} 
 

 
.hiddendiv { 
 
    background: #000; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: none; 
 
} 
 

 
.check-btn input:checked ~ .hiddendiv { 
 
    display: block; 
 
}

<div class="check-btn"> 
 

 
    <input id="myid" type="checkbox" > 
 
    <label for="myid" class="clicker">Click me</label> 
 
    <div class="hiddendiv"></div> 
 

 
</div>

Here jsfiddle

Answer 3

Вы можете использовать checkbox вход и на основе, если этот флажок установлен или вы не можете показать, скрыть div.

ниже пример, используя тот же самый.

.clicker { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    outline: none; 
 
    cursor: pointer; 
 
    color:#FFF; 
 
    display:block; 
 
} 
 

 
.hiddendiv { 
 
    display: none; 
 
    height: 200px; 
 
    background-color: green; 
 
} 
 

 
.clicker:focus+.hiddendiv { 
 
    display: block; 
 
} 
 
.hidden{ 
 
    margin-left:-99999px; 
 
} 
 
input#cmn-toggle-7:checked + label + div{ 
 
display:block; 
 
}

<div> 
 
    <input id="cmn-toggle-7" class="hidden" type="checkbox" > 
 
    <label for="cmn-toggle-7" class="clicker" tabindex="1">Click me</label> 
 
    <div class="hiddendiv"></div> 
 
</div>