【toggleClass】クラスは付与されているが反映されない

jQueryで横から出てくるスライドバーを作っていたのですが、スライドバーが出てきません。
以下、コードです。

HTML
1 <button id="js_btn">ボタン</button>
2    <nav>
3        <ul id="js-cover">
4            <li>テキスト</li>
5        </ul>
6    </nav>

css
1
2
3#js-cover {
4    width: 312px;
5    height: 100px;
6    cursor: pointer;
7    background-color: #3aeb56;
8    text-align: center;
9    line-height: 100px;
10    font-size: 3em;
11    position: relative;
12    top: 0;
13    transform: translateX(-100%);
14    transition: 1s;
15}
16
17
18.active {
19    transform: translateX(0%);
20    transition: 5s;
21}

js
1$(function () {
2    $('#js_btn').on('click', function () {
3        $('#js-cover').toggleClass('active');
4    });
5});
6

上記コードをchrome検証で確認しました。#js-cover自体にactiveクラスは反映はされますが、予め隠した#js-coverが現れません。

ところが#js-coverのの表記をHTML,CSS.jsの全てで.js-coverのクラスに書き換えると
ボタンが作動し、隠された要素が横から現れます。

idの時にうまく作動しないのは何故でしょうか？
それとも単なる入力ミスか何かでしょうか？

宜しくお願い致します。

行動規範の内容に同意します

回答1件

「CSS 詳細度」とか「CSS 優先順位」で検索してみてください。

CSS
1#js-cover.active {
2    transform: translateX(0%);
3    transition: 5s;
4}
5```**動くサンプル：**[https://jsfiddle.net/L7kj8m69/](https://jsfiddle.net/L7kj8m69/)