非常に単純なJavascriptのトグルが動作しない

Question

JavaScriptを使用して簡単なトグルクラスを作成しようとしていますが、コードに問題があります。誰かが間違いが何であるか教えてもらえますか？ありがとう。

HTML：

<div id="buttonOne">CLick Here One</div> 
    <div id="carouselOne"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi incidunt minus laudantium, tempora fuga expedita odit esse fugiat, quas vel debitis, quae dolorem dolores neque labore. Cumque placeat assumenda, mollitia!</p> 
</div> 

CSS：

#carouselOne { 
    display: none; 
} 

#buttonOne { 
    cursor: pointer; 
} 

.toggleHideShow { 
    display:block; 
} 

Javascriptを：

var btnOne = document.getElementById("buttonOne"); 

function functionOne() { 
    var carOne = document.getElementById("carouselOne"); 
    if (carOne.className == "") { 
     carOne.className = "toggleHideShow"; 
    }else { 
     carOne.className = ""; 
    } 
} 
btnOne.addEventListener("click", functionOne); 

Answer 1

はこれを試してみてください：

var btnOne = document.getElementById("buttonOne"); 
 

 
function functionOne() { 
 
    var carOne = document.getElementById("carouselOne"); 
 

 
    carOne.classList.toggle('hidden'); 
 
} 
 

 
btnOne.addEventListener("click", functionOne);

.hidden { 
 
    display: none; 
 
}

<div id="buttonOne">CLick Here One</div> 
 

 
<div id="carouselOne"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi incidunt minus laudantium, tempora fuga expedita odit esse fugiat, quas vel debitis, quae dolorem dolores neque labore. Cumque placeat assumenda, mollitia!</p> 
 
</div>

Answer 2

変更CSSライン

.toggleHideShow { 

#carouselOne.toggleHideShow { 

からそして、これは動作します