javascriptで高さを取得したいが、"undefined"と結果が出てしまう

実現したいこと

wordpressの一般投稿記事内の画面下に固定したアコーディオンボタンを出し入れするのに、アコーディオンボタンの中のコンテンツの高さを取得して、bottomの値に入れたいです。
javascriptは編集画面のhtmlコードの下に入れています。

発生している問題・分からないこと

アコーディオンボタンの中のコンテンツの高さを取得する時に、コンソールで値を確認したところ、「undefined」と結果が出ます。

エラーメッセージ

error

1※↓コンソールに出ている結果です。 2undefined 3undefined 4<div class="sp-color-list-body"> 5 <div class="overflow"> 6 <div class="color-list"> 7 ... 8 </div> 9 </div> 10 </div>

該当のソースコード

html

12<section id="sp-color-list">3 <div class="accordion-btn title">4 <p>カラー一覧を見る</p>5 <span>※ぜひこちらのカラーと見比べながら読まれてください。</span>6 </div>7 <div class="sp-color-list-body">8 <div class="overflow">9 <div class="color-list">10 ... 11 </div>12 </div>13 </div>14</section>15 <script>16jQuery('#sp-color-list .accordion-btn').on('click', function() {17 var Height_ColorListBody = document.querySelector('#sp-color-list').innerHeight;18 console.log(Height_ColorListBody);19 console.log( document.querySelector('.sp-color-list-body').Height);20 console.log( document.querySelector('.sp-color-list-body'));21 if(jQuery('#sp-color-list').hasClass('active')){22 jQuery('#sp-color-list').removeClass('active');23 jQuery('#sp-color-list').css( { 'bottom' : -( Height_ColorListBody + 2 )+ 'px'});24 }else{25 jQuery('#sp-color-list').addClass('active');26 jQuery('#sp-color-list').css( { 'bottom' : -2 + 'px'});27 }28 });29 </script>

試したこと・調べたこと

上記の詳細・結果

上記のコードの「console.log( document.querySelector('.sp-color-list-body'));」の所はHTMLが取得できていますが、.Height、.innerHeightが取得できていない状態です。

どなたかご教示いただきたいです。

補足

特になし