tabbed display

Almost works perfectly. But almost never killed a bird :(

by al nmeri

HTML

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>	<main>
	<aside>
		<h2> My Profile </h2>
	
	<div id=profilePic> <br>
	<img src='pastor1.png' alt="">
			<form enctype='multipart/form-data' action='' method=GET>
			<input type=file name=profilePic /> <br> <br>
			<input type=submit value="Update profile picture" />
			</form>
	</div>
	
	<div>
		<ul>
			<li> <a href=#><i class="fa fa-angle-left"></i> view my comments </a></li>
			<li> <a href=#><i class="fa fa-angle-left"></i> my mentions </a> </li>
		</ul>
	</div>
	</aside>
	<section>
	
	<div id=0>
		<form action="" method=GET enctype="multipart/form-data" id=article-form>
			<label for=article-title>Article Title: </label> <input type=text name=article_title id=article-title/> <br> <br>
			<label for=banner-image>Post Banner Image: </label> <input type=file name=banner_image id=banner-image/> <br> <br>
			<label for=article-body>Article Body: </label> <div class=format> </div>
			<textarea name=article_body cols=80 rows=30 placeholder="Awesome post goes here..." id=article-body></textarea> <br> <br>
			<label for=categories>Categories: </label> <input type=text name=categories id=categories title="Don't separate with commas but spaces" placeholder="E.g. Love Romance Self-improvement" /> <br> <br>
			<input type=submit value="Publish Post"/>
		</form>
		<br>
		<form action=sidebar.php method=GET enctype="multipart/form-data">
			<label for=announcements>Church announcements: </label> <input type=text name=sermon_title id=announcements /> <br> <br>
			<label for=testimony>New testimony: </label> <input type=text name=testimony id=testimony /> <br>
			<label for=testimony-author>Author: </label> <input type=text name=author id=testimony-author /> <br>
			<label for=book>Book of the Month: </label> <input type=text name=book_of_the_month id=book /> <br>
			<label for=book-image>Book Image: </label> <input type=file name=book_image id=book-image/> <br> <br>
			<input type=submit value="Update...

CSS

main {
	display: flex;
	flex-flow: row nowrap;
	}
	
aside {
	border-right: 1px outset white;
	flex: 1 22%;
	padding: 3%;
	}
	
aside h2 {
	font-size: 125%;
}

#profilePic {
	border-radius: 50%;
	overflow: hidden;
	height: 200px;
	width: 90%;
}

#profilePic img {
	margin-top: -7%;
	max-width: 100%;
	opacity: .8;
	}

#profilePic form {
	position: absolute;
	top: 450px;
}

#profilePic form input:last-child, #article-form input:last-child {
	padding: 4%;
	background: #4bb21c;
	border: 0;
	border-radius: 3px;
	color: #f7f7f7;
	cursor: pointer;
	font-family: lato;
}

section {
	border-bottom: 1px solid;
	flex: 1 75%;
	display: flex;
	flex-flow: row wrap;
	overflow: hidden;
	}
	
section > div {
	overflow: hidden;
	flex: 0;
  display: none;
	}

#buttonDiv {
	height: 50px;
	border-bottom: 1px outset white;
	flex: 2 100%;
	display: flex;
	flex-flow: row nowrap;
  display: initial;
	}
	
#buttonDiv div {
	flex: 1 30%;
	cursor: pointer;
	padding: 2.5%;
	font-size: 87%;
  display: initial;
	}
	
.active {
	flex: 1 100%;
  display: initial;
	}
	
hr {
	transition: all .2s linear;
	border: 1px outset #87acff;
	}
	
#article-form {
	margin-left: 3%;
	padding: 3%;
	font-family: lato;
	}
	
#article-form textarea {
	width: 95%;
}

label {
	font-weight: bold;
	}

.format {
	width: 60%;
	height: 40px;
	border: 1px solid #999;
	margin: 0 auto;
}	

#article-form input:last-child {
	padding: 1%;
	background: #286090;
}

JavaScript

$(document).ready(function() {
	
	var section = document.querySelector("section");
	var firstChild = section.querySelectorAll("div")[0];
	var buttonDiv = document.createElement("DIV");
	buttonDiv.setAttribute("ID", "buttonDiv");
	var insertedDiv = section.insertBefore(buttonDiv, firstChild);
	var line = document.createElement("hr");
	//section.insertBefore(line, firstChild);
	
	var mainDivs = $("section > div:not([id='buttonDiv'])");
	Array.prototype.forEach.call(mainDivs, function(b){ 
	var newDiv = document.createElement("DIV");
	newDiv.dataset.buttonName = b.getAttribute("ID");
	insertedDiv.appendChild(newDiv);
	});
	
	$(line).css.flex = $("#buttonDiv div:first-child").css.flex;
	Array.prototype.forEach.call(insertedDiv.querySelectorAll("div"), function(b){
	$(mainDivs[0]).addClass("active");
	b.addEventListener("click", function(e){
	var i = parseInt(e.target.dataset.buttonName, 10); // getting the equivalent integer of current pressed
	if (mainDivs[i].className !== "active") { //if clicked has no class active, remove active from anyone else that has it and add to clicked
		for (var j = 0; j < mainDivs.length; j++) {
		$(mainDivs[j]).removeClass("active");
		}
		$(mainDivs[i]).addClass("active");
		$(line).css("transform", 'translatex(' + $('mainDivs div.active').offset.left + 'px)');
	}	
	});
	});	
	var eachButton = document.querySelector("#buttonDiv").querySelectorAll("div");
	eachButton[0].innerHTML = "Blog";
	eachButton[1].innerHTML = "Sermons";
	eachButton[2].innerHTML = "Home";
	eachButton[3].innerHTML = "Inbox";
	});