Trouble Toggling between two divs when a link is clicked - Javascript - dom

Question

I'm currently trying to work on a basic JavaScript application.
I ultimately want to have a book that shows basic information on it's cover and with the click of a link, the book will show additional information.
I have two divs; #frontBook which will displays the front of the book which includes basic information about the current Book (i.e. Title, Author, Pages, Read or not) and #insideBook which will display additional info about the book(i.e. what page they're up to, publisher's name, etc.)
I want the #frontBook div to show and #insideBook to be hidden at first. Then once #additional-info link has been clicked, I want #frontBook to be hidden and #insideBook to be shown.
I've added my code below but it does not work. I'm really not sure where I'm going wrong. Please Help!
Thanks in advance.
P.S. I know that JQuery would be recommended for something like this but I just want to make sure I can grasp this concept with JavaScript first.
HTML:
<div id="frontBook">
<div id="book-outline">
<div id="book-content">
<ul id="basic-book-content">
<li><span class="basic-book-details" id="new-title">Title: </span></li>
<li><span class="basic-book-details" id="new-author">Author: </span></li>
<li><span class="basic-book-details" id="new-pages">Pages: </span></li>
<li><span class="basic-book-details" id="new-read">Read?:</span></li>
<li style="line-height: 80px; margin-right:-2px;">
<a href="#" id="additional-info" onclick="toggle_book();">Additional Info
<i style="color:white;" class="far fa-caret-square-right" ></i>
</a>
</li>
</ul>
</div>
<!-- closes #book-content-->
</div>
</div>
<div id="insideBook" style="display:none">
<div id="inside-book-outline">
<div id="inside-book-content">
<ul id="additional-book-content">
<li><span class="additional-book-details" id="new-editor"> Editor's Name: </span></li>
<li><span class="additional-book-details" id="new-publisher">Publisher's Name: </span></li>
<li><span class="additional-book-details" id="new-pub-comp">Publsiher Company's Name: </span></li>
<li><span class="additional-book-details" id="new-page-at">Page Up to:</span></li>
<li><span class="additional-book-details" id="new-line-at">Line Up to:</span></li>
<li><span class="additional-book-details" id="new-genre">Genre:</span></li>
<li><span class="additional-book-details" id="new-in-series">In Series?:</span></li>
<li style="line-height: 80px; margin-right:-2px;">
<a href="#" id="less-info" onclick="toggle_book();">
<i style="color:white;" class="far fa-caret-square-right"></i>Less Info
</a>
</li>
</ul>
</div>
<!-- closes #inside-book-content-->
</div>
</div>
JavaScript:
function toggle_book() {
var front = document.getElementById('frontBook');
var inside = document.getElementById('insideBook');
if (inside.style.display === 'block') {
inside.style.display = 'none';
front.style.display = 'block';
} else {
inside.style.display = 'block';
front.style.display = 'none';
}
}

Answer 1

Well you seemed to have missed two things.
1) You're if statement logic is backwards it should be:
function toggle_book() {
var front = document.getElementById('frontBook');
var inside = document.getElementById('insideBook');
if (inside.style.display === 'block') {
inside.style.display = 'none';
front.style.display = 'block';
} else {
inside.style.display = 'block';
front.style.display = 'none';
}
2) You don't have a onclick attribute for the <a> tag in the insideBook to toggle it back