You can check this working example which is similar to your code.
function showForm(){
var checkBox = document.getElementById("checkbox");
if (checkBox.checked == true){
document.getElementById("form1").style.display="block";
}
else{
document.getElementById("form1").style.display="none";
}
}#form1 {
display: none;
}<h3>Hide/Show</h3>
<input type="checkbox" onclick="showForm()" id="checkbox"/>
<div id="form1">
Form
</div>Your logic does work, the problem might be in your css file, maybe a selector with a higher specificity overriding your css rule.
here is a slightly different version of your code which is working fine.
showForm = () => {
checkbox.checked
? form1.style.display="block"
: form1.style.display="none";
}#form1 { display:none; }<input type="checkbox" id="checkbox" onclick="showForm()">
<form action="" id="form1"> The Form </form>I think you have something that overrides your display: none class. You don’t need javascript really, if you just put your form inside the same div container as the checkbox.
input#buildPIT ~ form#regressionBuilder {
display: none
}
#buildPIT:checked ~ #regressionBuilder {
display: block;
}<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="buildPIT">
<label class="custom-control-label" for="buildPIT">Build PIT</label>
<form class="form" id="regressionBuilder" method="post">
<input class = "btn btn-primary" type="submit" name="buildRegression" value="CALCULATE" >
</form>
</div>
I am using a checkbox to hide/unhide a form.
The code below does this correctly, but I need the form to be hidden at first and only show once the checkbox is checked.
EDIT: As requested, the post contains the full HTML. I debugged removing all other css / crispy forms / template extensions etc. to no avail.
html:
<!DOCTYPE html>
{% load static %}
{% load crispy_forms_tags %}
{% block body_block %}
<link rel="stylesheet" href="{% static 'css/regressionBuilder.css' %}">
<script type="text/javascript">
function enableRegressionBuilder(){
var checkBox = document.getElementById("buildPIT");
if (checkBox.checked == true){
document.getElementById("regressionBuilder").style.display="block";
}
else{
document.getElementById("regressionBuilder").style.display="none";
}
}
</script>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="buildPIT" onChange="enableRegressionBuilder();">
<label class="custom-control-label" for="buildPIT">Build PIT</label>
</div>
<form class="form" id="regressionBuilder" method="post">
{% csrf_token %}
{{ form2|crispy }}
<input class = "btn btn-primary" type="submit" name="buildRegression" value="CALCULATE" >
</form>
{% endblock %}
This works but the following css is supposed to hide the form initially, which is not happening:
#regressionBuilder {
display:none;
}
Can you update the question to include a complete example demonstrating the problem?
this might be heppening because for some reason your checkbox brings always true back so your JS overrides the initial css. Or your css is not included.
Unrelated to the issue:
The logic of this code seems to be correct, can you show us the HTML you are using?
@AristeidisKaravas thanks but no, I deactivated JS and still the