文章を折りたたむボタンがスムーズに動かない

文章の多い、tableタグで作られた表を一部をクリック操作で表示・非表示するボタンを加えたのですが、
テストしてみると、動くけど、カクカクして気になります。
どうすれば、スムーズに動かせますか？
お願いします。
ソースコードは、その箇所のコードになります。

html
1<!doctype html>
2<html lang="jp">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width">
6<title>パクcafe</title>
7<link href="css/reset.css" rel="stylesheet" type="text/css">
8<link href="css/style.css" rel="stylesheet" type="text/css">
9<link href="css/logo_style.css" rel="stylesheet" type="text/css">
10<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
11	<!--固定メニュー-->
12	<script>
13	$(function() {
14  var $win = $(window),
15      $main = $('main'),
16      $nav = $('nav'),
17      navHeight = $nav.outerHeight(),
18      navPos = $nav.offset().top,
19      fixedClass = 'is-fixed';
20
21  $win.on('load scroll', function() {
22    var value = $(this).scrollTop();
23    if ( value > navPos ) {
24      $nav.addClass(fixedClass);
25      $main.css('margin-top', navHeight);
26    } else {
27      $nav.removeClass(fixedClass);
28      $main.css('margin-top', '0');
29    }
30  });
31});</script>
32	
33	<script>
34	//■page topボタン
35$(function(){
36var topBtn=$('#pageTop');
37topBtn.hide();
38//◇ボタンの表示設定
39$(window).scroll(function(){
40  if($(this).scrollTop()>80){
41    //---- 画面を80pxスクロールしたら、ボタンを表示する
42    topBtn.fadeIn();
43  }else{
44    //---- 画面が80pxより上なら、ボタンを表示しない
45    topBtn.fadeOut();}
46  }) 
47// ◇ボタンをクリックしたら、スクロールして上に戻る
48topBtn.click(function(){
49  $('body,html').animate({
50  scrollTop: 0},500);
51  return false;
52});	
53});</script>
54	<!--menu折りたたみ-->
55	<script>
56	$(function(){
57	$(".readmore").on("click", function() {
58		$(this).toggleClass("on-click");
59		$(".hide_text").slideToggle(1000);
60	});
61}); </script>
62</head>
63<body>
64	  <div class="container">
65		<hr class="hr_style">
66	  <section class="menu_sub2">
67		  <table class="menu_table2">
68				  <tr>
69				  <th class="table_text">品名</th>
70				  <th>値段</th></tr>
71				  <tr><td class="table_text">秘伝の塩だれ唐揚げ定食
72				<div class="menu_pr1">オススメ!!</div></td>
73                  <td>1000円</td>
74				  </tr>
75			      <tr><td class="table_text">チキン南蛮定食</td>
76					  <td>1000円</td>
77				  </tr>
78			      <tr><td class="table_text">とんかつ定食</td>
79					  <td>1000円</td>
80				  </tr>
81			      <tr><td class="table_text">チーズしそ巻きカツ定食
82					  <div class="menu_pr2">女性に人気</div></td>
83					  <td>900円</td>
84				  </tr>
85				  <tr><td class="table_text">サバの塩焼き魚定食</td>
86					  <td>1000円</td>
87				  </tr>
88			      <tr><td class="table_text">サクサク！！あじフライ定食</td>
89					  <td>1000円</td>
90				  </tr>
91			      <tr><td class="table_text">ぶりの煮魚定食</td>
92					  <td>1000円</td>
93				  </tr>
94			       <tr><td class="table_text">肉じゃが定食</td>
95					   <td>1000円</td>
96				  </tr>
97		  </table>
98		         <table class="hide_text">
99					<tr><td class="table_text">かつ丼</td>
100					  <td>900円</td>
101				  </tr>
102			      <tr><td class="table_text">親子丼</td>
103					  <td>900円</td>
104				  </tr>
105			      <tr><td class="table_text">やきとり丼</td>
106					  <td>900円</td>
107				  </tr>
108			      <tr><td class="table_text">あなご丼</td>
109					  <td>900円</td>
110				  </tr>
111			      <tr><td class="table_text">生しらす丼</td>
112					  <td>900円</td>
113				  </tr>
114			      <tr><td class="table_text">サーモン丼</td>
115					  <td>900円</td>
116				  </tr>
117			      <tr><td class="table_text">ロコモコ丼</td>
118					  <td>900円</td>
119				  </tr> 
120				 </table>
121		  <button class="readmore">もっとみる</button>
122	  </section>
123	  <hr class="hr_style">
124	  </div>
125	  <section class="menu_title3">
126		<div class="bag_text">
127		  <h3 id="drink">ドリンク・デザート</h3>
128	   </div>
129	  </section>
130	  
131	 
132</body>
133</html>

css
1
2.hide_text{
3	display:none;
4	width:100%;
5}
6button.readmore {
7	position: relative;
8	height: 80px;
9	width: 90px;
10	margin: 0 auto;
11	display: block;
12	background-color: transparent;
13	color: #24382c;
14	padding-bottom: 40px;
15	border: none;
16	outline: 0;
17	transition: .5s;
18	-erbkit-transition: .5s;
19}
20
21button.readmore::after {
22	content: " ";
23	position: absolute;
24	width: 30px;
25	height: 30px;
26	border-top: solid 3px #24382c;
27	border-right: solid 3px #24382c;
28	transform: rotate(135deg);
29	-webkit-transform: rotate(135deg);
30	right: 28px;
31	top: 25px;
32	transition: .5s;
33	-erbkit-transition: .5s;
34}
35
36button.readmore:hover::after {
37top: 40px;}
38.on-click {
39	color: transparent!important;
40}
41
42.on-click {
43	transform: rotate(-180deg);
44	-webkit-transform: rotate(-180deg);
45}
46.hide_text tr td{
47	border-bottom:dotted 1px #ed9c45;}
48

jQuery
1<!--menu折りたたみ-->
2	<script>
3	$(function(){
4	$(".readmore").on("click", function() {
5		$(this).toggleClass("on-click");
6		$(".hide_text").slideToggle(1000);
7	});
8}); </script>