Function to change style.display of a div when another is clicked

Question

I'm new to javascript and, starting from some code found on this site, I'm trying to change the visibility of a div using a function.

The function is

var MyClass = document.getElementsByClassName("DivMainSH");
var myFunction = function() {
    var SenderId = this.id;
    var IdNums = SenderId.split("_");
    var SubDivId = 'DivSubSH_' + IdNums[1];
    var SubDiv = document.getElementById(SubDivId);
    if (SubDiv.style.display = 'none'){
        alert("I'm here"); // This works
        SubDiv.style.display = 'blok'; // this doesn't work
        document.getElementById(SubDivId).style.display = 'blok'; // this doesn't work
    }else{
        document.getElementById(SubDivId).style.display = 'none';
    }
};

for (var i = 0; i < MyClass.length; i++) {
    MyClass[i].addEventListener('click', myFunction, false);
}

The code works and I see the alert but the hidden div remains hidden.
I've tried many different approaches but no one worked.
I'm sure it's some stupid beginner mistake but I'm stuck with this since three days.
EDIT
The "else" part still not working after the typo correction

The php code I'm using to write the html is the following:

$Des_N_Vals=array("FirstName"=>"FirstDescr", 
          "SecondName"=>"SecondDescr",
          "ThirdName"=>"ThirdDescr");
DivShowHide_Insert('Select options', $Des_N_Vals);
Function DivShowHide_Insert($Name, $Arr_NameVal_Descr){
    $Name=str_replace(' ', '_', $Name);
    $Num=0;
    foreach($Arr_NameVal_Descr as $Val => $Descr) {
        echo '<div class="DivMainSH" id="DivMainSH_'.$Num.'">
                  <h3>
                    <input type="checkbox" name="'.$Name.'['.$Num.']" ';
        if (isset($_POST[$Name][$Num]) && $_POST[$Name][$Num]==$Val) echo ' checked="checked" ';
                        echo 'value="'.$Val.'">'.$Val.'</input>
                  </h3>
                <div class="DivSubSH" id="DivSubSH_'.$Num.'" style="display:none;">
                    '.$Descr.'
                </div>
            </div>';
        $Num++;
    }
    echo '</div>';
}

Answer 1

You seem to have misspelt 'block'.

SubDiv.style.display = 'blok';
document.getElementById(SubDivId).style.display = 'blok';

Change this to:

SubDiv.style.display = 'block';
document.getElementById(SubDivId).style.display = 'block';

And also, you are actually assigning a value to SubDiv.style.display in your following if statement:

if (SubDiv.style.display = 'none') {

This is causing the condition to always be true since the assignment never fails and so the display style of the div is always none , hence your div initially being hidden but never coming back.

if (SubDiv.style.display == 'none') {