垂直スライドで変更されるテキストにボタンを接続する方法は？

Question

これに答える人は面倒な質問かどうか分かりませんが、この場合は申し訳ありませんが、私は迷っています。

私は垂直ナビゲーションがありますバーは左側にあり、テキストは右側にあります。ナビゲーションの各ボタンにはそれぞれ独自のテキストがあり、ボタンの1つがクリックされるたびに、実際のテキストがスライドして（上または下に）、他のテキストにスペースを与えます。

リンクを変更せずに（つまり「a」タグなしで）同じページにする必要があります。これを行うにはJavaScriptが必要ですか、それともCSSのみで行うことができますか？

JavaScriptの場合は、onClickイベントを使用する必要がありますが、この場合はどのように処理するのかわかりません。誰かが私にこれを助けることができますか？ 私は英語に堪能ではないので、私が問題を明確にしたことを願っています。ありがとうございました！！ここで

は非常に簡単なデモだ、私はそれが有用であることを願っています： https://jsfiddle.net/4cgsn76t/3/

<ul> 

<li>Button 1</li> 
<li>Button 2</li> 
<li>Button 1</li> 
<li>Button 2</li> 
</ul> 
<!-- Text below connected to Button 1 --> 
<p> 
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga." 
</p> 
<!-- Text below connected to Button 2 --> 
<p> 
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo." 
</p> 

ul { 

    float:left; 
} 

ul li { 
    list-style:none; 
    width:100px; 
    height: 30px; 
    background:blue; 
    margin-top:15px; 
    margin-right:30px; 
    color:white; 
    border-radius:5px; 
    cursor:pointer; 
} 

p { 
    width:300px; 
    float:left; 
    font-size:12px; 
} 

p:nth-child(2) { 
    display:none; 
} 

Answer 1

ドキュメント＃querySelectorAllを使用してli秒のリストとp秒を取得します。 .forEach()でリスト項目を繰り返し、各項目にイベントリスナーを追加します。 1は非表示にするすべての段落をクリックし、関連するテキスト表示された場合：

var para = document.querySelectorAll('p'); 
 

 
document.querySelectorAll('li').forEach(function(el, i) { 
 
    el.addEventListener('click', function() { 
 
    para.forEach(function(p) { 
 
     p.style.display = 'none'; 
 
    }); 
 

 
    para[i].style.display = 'block' 
 
    }); 
 
});

ul { 
 
    float: left; 
 
} 
 

 
ul li { 
 
    list-style: none; 
 
    width: 100px; 
 
    height: 30px; 
 
    background: blue; 
 
    margin-top: 15px; 
 
    margin-right: 30px; 
 
    color: white; 
 
    border-radius: 5px; 
 
    cursor: pointer; 
 
} 
 

 
p { 
 
    width: 300px; 
 
    float: left; 
 
    font-size: 12px; 
 
} 
 

 
p:not(:first-child) { 
 
    display: none; 
 
}

<ul> 
 
    <li>Button 1</li> 
 
    <li>Button 2</li> 
 
</ul> 
 
<div> 
 
    <!-- Text below connected to Button 1 --> 
 
    <p> 
 
    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia 
 
    animi, id est laborum et dolorum fuga." 
 
    </p> 
 
    <!-- Text below connected to Button 2 --> 
 
    <p> 
 
    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo." 
 
    </p> 
 
</div>