<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div id="newEventHolder"> <span><i class="fa fa-plus"></i> Add New Event</span> </div> <div id="newEventForm"> <label for="event-date">Event Date</label> <input type="text" id="eventDate"> <label for="event-title">Event Title</label> <input type="text" name="event-title" id="eventTitleInput" maxlength="80"/> <label for="event-description">Description</label> <textarea name="event-descripton" id="eventDescriptionInput">Event Description</textarea> <button name="add-event" id="addEvent">Add New Event</button> <button name="cancel-add-event" id="cancelAddEvent">Cancel</button> </div> <ul id="upcomingEvents"> <li id="eventHolder"> <div class="event-date-holder"> <span id="dateNumber">23</span> <span id="dateDay">Jan</span> </div> <div class="event-details-holder"> <h1>Akron Flea</h1> <span id="eventDescription">Lorem ipsum dolar sit amet…</span> <ul id="editTools"> <li><i class="fa fa-pencil-square-o"></i></li> <li><i class="fa fa-bars"></i></li> <li><i class="fa fa-times" id="removeEvent"></i></li> </ul> </div> </li> <li id="eventHolder"> <div class="event-date-holder"> <span id="dateNumber">23</span> <span id="dateDay">Jan</span> </div> <div class="event-details-holder"> <h1>Cleveland Flea</h1> <span id="eventDescription">Lorem ipsum dolar sit amet…</span> <ul id="editTools"> <li><i class="fa fa-pencil-square-o"></i></li> <li><i class="fa fa-bars"></i></li> <li><i class="fa fa-times" id="removeEvent"></i></li> </ul> </div> </li> <li id="eventHolder"> <div class="event-date-holder"> <span id="dateNumber">23</span> <span id="dateDay">Jan</span> </div> <div class="event-details-holder"> <h1>Columbus Flea</h1> <span id="eventDescription">Lorem ipsum dolar sit amet…</span> <ul id="editTools"> <li><i class="fa fa-pencil-square-o"></i></li> <li><i class="fa fa-bars"></i></li> <li><i class="fa fa-times" id="removeEvent"></i></li> </ul> </div> <li> </ul> <script> var newEventHolder = document.getElementById("newEventHolder"); var eventForm = document.getElementById("newEventForm"); var eventDate = document.getElementById("eventDate"); var addEvent = document.getElementById("addEvent"); var cancel = document.getElementById("cancelAddEvent"); var upcomingEvents = document.getElementById("upcomingEvents"); var eventHolder = document.getElementById("eventHolder"); var removeEvent = document.getElementById("removeEvent"); // Show New Event form $(newEventHolder).click(function() { $(eventForm).slideDown(400); }); // Add Datepicker to Date input $(eventDate).datepicker(); // Close New Event form $(cancel).click(function() { $(eventForm).slideUp(400); }); // Delete icon removed event from list $(removeEvent).click(function() { $(eventHolder).addClass('hide').stop(); }); </script> </div>

.container { margin: 50px auto; width: 640px; font-family: 'Source Sans Pro', sans-serif; font-weight: 400; } #newEventHolder { margin-bottom: 10px; width: 100%; height: 100px; border: 3px dashed #85b9e4; text-align: center; line-height: 4; font-size: 24px; color: #85b9e4; box-sizing: border-box; border-radius: 3px; } #newEventHolder:hover { border: 3px dashed #3289d2; color: #3289d2; cursor: pointer; } #newEventForm { width: 100%; padding: 15px; box-sizing: border-box; display: none; } #newEventForm label { display: block; margin-bottom: 10px; font-weight: 600; font-size: 16px; color: #244674; } #newEventForm input[type="text"] { padding-left: 15px; margin-bottom: 20px; height: 50px; width: 100%; line-height: 1.875; font-size: 16px; color: #A7C1D9; border: 2px solid #C4DDF2; outline: 0; box-sizing: border-box; background: #f6fafd; } #newEventForm input[type="text"]:focus { background: #FFF; border: 2px solid #9ac5e9; } #newEventForm textarea { margin-bottom: 20px; padding: 5px; height: 120px; width: 100%; line-height: 1.875; font-size: 16px; color: #A7C1D9; border: 2px solid #C4DDF2; outline: 0; box-sizing: border-box; border-radius: 3px; background: #f6fafd; } #newEventForm textarea:focus { background: #FFF; border: 2px solid #9ac5e9; } #newEventForm button { margin-right: 10px; padding: 0 15px; background: #849EBF; color: #eef5fb; font-size: 16px; font-weight: 400; border: 0; outline: 0; line-height: 3.5; border-radius: 3px; cursor: pointer; } #newEventForm button:hover { background: #6284ae; } #newEventForm button#cancelAddEvent { background: #d9e9f7; color: #4c6a91; cursor: pointer; } #newEventForm button#cancelAddEvent:hover { background: #C4DDF2; } #eventHolder { padding: 17px 15px; margin-bottom: 10px; background: #C4DDF2; width: 100%; height: 100px; box-sizing: border-box; border-radius: 3px; } #eventHolder::after { content: ""; display: table; clear: both; } #eventHolder .event-date-holder { float: left; background: #A7C1D9; margin-right: 20px; padding: 10px; width: 50px; text-align: center; border-radius: 4px; box-shadow: 0px 1px 0px 0px #d9e9f7; } #eventHolder .event-date-holder #dateNumber { display: block; font-size: 30px; font-weight: 700; color: #0C1726; } #eventHolder .event-date-holder #dateDay { text-transform: uppercase; } #eventHolder .event-details-holder { float: left; width: 520px; line-height: 3.2; } #eventHolder .event-details-holder::after { content: ""; display: table; clear: both; } #eventHolder .event-details-holder h1 { float: left; margin-right: 30px; vertical-align: bottom; font-size: 20px; font-weight: 600; color: #244674; } #eventHolder .event-details-holder span#eventDescription { position: relative; padding-top: 4px; color: #0f2b42; float: left; font-size: 18px; } #eventHolder .event-details-holder span#eventDescription::before { content: "//"; position: absolute; left: -20px; color: #2a7cc0; } #eventHolder .event-details-holder ul#editTools { float: right; margin: 0px 0px 0px 10px; padding: 0px; } #eventHolder .event-details-holder ul#editTools li { display: inline; margin-right: 15px; padding-top: 5px; font-size: 20px; color: #5ca1db; } #eventHolder .event-details-holder ul#editTools li .fa { text-decoration: 0px 1px 0px 0px #d9e9f7; } #eventHolder .event-details-holder ul#editTools li .fa:hover { color: #3289d2; cursor: pointer; } #eventHolder .event-details-holder ul#editTools li:last-child { margin-right: 0; } .hide { display: none; }

<script>