使用JavaScript进行事件调用

Question

I want to invoke Javascript function with call on <a> to hide and display block using divid as id like in the code given below. I am able to hide the open block but not open it.

 echo "<span class='bold' style='background:#0DCAD1'><a name='form_a_$group_seq' href='#div_$group_seq' style='float:left;color:white' id='form_a_$group_seq' value='1' " .
"onclick='return divclick(this,\"div_$group_seq\");'";
 if ($display_style == 'block') echo "clicked";

 // Modified 6-09 by BM - Translate if applicable  
 echo "<b>" . xl_layout_label($group_name) . "</b></a></span>\n";

 echo "<div id='div_$group_seq' class='section' style='display:$display_style;'>\n";
 echo " <table border='0' cellpadding='0'>\n";
 $display_style = 'none';
}
else if (strlen($last_group) == 0) {
echo " <table border='0' cellpadding='0'>\n";
}

This is the javascript code i am using.

function divclick(a, divid) {
var divstyle = document.getElementById(divid).style;
if(a.clicked) {
divstyle.display = 'block';
} else {
divstyle.display = 'none';
}
return true;
}

Answer 1

You need to check what the style is current set to and act accordingly. If you can provide a jsfiddle, I can probably demo it for you. Something like below should work, assuming that you were able to hide the button already:

  if ( divstyle.display == 'none' ) {
    divstyle.display = 'block';
  } else {
    divstyle.display = 'none';
  }

Answer 2

You can do it in jQuery as follows:

$(a).click(function(){
    $(divid).toggle();
});