CSS скрыть div с переключателем вне формы

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

Любимый

Я пытаюсь скрыть 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");
    }
}

Вы можете легко сделать это с помощью 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>

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

.hideDiv {
    display: none;
}