How to hide panel-heading when panel-body opened - html

Question

On Click of edit, panel-body obviously will get opened at the same time i want to hide panel-heading
<div class="panel panel-default">
<div class="panel-heading row" id="first">
<div class="col-md-4">First Name</div>
<div class="col-md-4"><?php echo $row->first_name; ?></div>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<div class="col-md-4 profile-edit"> <i class="fa fa-pencil"></i> Edit</div>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div class="col-md-7 col-md-offset-2 text-center">
<label class="col-md-4">First Name</label>
<div class="col-md-8">
<input type="hidden" name="id" value="<?php echo $row->id; ?>" />
<input type ="text" name="first_name" id="first_name" class="form-control" value="<?php echo $row->first_name; ?>"/></br>
<input type="submit" value="Save" class="btn btn-success" style="width:70px;">
<button type="button" data-target="#collapseOne" data-toggle="collapse" class="btn btn-warning cancel-name">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

The easiest method would be to use jquery!
$(document).ready(function(){
$(".profile-edit").on("click", function(){
$(".panel-heading").hide();
});
});
This is just off the top of the head though, so may take some finesse.