Проблемы с простой Jquery Видимость тумблер

Question

не могу понять, почему это не работает ...

HTML

<button id="new_user">+ Create a New User</button> 
<div id="create_user" style="visibility:hidden">Test</div> 

JQuery

$('#new_user').click(function(){ 
    if ($('#create_user').css('visibility') == "hidden"){ 
     $('#create_user').css("visibility","visible"); 
    } else { 
     $('#create_user').css("visibility","hidden"); 
    } 
}); 

Answer 1

Без проверки видимости, вы может просто использовать toggle()

<button id="new_user">+ Create a New User</button> 
<div id="create_user" style="display:none">Test</div> 

Jquery

$(document).ready(function() { 
    $('#new_user').click(function() { 
    $('#create_user').toggle(); 
    }); 
}); 

Answer 2

$('#new_user').click(function(){ 
 
     $('#create_user').toggleClass("hide show");//toggel class to hide or show 
 
});

.hide{visibility:hidden} 
 
.show{visibility:visible}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="new_user">+ Create a New User</button> 
 
<div id="create_user" class='hide'>Test</div>

1. есть класс скрыть и показать, скрыть DIV на нагрузке
2. На использовании кнопки мыши .toggleClass() для переключения скрыть и показать

Answer 3

Ваш код работает нормально. https://jsfiddle.net/t9nxrrbj/
Но я бы предпочел show, hide или может быть просто toggle:

$('#new_user').click(function() { 
    $('#create_user').toggle(); 
}); 

или

$('#new_user').click(function() { 
    if(!$('#create_user').is(':visible')) { 
     $('#create_user').show(); 
    } else { 
     $('#create_user').hide(); 
    } 
}); 

И положил свой код в состояние готовности к работе обратного вызова из JQuery. Это помогает, bacuse ожидание с привязкой click ro вашего элемента до тех пор, пока DOM не будет готов. https://jsfiddle.net/t9nxrrbj/1/

$(function() { 
    $('#new_user').click(function() { 
     $('#create_user').toggle(); 
    }); 
});