jquery - jqueryでトグルするオブジェクトを1つだけ取得する方法

Question

jquery でトグル機能を使っていたのですが、いくつか問題がありました。オブジェクトの 1 つを正常に切り替えることができますが、それをクリックすると、その特定のオブジェクトだけのコンテンツではなく、すべてのオブジェクトの非表示のコンテンツが表示されます。

関連するコードは次のとおりです。

スクリプト：

$(document).ready(function(){

$("button").click(function () {
      $("p").slideToggle("slow");
    });

});

HTML:

<button>Click me.</button><br />
<p style="display: none;">Word</p><br />
<button>Click me.</button>
<p style="display: none;">Word</p><br />
<button>Click me.</button>
<p style="display: none;">Word</p><br />
<button>Click me.</button>
<p style="display: none;">Word</p>

CSS:

button {
  display: block; 
  width: 90%; 
  height: 25px; 
  line-height: 10px; 
  background-color: #f4eb79; 
  color: #392e25; 
  text-decoration: none; 
  text-align: center; 
  border: 1px solid #ffffff; 
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px; 
  border-radius: 5px; 
  padding: 7px; 
  -moz-box-shadow: 3px 3px 4px #2e7899;
  -webkit-box-shadow: 3px 3px 4px #2e7899; 
  box-shadow: 3px 3px 4px #2e7899; 
  -moz-transition: background-color 0.3s, -moz-transform 0.3s; 
  -webkit-transition: background-color 0.3s, -webkit-transform 0.3s; 
  transition: background-color 0.3s, transform 0.3s;
  margin-left: 10px;
}

button:hover
{
  color: #ffffff; 
  background-color: #ff8eb3; 
  text-decoration: none; 
  border: 1px solid #ffffff; 
  -moz-box-shadow: 3px 3px 4px #1f5066; 
  -webkit-box-shadow: 3px 3px 4px #1f5066; 
  box-shadow: 3px 3px 4px #1f5066;
}