怎么实现点击按钮下方出现一个评论框的样式，再点击一点样式消失
怎么实现点击按钮下方出现一个评论框的样式，再点击一点样式消失。
满意的话，记得采纳，谢谢。
需要整个项目包的话，请私信我上传网盘。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击按钮下方出现一个评论框</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/comment.css">
</head>
<body>
<div class="commentAll">
<!--评论区域 begin-->
<div class="reviewArea clearfix">
<textarea class="content comment-input" placeholder="请输入..." onkeyup="keyUP(this)"></textarea>
<a href="javascript:;" class="lBtn">显示评论</a><a href="javascript:;" class="plBtn">评论</a>
</div>
<!--评论区域 end-->
<!--回复区域 begin-->
<div class="comment-show" style="display: none;">
<div class="comment-show-con clearfix">
<div class="comment-show-con-img pull-left"><img src="#" alt="头像1"></div>
<div class="comment-show-con-list pull-left clearfix">
<div class="pl-text clearfix">
<a href="#" class="comment-size-name">您的昵称1: </a>
<span class="my-pl-con">这里是评论内容11111111111111111111</span>
</div>
<div class="date-dz">
<span class="date-dz-left pull-left comment-time">2021-7-11 15:31:39</span>
<div class="date-dz-right pull-right comment-pl-block">
<a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>
<span class="pull-left date-dz-line">|</span>
<a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">111</i>)</a>
</div>
</div>
<div class="hf-list-con"></div>
</div>
</div>
<div class="comment-show-con clearfix">
<div class="comment-show-con-img pull-left"><img src="#" alt="头像2"></div>
<div class="comment-show-con-list pull-left clearfix">
<div class="pl-text clearfix">
<a href="#" class="comment-size-name">您的昵称2: </a>
<span class="my-pl-con">这里是评论内容22222222222222222222</span>
</div>
<div class="date-dz">
<span class="date-dz-left pull-left comment-time">2021-7-11 15:31:39</span>
<div class="date-dz-right pull-right comment-pl-block">
<a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>
<span class="pull-left date-dz-line">|</span>
<a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">222</i>)</a>
</div>
</div>
<div class="hf-list-con"></div>
</div>
</div>
<div class="comment-show-con clearfix">
<div class="comment-show-con-img pull-left"><img src="#" alt="头像3"></div>
<div class="comment-show-con-list pull-left clearfix">
<div class="pl-text clearfix">
<a href="#" class="comment-size-name">您的昵称3: </a>
<span class="my-pl-con">这里是评论内容333333333333333333333333</span>
</div>
<div class="date-dz">
<span class="date-dz-left pull-left comment-time">2021-7-11 15:31:39</span>
<div class="date-dz-right pull-right comment-pl-block">
<a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>
<span class="pull-left date-dz-line">|</span>
<a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">333</i>)</a>
</div>
</div>
<div class="hf-list-con"></div>
</div>
</div>
</div>
<!--回复区域 end-->
</div>
</body>
<script>
var lbtn = document.getElementsByClassName('lBtn')[0];
lbtnft = true;
lbtn.onclick = function() {
if(lbtnft == true){
lbtn.innerText = "隐藏评论";
document.getElementsByClassName('comment-show')[0].style.display="";
lbtnft = false;
}else if(lbtnft == false){
lbtn.innerText = "显示评论";
document.getElementsByClassName('comment-show')[0].style.display="none";
lbtnft = true;
}
}
</script>
</html>