Я пытаюсь скрыть div через css. Div hide работает внутри формы, как это можно сделать вне формы или даже вне строки div?

HTML

<div class="row">
    <form>
        <input type="radio" name="radio" value="show" checked/>Show <br>
        <input type="radio" name="radio" value="hide"/>Hide

        <div class="hideDiv">
            <p>Can you see me</p>
        </div>
    </form>  
</div>

CSS

input[type=radio][value="hide"]:checked ~ .hideDiv {
    display: none;
}

Предпочтительно только CSS, но Javascript также вариант.

1
Joep 24 Авг 2017 в 23:08

4 ответа

Лучший ответ

Может, что-то похожее на этот код поможет?

<input type="radio" name="radio" onclick="hideFunc();" value="show" checked/>Show <br> 
<input type="radio" name="radio" onclick="hideFunc();"  value="hide"/>Hide
<script>
hideFunc = function() {
   if (document.getElementsByClassName('hideDiv')[0].style.display == "none")
      document.getElementsByClassName('hideDiv')[0].style.display = "block";
   else
      document.getElementsByClassName('hideDiv')[0].style.display = "none";
}
</script>
0
Max Alexander Hanna 24 Авг 2017 в 20:15

Вы можете попробовать это:

Любимый

Я пытаюсь скрыть div через css. Div hide работает внутри формы, как это можно сделать вне формы или даже вне строки div?

HTML

<div class="row">
    <form>
        <input type="radio" name="radio" value="show" onclick="hideDiv();" checked/>Show <br>
        <input type="radio" name="radio" onclick="hideDiv();" value="hide"/>Hide

        <div class="hideDiv">
            <p>Can you see me</p>
        </div>
    </form>  
</div>

JS

function hideDiv() {
    var aux = $('input[name="radio"]:checked').val();
    if (aux == 'show'){
        $('.hideDiv').css("display","block");
    }else{
        $('.hideDiv').css("display","none");
    }
}
0
David Alves 24 Авг 2017 в 20:19

Вы можете легко сделать это с помощью jquery

$('.chkToogle').click(function(){
	$('.hideDiv').fadeToggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <form>
        <input type="checkbox" class="chkToogle" checked/>Show/Hide
		</form>  
</div>
<div class="hideDiv">
	<p>Can you see me</p>
</div>
0
Felipe Constancio Jesus 24 Авг 2017 в 20:51

Используйте меньше специфичности CSS.

.hideDiv {
    display: none;
}
1
kjonach 24 Авг 2017 в 21:03