Custom accordian

I am trying to add a custom accordian element to my website; can i paste the code below into the code block item?
This is the accordian, in imgur: http://imgur.com/FwzRmMb
Code begins:

<main class=”mxBack”>

<header class=”mxHeader”>
<nav class=”control”>

<li class=”iron active”>Iron man
<li class=”cap”>Captain
<li class=”bw”>Black Widow
<li class=”thor”>Thor

</nav>
</header>

<section class=”mxBody”>
<div class=”content”>
<div class=”inner iron active”>
<h1>Iron man</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque varius orci sed justo venenatis pellentesque. Duis eget lacus quis tortor interdum fringilla. Pellentesque non risus vel odio adipiscing posuere at ut neque. Sed vel justo vitae risus commodo tincidunt. Sed ornare felis eros.</p>
</div>
<div class=”inner cap”>
<h1>Captain America</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque varius orci sed justo venenatis pellentesque. Duis eget lacus quis tortor interdum fringilla. Pellentesque non risus vel odio adipiscing posuere at ut neque. Sed vel justo vitae risus commodo tincidunt. Sed ornare felis eros. Proin lobortis augue in semper aliquam. Phasellus hendrerit erat at dolor tempus laoreet. Nunc elit velit, congue at bibendum sit amet, tincidunt eget lectus. Donec venenatis, nisl at condimentum lacinia, ligula arcu commodo orci, id consequat lorem erat vitae neque.</p>
</div>
<div class=”inner bw”>
<h1>Black Widow</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque varius orci sed justo venenatis pellentesque. Duis eget lacus quis tortor interdum fringilla. Pellentesque non risus vel odio adipiscing posuere at ut neque. Sed vel justo vitae risus commodo tincidunt. Sed ornare felis eros. Proin lobortis augue in semper aliquam. Phasellus hendrerit erat at dolor tempus laoreet. Nunc elit velit, congue at bibendum sit amet, tincidunt eget lectus. Donec venenatis, nisl at condimentum lacinia, ligula arcu commodo orci, id consequat lorem erat vitae neque. Morbi sed lectus lobortis, fermentum urna vulputate, imperdiet lectus. Integer sagittis est nisl, non feugiat elit tincidunt in. Cras non nisi ultricies, venenatis sem at, eleifend quam. Sed arcu dolor, egestas sed mauris eu, auctor volutpat tellus.</p>
</div>
<div class=”inner thor”>
<h1>Thor</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque varius orci sed justo venenatis pellentesque. Duis eget lacus quis tortor interdum fringilla. Pellentesque non risus vel odio adipiscing posuere at ut neque. Sed vel justo vitae risus commodo tincidunt. Sed ornare felis eros. Proin lobortis augue in semper aliquam. Phasellus hendrerit erat at dolor tempus laoreet. Nunc elit velit, congue at bibendum sit amet, tincidunt eget lectus. Donec venenatis, nisl at condimentum lacinia, ligula arcu commodo orci, id consequat lorem erat vitae neque. Morbi sed lectus lobortis, fermentum urna vulputate, imperdiet lectus. Integer sagittis est nisl, non feugiat elit tincidunt in. Cras non nisi ultricies, venenatis sem at, eleifend quam. Sed arcu dolor, egestas sed mauris eu, auctor volutpat tellus.</p>
<p>Proin vitae eleifend massa. Phasellus feugiat vestibulum urna, hendrerit fringilla mauris molestie non. Proin accumsan mi eget ullamcorper venenatis. Sed commodo purus orci, a eleifend ante sodales pellentesque. Cras ut dignissim neque.</p>
</div>
</div>
<div class=”backgrounds”>
<div class=”bg iron active”></div>
<div class=”bg cap”></div>
<div class=”bg bw”></div>
<div class=”bg thor”></div>
</div>
</section>
</main>

.mxBack {
color:black;
height:100vh;
overflow:hidden;
}

