使用Jquery创建扩展折叠应用程序

Question

你好，我对Jquery还是陌生的。我正在创建一个展开折叠应用程序，当单击“阅读更多”按钮时，将显示另一个段落。香港专业教育学院设法让顶部的“阅读更多”按钮起作用，但是问题是，即使其他两个使用与第一个相同的id标记，它们似乎也没有。任何帮助那些工作的人将不胜感激！这是我的代码

<div>

$(document).ready(function() {
  $("#toggle").click(function() {
    var elem = $("#toggle").text();
    if (elem == "Show More") {
      $("#toggle").text("Show Less");
      $("#hide").slideDown();
    } else {
      $("#toggle").text("Show More");
      $("#hide").slideUp();
    }
  });
});

* {
	margin: 0;
	padding: 0;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 87.5%;
	width: 650px;
	margin: 0 auto;
	padding: 15px 25px;	
	border: 3px solid blue;
}
h1 { 
	font-size: 150%;
}
h2 {
	font-size: 120%;
	padding: .25em 0 .25em 25px;
}
#hide {
	display: none;
}
ul {
	padding-left: 45px;
}
li {
	padding-bottom: .4em;
}
p, a {
	padding-bottom: .4em;
	padding-left: 25px;
}
a, a:focus, a:hover {
	color: blue;
}