元素不会为 JS 切换功能显示

我有一些 js 切换代码，它过去对我有用，但在我为另一个项目更改它后就不起作用了。出于某种原因，有一个display:none;属性不会切换。可能是因为我移动了要切换的div;最初它直接出现在触发div 之后，但现在我把它放在一个单独的 li 元素中。我是一个业余编码员，对正在发生的事情有点困惑。任何帮助将不胜感激！

这是一个小提琴：https://jsfiddle.net/mfqa5ahb/1/

当我检查小提琴的html时，它显示为我想要切换的div的属性（davebiobox）：

element.style {
display: none;
}

如果我暂时禁用此属性并单击查看/隐藏生物按钮，它会正确切换一次，然后重置为display:none;

代码如下：

.HTML：

<div class="ourteamlist">
            <ul>
                <li>
                    <img src="images/slide4/larry.jpg" class="profilepic" alt="Profile Pic">
                    <div class="lilbluebox">
                        <div class="teambox">
                            <ul>
                                <li>
                                    <p class="whitetext">Dave Henderson</p>
                                    <h4>CPA, CA, Partner</h4>
                                </li>
                                <li>
                                    <div id="daveshowbio" class="viewbio">VIEW BIO</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>
                    <div id="davebiobox">
                        <div class="bioleft">
                            <p>Dave Henderson</p>
                        </div>
                        <div class="bioright">
                            <p>DAVE DAVE DAVE DAVE DAVE DAVE</p>
                        </div>
                    </div>
                </li>
            </ul>
            </div>

.CSS：

.ourteamlist{
max-width:1200px;
padding-left:30px;
padding-right:10px;
background-color:#eeeeee;
text-align:center;
margin:0 auto;
margin-left:-1px;
clear:both;
}
.ourteamlist ul li{
display:inline-block;
margin-right:-3px;
text-align:left;
margin-top:1px;
}
.profilepic{
height:205px;
width:299px;
padding-left:0px;
padding-right:1px;
padding-bottom:1px;
}
.lilbluebox{
background-color:#FFFFFF;
margin-top:-5px;
width:299px;
height:80px;
}
.teambox{
padding-left:30px;
padding-top:20px;
width:100%;
}
.teambox ul li{
display:inline-block;
}
.viewbio{
font-size:11px;
font-weight:600;
text-align:right;
margin-right:30px;
color:#888888;
cursor:pointer;
letter-spacing:1px;
}
.teambox ul li a{
text-decoration: none;
}
#davebiobox{
position:relative;
display:inline-block;
max-width:1200px;
height:287px;
background:#FFFFFF;
}
#davebiobox:after{
content:"";
position:relative;
display:block;
width:0;
height:0;
}
.bioleft{
position:relative;
float:left;
width:50%;
}
.bioright{
position:relative;
float:right;
width:50%;
}

.JS：

 $(document).ready(function () {
$(".viewbio").click(function() {
    var $self = $(this);
    var originalText = $self.text().trim();
    $(".viewbio").text("VIEW BIO");
    if (originalText == "VIEW BIO") {
        $self.text("HIDE BIO");
    }
});
});
$(document).ready(function () {
var $slides = $('#davebiobox').hide();
$('#daveshowbio').show().click(function () {
    var $slider = $(this).next("#davebiobox");
    if (!$slider.length){
        $slider = $(this).closest("#davebiobox");
    }
    $slides.not($slider).stop(true, true).slideUp();
    $slider.stop(true, true).slideToggle(0);
});
});

多谢！