我几天前开始使用jQuery，在测试中遇到了一个问题。
我有两个按钮来分别显示/隐藏两个部分，它工作正常。但是，当我第二次单击已经活动的按钮时，它再次隐藏了该部分。有什么方法可以解决这个问题吗？
我试图使用它的着陆页与Elementor在WordPress的.这是代码：

<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.botaocompleto').each(function(i){
$(this).click(function(){ $('.planocompleto').eq(i).toggle();
$('.planobasico').eq(i).hide();
}); });
}); });
</script>
<style>
.botaocompleto{
cursor: pointer;
}
.planocompleto{
display: block;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.botaobasico').each(function(i){
$(this).click(function(){ $('.planobasico').eq(i).toggle();
$('.planocompleto').eq(i).hide();
}); });
}); });
</script>
<style>
.botaobasico{
cursor: pointer;
}
.planobasico{
display: none;
}
</style>

hiding problem screenshot
我不知道该怎么办，如果有人能帮助我，我会很感激的