jquuery 局部替换 点击更多隐藏当前内容，出现列表内容

<div class="book">
				  <div class="title_lit">
					<div class="title_inner">书籍<span onclick="showbook()">更多></span></div>
					
				</div>
				<div class="line_in"></div>
				<div class="content" id="content_book" style="display: block;">
					<div class="lit_box" v-for="(item,index) in bookArr" v-if="index < 4" :key='item.rowId' @click="BookClic(item.rowGuid,item.bookPic)">
						<div class="book_img">
							<img :src="url+item.bookPic" />
						</div>
						<div class="book_tit">
							{{item.bookName}}
						</div>
					</div>
				</div>
				
				<div class="list" id="list_book" style="display: none;">
					<div class="group" v-for="(item,index) in bookArr" :key='item.rowId' @click="BookClic(item.rowGuid,item.bookPic)">
						<div class="name">{{item.bookName}}</div>
						<div class="time">{{item.createTime}}</div>
					</div>					
				</div>
				
			</div>

javascript:切换两个div的内容。网上说toggle()在jquery1.9之后不支持了。我jquery2.4还有效就没有用其他方法。 

function showbook(){
			$("#list_book").toggle();
			$("#content_book").toggle();
		}
		function showvideo(){
			$("#list_video").toggle();
			$("#content_video").toggle();
		}

点击更多隐藏当前内容，出现列表内容。获取数据用的vue