how can i hide and show collaps

how can i hide and show collaps

i have two collaps in my page .i have Btn_First in collapsOne. when page
is loaded , i wanna collapsOne will be appear and collapsTwo no . and when
Btn_First clicked , collapsTwo will be appear. i did like below . all
things are correct , i get Alert in MyFunc . but collapsTwo will not
appear .
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse"
data- parent="#checkout" href="#collapseOne"> First
Step</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<form class="register-form">
<input class="input-block-level" type="text" placeholder=" Name "
id="inputname">
<input class="input-block-level" type="text" placeholder="Lname
" id="inputlname">
<button class="btn btn- medium btn-general input-block-level"
data-toggle="collapse" href="#collapseOne" type="submit"
id="Btn_First" ">Run </button>
</form>
</div>
</div>
</div>
/////////////////
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#checkout" href="#collapseTwo"> First
Step</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<form class="register-form">
<input class="input-block-level" type="text" placeholder=" Email
" id="inputEmai;">
<input class="input-block-level" type="text" placeholder="Phone "
id="inputPhone">
<button class="btn btn- medium btn-general input-block-level"
data-toggle="collapse" href="#collapseTwo" type="submit"
id="Btn_Second" ">Run </button>
</form>
</div>
</div>
</div>
///////////////////
<script type="text/javascript">
$(document).ready(function () {
$("#collapseTwo").remove();
$('#Btn_First).click(function () {
myfunc(2);
});
)};
function myfunc(flag) {
alert('hi');
if (flag == 2)
{
document.getElementById('collapseTwo').style.display = "visible";
}
}
</script>