javascript - show/Hide menu does not work

Question

function dpdShowHide(){
var orgBtn = getElementById('organizador');
var dpdOrg = getElementById('org-dpd-list');
    if (orgBtn !== false) {
        dpdOrg.visibility('none')
    }
    else{
        dpdOrg.visibility('block')
    }
}

So my problem is this, I’m trying to make a hidden menu (a ul) appear and disappear by clicking on li(parent element of that other ul), but it’s not working

Answer 1

Is this?

<script>
function dpdShowHide(ele){

    dpdOrg = ele.children[0];
    if (dpdOrg.style.display == 'none') {
        dpdOrg.style.display = 'block';
    }
    else{
       dpdOrg.style.display = 'none';
    }
}

var orgBtns = document.getElementsByClassName('organizador');
for (var i = 0 ; i < orgBtns.length; i++) {
    orgBtns[i].addEventListener('click', function() {
       dpdShowHide();
    });
}

</script>

<ul>
       <li>
          li
       </li>
       <li class="organizador" onclick="dpdShowHide(this)">sub ul1
           <ul id="org-dpd-list" style="display: none">
              <li>sub li</li>
              <li>sub li</li>
           </ul>
       </li>
       <li>
          li
       </li>
       <li class="organizador" onclick="dpdShowHide(this)">sub ul2
           <ul id="org-dpd-list" style="display: none">
              <li>sub li</li>
              <li>sub li</li>
           </ul>
       </li>
    </ul>