.mxHeader {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 3em;
padding: 0.5em;
background-color: #fff;
z-index: 150;
@media (min-width: 48em) {
height: 5em;
padding: 1em;
}

nav ul {
list-style-type: none;
text-align: right;
li {
display: inline-block;
padding: 0.1em;
font-size: 1em;
border: 0.1em solid #000;
margin-right: 0.2em;
text-transform: uppercase;
cursor: pointer;
transition: color, background-color 0.4s;

&:hover {
background-color: #000;
color: #fff;
}
@media (min-width: 48em) {

font-size: 1.5em;
padding: 0.2em;
border: 0.2em solid #000;
margin-right: 0.5em;

}
}
li.active {
background-color: #000;
color: #fff;
}
}
nav.in-action ul li {
opacity: 0.4;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
}

.mxBody {
height: calc(~”100% – 5em”); overflow:hidden;
}

.mxBody {
position: absolute;
top: 3em;
right: 0;
bottom: 0;
left: 0;
z-index: 50;
@media (min-width: 48em) {

top: 5em;

}
.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
padding: 2em;
overflow-y: auto;
background-color: rgba(255, 255, 255, 0.8);
@media (min-width: 48em) {
width: 40%;
}
}

}

.mxBody .content .inner {
display: none;
}
.mxBody .content .inner.active {
display: block;
-webkit-animation: showTextBlock 1s;
animation: showTextBlock 1s;
}
.mxBody .content .inner h1 {
font-size: 2em;
margin-bottom: 1em;
text-transform: uppercase;
font-family: decade, sans-serif;
}
.mxBody .content .inner p {
font-size: 1.25em;
margin-bottom: 0.75em;
font-family: pt-reg, sans-serif;
}
.mxBody .backgrounds .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;

transition: 1.5s;
will-change: transform;
z-index: 60;
}
.mxBody .backgrounds .bg.iron {
background-image: url(“http://i.imgur.com/PbV1Grl.jpg&#8221;);

transform: translateX(-100%);
}
.mxBody .backgrounds .bg.cap {
background-image: url(“http://i.imgur.com/VWYl1EC.jpg&#8221;);

transform: translateY(-100%);
}
.mxBody .backgrounds .bg.bw {
background-image: url(“http://i.imgur.com/ga3BiDw.jpg&#8221;);

transform: translateX(100%);
}
.mxBody .backgrounds .bg.thor {
background-image: url(“http://i.imgur.com/jAY4044.jpg&#8221;);

transform: translateY(100%);
}
.mxBody .backgrounds .bg.active {
transform: translateZ(0);
z-index: 70;
}
.mxBody .backgrounds .bg.fast {
transition-duration: 0s;
}

@keyframes showTextBlock {
0% {
opacity: 0;
transform: scale(0.5);
}
80% {
opacity: 1;
transform: scale(1.05);
}
100% {
opacity: 1;
transform: scale(1);
}
}

$(document).ready(function() {

var inAction = false;

$(“.control li”).click(function() {

if ($(this).attr(“class”) === $(“.control li.active”).attr(“class”)) {
return;
}

if (!inAction) {

var actClass = $(this).attr(“class”).replace(/\bactive\b/, “”),
previous = $(“.bg.active”),
bgTransDur = parseFloat(previous.css(“transition-duration”), 10) * 1000,
trans;

if (actClass === “iron”) {
trans = “translateX(100%)”;
} else if (actClass === “cap”) {
trans = “translateY(100%)”;
} else if (actClass === “bw”) {
trans = “translateX(-100%)”;
} else if (actClass === “thor”) {
trans = “translateY(-100%)”;
}
inAction = true;
console.log(bgTransDur);
$(“.control li.active”).removeClass(“active”);
$(this).addClass(“active”);
$(“.control”).addClass(“in-action”);
$(“.content .inner.active”).removeClass(“active”);
$(“.bg.active”).removeClass(“active”);
previous.css(“transform”, trans);

/* hack for returning bg in original state */
setTimeout(function() {
previous.addClass(“fast”);
previous.attr(“style”, “”);
previous.css(“transform”);
previous.removeClass(“fast”);
}, bgTransDur);

$(“.content .inner.” + actClass).addClass(“active”);
$(“.bg.” + actClass).addClass(“active”);
$(“.content”).scrollTop(0);

setTimeout(function() {
inAction = false;
$(“.control”).removeClass(“in-action”);
}, bgTransDur + 100);
}
});
});

Thank you!