$(document).ready(function() {
$(".desc").hide();
$(".desc:first").show();
$("h3.open-close").click(function(){
if ($(this).is(".current"))
{
$(this).removeClass("current");
$(this).next(".desc").slideUp(400);
}
else
{
$(".desc").slideUp(400);
$("h3.open-close").removeClass("current");
$(this).addClass("current");
$(this).next(".desc").slideDown(400);
}
});
});
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
border: 0 none;
font: inherit;
margin: 0;
padding: 0;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none outside none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
background-color: #F2F3F3;
background-image: url("images/bg.jpg");
background-repeat: repeat;
color: #333333;
font-family: 'DroidSerifRegular',Arial,sans-serif;
font-size: 13px;
line-height: 22px;
text-shadow: 1px 1px 1px #FFFFFF;
}
A:link {
color: #333333;
text-decoration: none;
}
A:visited {
text-decoration: none;
}
A:active {
text-decoration: none;
}
A:hover {
color: #57AEAE;
text-decoration: none;
}
@font-face {
font-family: "BebasRegular";
font-style: normal;
font-weight: normal;
src: url("fonts/BEBAS___-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/BEBAS___-webfont.woff") format("woff"), url("fonts/BEBAS___-webfont.ttf") format("truetype"), url("fonts/BEBAS___-webfont.svg#BebasRegular") format("svg");
}
@font-face {
font-family: "DroidSerifRegular";
font-style: normal;
font-weight: normal;
src: url("fonts/DroidSerif-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/DroidSerif-Regular-webfont.woff") format("woff"), url("fonts/DroidSerif-Regular-webfont.ttf") format("truetype"), url("fonts/DroidSerif-Regular-webfont.svg#DroidSerifRegular") format("svg");
}
@font-face {
font-family: "DroidSerifBold";
font-style: normal;
font-weight: normal;
src: url("fonts/DroidSerif-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/DroidSerif-Bold-webfont.woff") format("woff"), url("fonts/DroidSerif-Bold-webfont.ttf") format("truetype"), url("fonts/DroidSerif-Bold-webfont.svg#DroidSerifBold") format("svg");
}
@font-face {
font-family: "GoudyBookletter1911Regular";
font-style: normal;
font-weight: normal;
src: url("fonts/goudybookletter1911-openamp.eot?iefix") format("eot"), url("fonts/goudybookletter1911-openamp.woff") format("woff"), url("fonts/goudybookletter1911-openamp.ttf") format("truetype"), url("fonts/goudybookletter1911-openamp.svg#webfont0ZQvEa4G") format("svg");
}
.openamp {
font-family: GoudyBookletter1911Regular;
}
h1.fontface {
color: #57AEAE;
font: 34px/44px 'BebasRegular',Arial,sans-serif;
letter-spacing: 0;
text-shadow: 1px 1px 1px #FFFFFF;
}
h2.fontface {
color: #666666;
font: 18px/27px 'DroidSerifBold',Arial,sans-serif;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #FFFFFF;
}
h3.fontface {
color: #666666;
font: 18px/27px 'BebasRegular',Arial,sans-serif;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #FFFFFF;
}
h4.fontface {
color: #F1F2F2;
font: 10px/23px 'DroidSerifBold',Arial,sans-serif;
letter-spacing: 1px;
text-shadow: 0 0 0 #FFFFFF;
}
#header {
background-color: #57AEAE;
height: 8px;
position: relative;
width: 100%;
}
#wrap {
min-height: 100%;
}
#main {
margin: 0 auto;
min-height: 100%;
overflow: auto;
padding-bottom: 100px;
position: relative;
width: 970px;
}
#logo {
float: left;
padding-top: 30px;
width: 960px;
}
#logo_text {
float: left;
}
#social {
float: right;
margin-top: 25px;
}
#twitter {
float: right;
}
#facebook {
float: right;
padding-right: 10px;
}
#mail {
float: right;
padding-right: 10px;
}
#slider_container {
background-color: #FFFFFF;
float: left;
height: 260px;
margin-bottom: 30px;
margin-top: 30px;
padding: 5px;
width: 950px;
}
.theme-default #slider {
height: 260px;
width: 950px;
}
#container {
float: left;
margin-bottom: 30px;
margin-top: 30px;
overflow: hidden;
padding: 0;
width: 960px;
}
#accordian_wrap {
float: left;
width: 960px;
}
.open-close {
background-image: url("js/images/open.png");
background-position: right 13px;
background-repeat: no-repeat;
font-family: 'BebasRegular';
position: relative;
text-shadow: 1px 1px 1px #FFFFFF;
width: 100%;
}
.open-close a {
background-image: url("js/images/border.gif");
background-position: left bottom;
background-repeat: repeat-x;
color: #57AEAE;
display: block;
font-size: 24px;
padding-bottom: 10px;
padding-top: 10px;
text-decoration: none;
text-transform: uppercase;
}
.open-close a:hover {
}
.current {
background-attachment: scroll;
background-image: url("js/images/close.png");
background-position: right 13px;
background-repeat: no-repeat;
color: #189ACB;
}
.desc {
background-image: url("js/images/border.gif");
background-position: left bottom;
background-repeat: repeat-x;
overflow: hidden;
padding-bottom: 20px;
padding-top: 20px;
}
#content-top {
border-bottom: 3px solid #349BA8;
float: left;
height: 24px;
width: 100%;
z-index: 8;
}
#close-tab {
background-image: url("js/images/close1.png");
background-position: center top;
background-repeat: no-repeat;
height: 24px;
position: absolute;
right: 0;
top: 0;
width: 25px;
z-index: 99;
}
#close-tab a {
display: block;
height: 100%;
width: 100%;
z-index: 99;
}
#welcome {
float: left;
width: 150px;
}
#welcome_info {
margin-top: 10px;
}
.photo_frame {
background-color: #FFFFFF;
float: left;
height: 150px;
margin-top: 5px;
padding: 5px;
width: 150px;
}
#hello {
float: left;
padding-left: 75px;
width: 500px;
}
#hello_info {
margin-top: 10px;
}
#skills {
float: left;
padding-left: 60px;
width: 175px;
}
#skills_info {
margin-top: 10px;
}
#ticks {
float: left;
margin-top: 2px;
}
#info {
float: right;
line-height: 23px;
padding-right: 30px;
}
#cv {
float: left;
padding-top: 5px;
width: 175px;
}
#cv_logo {
float: left;
margin-top: -5px;
}
#cv_info {
float: right;
line-height: 20px;
padding-right: 75px;
}
.gallery_frame {
background-color: #FFFFFF;
float: left;
height: 150px;
margin-left: 20px;
margin-top: 5px;
padding: 5px;
width: 150px;
}
.empty {
float: left;
height: 15px;
width: 960px;
}
#blog {
float: left;
margin-right: 7px;
width: 960px;
}
#blog_info {
margin-bottom: 10px;
margin-top: 10px;
}
#contact {
float: left;
margin-right: 7px;
width: 250px;
}
#contact_info {
margin-top: 10px;
}
#ways {
float: left;
margin-left: 70px;
width: 350px;
}
#ways_info {
margin-top: 10px;
}
#form {
float: left;
margin: 0;
position: relative;
width: 900px;
}
#form p {
color: #999999;
padding-right: 25px;
padding-top: 15px;
}
#form div {
float: left;
margin: 0;
padding: 0;
position: relative;
width: 300px;
}
#form div label {
display: block;
font-size: 0.9em;
width: 310px;
}
.success {
background-color: #FFFFFF;
float: left;
padding: 20px 30px;
width: 920px;
}
.error {
color: #CC0000;
font-size: 11px;
position: absolute;
right: 12px;
top: 0;
}
#form input, textarea {
background-color: #EEEEEE;
border-color: #C7C7C7 #E6E6E6 #E6E6E6 #C7C7C7;
border-radius: 3px 3px 3px 3px;
border-style: solid;
border-width: 1px;
color: #CCCCCC;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
margin: 0 0 8px;
padding: 11px 5px;
width: 275px;
}
#form textarea {
height: 85px;
width: 300px;
}
#form input:focus, textarea:focus {
background-color: #E1E1E1;
border-color: #B4B4B4 #D6D6D6 #D6D6D6 #B4B4B4;
color: #666666;
}
#form .submit {
background-attachment: scroll;
background-color: #57AEAE;
background-image: none;
background-position: 0 0;
background-repeat: repeat;
border: medium none;
border-radius: 3px 3px 3px 3px;
color: #EEEEEE;
cursor: pointer;
float: right;
font-family: 'DroidSerifRegular',Arial,sans-serif;
font-size: 13px;
margin-bottom: 0;
margin-right: -15px;
margin-top: 0;
padding-bottom: 6px;
padding-top: 6px;
position: relative;
text-align: center;
width: 315px;
}
#form .submit:hover, .submit.focus {
background-color: #666666;
color: #FFFFFF;
}
#form em {
color: #CCCCCC;
font-size: 0.9em;
font-style: italic;
}
#footer {
background: url("images/bg_footer.gif") repeat scroll 0 0 transparent;
clear: both;
height: 50px;
margin-top: -50px;
position: relative;
}
body:before {
content: "";
float: left;
height: 100%;
margin-top: -32767px;
width: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="accordian_wrap">
<div id="container">
<h3 class="open-close"><a href="javascript:void()"><span style="margin-left: 0px;">About Me</span></a></h3>
<div class="desc" style="display: none;">
<div id="welcome">
<h3 class="fontface">Welcome</h3>
<div id="welcome_info">
<div class="photo_frame"> <img src="http://placehold.it/150x150"> </div>
</div>
</div>
<div id="hello">
<h3 class="fontface">Hello</h3>
<div id="hello_info">
<p class="fontface">I'm Edward Manson a web and graphics designer based in Belfast. I'm currently on my placement year working at Visionworks Interactive where I'm getting the opportunity to work on several projects as well as working within a dedicated and experienced team. I like anything that's compelling, intuitive and bespoke and try to implement these ideals when developing new ideas and pieces of work. I enjoy everything about design and work hard to always meet the goals of all parties involved. Have a look
at my work and if you have any queries or questions please feel free to get in contact.</p>
</div>
</div>
<div id="skills">
<h3 class="fontface">Skills</h3>
<div id="skills_info">
<div id="ticks">
<p><img src="images/ticks.png"></p>
</div>
<div id="info">
<p>HTML & CSS </p>
<p>Javascript & Jquery </p>
<p>Graphics & Layouts </p>
<p>PHP, Wordpress</p>
</div>
<div id="cv">
<div id="skills_info">
<div id="cv_logo">
<p><img src="images/cv.png"></p>
</div>
<div id="cv_info">
<p><a href="images/personal_cv1.docx">View my CV</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<h3 class="open-close"><a href="javascript:void()"><span style="margin-left: 0px;">My Work</span></a></h3>
<div class="desc" style="display: none;">
<div class="photo_frame"><a title="Rapid International Website Design" href="images/rapid.png" rel="example_group"><img src="images/rapid_1.png"></a></div>
<div class="gallery_frame"><a title="Comhairle Interactive Map" href="images/map.png " rel="example_group"><img src="images/map_1.png"></a></div>
<div class="gallery_frame"><a title="Alternative Heat Website Design" href="images/alternative_heat.png" rel="example_group"><img src="images/alternativeheat_1.png"></a></div>
<div class="gallery_frame"><a title="Omagh Town Centre Website Design" href="images/omagh-web.png " rel="example_group"><img src="images/omagh_1.png"></a></div>
<div class="empty"></div>
</div>
<h3 class="open-close"><a href="javascript:void()"><span style="margin-left: 0px;">Blog</span></a></h3>
<div class="desc" style="display: none;">
<div id="blog">
<h3 class="fontface">September</h3>
<div id="blog_info">
<p class="fontface">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<h3 class="fontface">October</h3>
<div id="blog_info">
<p class="fontface">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<h3 class="fontface">November</h3>
<div id="blog_info">
<p class="fontface">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<h3 class="fontface">December</h3>
<div id="blog_info">
<p class="fontface">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
<h3 class="open-close"><a href="javascript:void()"><span>Contact Me</span></a></h3>
<div class="desc" style="display: none;">
<div id="contact">
<h3 class="fontface">Get In Contact</h3>
<div id="blog_info">
<p class="fontface">If you'd like to work with me or provide me with feedback or feelings on any of my work fill out the form on the right and I'll get back in contact as quick as possble. I always like to hear from people so feel free.</p>
</div>
</div>
<div id="ways">
<h3 class="fontface">Contact Form</h3>
<div id="ways_info">
<form action="send.php" method="post" class="contactForm" id="form">
<div class="holder"> </div>
<div class="holder">
<div>
<label>Name<em>*</em></label>
<input type="text" class="requiredField" name="name">
</div>
<div>
<label>Email <em>*</em></label>
<input type="text" class="requiredField email" name="email">
</div>
</div>
<div class="holder">
<div>
<label>Message</label>
<textarea cols="60" rows="6" name="message"></textarea>
</div>
<div>
<input type="submit" title="Please make sure you filled out all required fields." class="submit toolTip" value="Submit">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>