I have been tasked with creating a civil war journal for my 8th grade Social Studies class and I decided to present it as an HTML file featuring the title and date of each journal entry. The goal is to allow users to click on each entry to open it while automatically closing any other open entries. However, I am encountering issues with making the journal entries expand upon clicking. Below is the code I have written so far. (P.S. Some journal entries are still a work in progress.)
UPDATE: The code functions correctly in JSFiddle, but is not working when viewed in a browser.
HTML
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href='journal.css'/>
<title>Pericby Zarby Journal</title>
</head>
<body>
<div id='container'>
<div class='entry current'>
<div class='item row'>
<div class="col-xs-3">
<p class='date'>July 22, 1861</p>
</div>
<div class='col-xs-6'>
<p class='title'>The Battle of Bull Run</p>
</div>
</div>
<div class='description row'>
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<p>As I step through the door of the steel mill, I overhear the conversation that my boss and one of my co-workers are having.
I hear something about a battle and the start of a civil war. I walk by and suddenly my friend Joe runs up to me and says, 'Did ya hear?'
I give him a funny look that shows how confused I am. He proceeds to tell me about the Battle of Bull Run.
He says that a small skirmish between the Union and Confederate armies happened in Virginia. He also says that the Union lost.
That last part really surprises me. The North is supposed to have a lot more men than the South and should have destroyed the South.
Hopefully the rest of the war does not go like this.</p>
</div>
<div class='col-xs-3'> </div>
</div>
</div>
<div class='entry'>
<div class='item row'>
<div class='col-xs-3'>
<p class='date'>December 15, 1862</p>
</div>
<div class='col-xs-6'>
<p class='title'>Fredericksburg</p>
</div>
</div>
<div class='description row'>
<div class='col-xs-3'> </div>
<div class='col-xs-6'>
<p>While I am drinking and talking with some of the other blacks in the 86th regiment, I spot a small man running up to Colonel Smith
and telling him that General Burnside needs reinforcements. Smith shouts for everyone to get into formation and begin marching towards
Fredericksburg. After about an hour of marching I am finally able to see a battlefield, but it does not look pretty.
A group of Union soldiers is charging towards a Confederate barricade. One by one, each soldier is getting killed.
No progress is made by the soldiers. My regiment begins to line up in formation for another charge. As Burnside begins to realize that the
charge before is proving futile he barks a command to retreat. My regiment marches in an orderly fashion back to the nearest Union camp.</p>
</div>
<div class='col-xs-3'> </div>
</div>
</div>
<div class='entry'>
<div class='item row'>
<div class='col-xs-3'>
<p class='date'>January 2, 1863</p>
</div>
<div class='col-xs-6'>
<p class='title'>Emancipation Proclamation</p>
</div>
</div>
<div class='description row'>
<div class='col-xs-3'> </div>
<div class='col-xs-6'>
<p>It’s official. Lincoln has released the Emancipation Proclamation. Slaves from states in rebellion are now free.
Southern plantations won’t let that happen though. No slaves are going to be freed, yet. The best thing about the Emancipation Proclamation
is that now slaves have something to fight for. They will begin to help win this war, in big and small ways.
Also, France and Great Britain can’t help the South anymore because they are slave-free countries.
Lincoln may have just given the Union the boost they need to win this civil war. I know it has given me hope.</p>
</div>
<div class='col-xs-3'> </div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="journal.js"></script>
</body>
</html>
CSS
body {
position: fixed;
background-image: url("http://housedivided.dickinson.edu/grandreview/wp-content/uploads/2010/02/HD_4USCinfantryDetail.preview.jpg");
background-size: cover;
}
#container {
height: 700px;
width: 600px;
border-right: 3px black solid;
border-left: 3px black solid;
border-bottom: 3px black solid;
position: fixed;
margin: 10px auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.row {
margin: 0;
}
.current .item{
background-color: rgba(112,112,112,0.7);
}
.entry {
background-color: rgba(216, 209, 209, 0.7);
border-top: 3px solid black;
}
.item {
cursor: pointer;
padding-top: 7px;
padding-bottom: 18px;
}
.description {
display: none;
padding-top: 10px;
padding-bottom: 10px;
}
.item .date {
margin-left: 20px;
font-weight: bold;
font-style: italic;
}
.item .title {
font-weight: bold;
font-size: 20px;
text-align: center;
}
Javascript
var main = function() {
$('.entry').click(function() {
$('.entry').removeClass('current');
$('.description').hide();
$(this).addClass('current');
$(this).children('.description').show();
});
}
$(document).ready(main);