We Keep Coding

Popup Accordions not working With jQuery?

I am making a popup modal box in which when the user click on more information new modal box again popup on the same page but it's not working properly I have tried everything,Example of Popup Modal if you click more information new box open ups, I am trying something like this.
Also please hide the popup on accept and deny button and set a cookie for popup
CSS
< script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" > < /script>
$(document).ready(function() {
$(".footerr ul li:last-child").click(function(e) {
e.preventDefault();
$('#popUpContain').css('display', 'none');
$(".serviceMainContent1").css('display', 'block');
})
$("#closeInfoBtn").click(function(e) {
e.preventDefault();
$('#popUpContain').css('display', 'block');
$(".serviceMainContent1").css('display', 'none');
})
$(".cat_btn").click(function(e) {
e.preventDefault();
$(".serv_btn a").css({
"color": "#303030"
});
$(".serv_btn").css({
"border-bottom": "none"
});
$('#services1').css('display', 'none');
$("#category").css('display', 'block');
$(".cat_btn a").css({
"color": "blue"
});
$(".cat_btn").css({
"border-bottom": "2px solid blue"
});
});
$(".serv_btn").click(function(e) {
e.preventDefault();
$(".cat_btn a").css({
"color": "#303030"
});
$(".cat_btn").css({
"border-bottom": "none"
});
$("#category").css('display', 'none');
$('#services1').css('display', 'block');
$(".serv_btn a").css({
"color": "blue"
});
$(".serv_btn").css({
"border-bottom": "2px solid blue"
});
})
var acc = document.getElementsByClassName("accordion1");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.popUp {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
display: block;
background-color: white;
}
#language {
width: 57px;
padding: 4px;
border: 1px solid #dbdbdb;
}
.header1 {
display: flex;
justify-content: flex-end;
}
.container1,
.serviceMainContent1 {
display: flex;
flex-direction: column;
width: 595px;
padding: 14px;
box-shadow: -1px 16px 34px 2px #dbdbdb;
border-radius: 7px;
}
.bodyy h3 {
color: #303030;
}
.bodyy p {
line-height: 19px;
margin-top: 10px;
font-size: 13px;
}
.footerr>a {
padding: 7px 90px;
border-radius: 9px;
margin: 0px 10px;
}
.footerr>.deny {
background-color: #ededed;
color: #303030;
}
.footerr>.accept {
background-color: #0096FF;
color: #fff;
}
.footerr>.deny:hover {
background-color: #f4f2f2;
}
.footerr>.accept:hover {
background-color: #4eabf7;
}
.footerr>a:hover {
text-decoration: none;
}
.footerr>p {
text-align: center;
padding-top: 10px;
font-size: 12px;
}
.footerr>ul {
display: flex;
list-style: none;
font-size: 13px;
}
.footerr>ul li {
padding-right: 10px;
color: #c4c2c2;
}
/* more information css */
.serviceMainContent1 {
height: 654px;
overflow-y: scroll;
display: none;
}
.header1 a {
font-size: 20px;
width: 40px;
text-align: center;
}
.header1 a:hover {
text-decoration: none;
color: #303030;
}
.categoryServices1 {
height: 436px;
width: 563px;
overflow-y: scroll;
background-color: #f8f7f7;
}
.cat_serv_btn,
.footerBtn {
display: flex;
text-align: center;
}
.cat_serv_btn .cat_btn,
.cat_serv_btn .serv_btn,
.footerBtn a {
width: 50%;
}
.cat_btn,
.serv_btn {
padding: 10px 0px;
}
.cat_btn:active,
.serv_btn:active {
border-bottom: 2px solid blue;
}
.cat_btn a:active,
.serv_btn a:active {
color: blue;
}
.cat_btn a:hover,
.serv_btn a:hover {
text-decoration: none;
}
.bodyy span {
padding: 20px 20px 20px 0;
}
.bodyy a,
.bodyy i {
font-size: 13px;
}
.footerBtn a {
padding: 5px 0px;
border-radius: 5px;
margin: 0px 10px;
color: #303030;
}
.footerBtn a:hover {
text-decoration: none;
}
.footerBtn .save,
.footerBtn .deny {
background-color: #f5f5f5;
}
.footerBtn .save:hover,
.footerBtn .deny:hover {
background-color: #e7e6e6;
}
.footerBtn .close {
background-color: #0096FF;
color: #fff;
}
.footerBtn .close:hover {
background-color: #4eabf7;
}
/* switch buttons */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 25px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider1 {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider1:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider1 {
background-color: #2196F3;
}
input:focus+.slider1 {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider1:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider1.round {
border-radius: 34px;
}
.slider1.round:before {
border-radius: 50%;
}
/* accordions */
.accordion1 {
margin: 20px 0px;
width: 500px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.accordion1 div p {
font-size: 13px;
}
.accordion1 {
display: flex;
background-color: #fff;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion1:hover {
background-color: #fff;
}
.panel {
padding: 0px 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.panel p {
font-size: 13px;
}
#services1 {
display: none;
}
/* media query for mobile device */
#media only screen and (max-width: 600px) {
.container {
width: 400px;
}
.footerr>a {
padding: 5px 40px;
}
}
<div class="popUp">
<div class="container1" id="popUpContain">
<div class="header1">
<img src="img/logo.png" alt="" width="20">
<div style="margin-right: auto; margin-left: 10px;"><b>BCT-Touristik</b></div>
<!-- <select name="" id="language">
<option value="DE">DE</option>
<option value="EN">EN</option>
</select> -->
</div>
<div class="bodyy">
<h3>We value your privacy</h3>
<p>We and our partners are using technologies like Cookies or Targeting and process personal data like IP-address or browser information in order to personalize the advertisement you see. This helps us to show you more relevant ads and improves your
internet experience. We also use it in order to measure results or align our website content. Because we value your privacy, we are herewith asking your permission to use the following technologies. You can always change/withdraw your consent
later by clicking on the settings button on the left lower corner of the page.</p>
</div><br>
<div class="footerr">
<ul>
<li><i class="fa fa-link" aria-hidden="true"></i> Privacy Policy</li>
<li><i class="fa fa-link" aria-hidden="true"></i> Legal Notice</li>
<li><i class="fa fa-cog" aria-hidden="true"></i> Travel Condition</li>
<li><i class="fa fa-cog" aria-hidden="true"></i> More information</li>
</ul><br>
<b>Deny</b>
<b>Accept and close</b>
<p>Powered by BCT-Touristik</p>
</div>
</div>
<div class="serviceMainContent1">
<div class="headerBody">
<div class="header1">
<img src="" alt="">
<select name="" id="language">
<option value="DE">DE</option>
<option value="EN">EN</option>
<option value="PT">PT</option>
</select>
✖
</div>
<div class="bodyy">
<h3>Privacy Settings</h3>
<p>This tool helps you to select and deactivate various tags / trackers / analysis tools used on this website. </p>
<span><i class="fa fa-link" aria-hidden="true"></i> Privacy Policy</span>
<span><i class="fa fa-link" aria-hidden="true"></i> Legal Notice</span>
</div>
<div class="cat_serv_btn">
<div class="cat_btn">
<b>Categories</b>
</div>
<div class="serv_btn">
<b>Services</b>
</div>
</div>
<div class="categoryServices1">
<div id="category1">
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Functional</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Functional</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Functional</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Functional</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div id="services1">
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Services</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Services</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="footer">
<br>
<div class="footerBtn">
<a class="save" href=""><b>Save</b></a>
<a class="deny" href=""><b>Deny</b></a>
<a class="close" href=""><b>Accept and close</b></a>
</div>
<p>Powered by Usercentrics Consent Management</p>
</div>
</div>
</div>
</div>
</div>
Suggest me where I am going wrong in this I need to open another modal box on more info click?

How do I recreate this toggle in CSS?

I'm trying to recreate this toggle in CSS/HTML and JavaScript. When closed the toggle shows the title: 'Stap 2 Implementatie in de organisatie' and an icon (circle with a plus in it).
When open, it shows some text, and beneath it a section with downloadable tools, they could be implemented as images next to each other, but it's probably more versatile if it's the icon and text separated.
I've managed to create the title, the text underneath it, I just need help with:
Different icon for closed and open toggle
Extra green section in toggle
How to have 20px border radius on button, but only keep the top left and right border radius when clicked/open. (see extra screenshot)
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
.accordion {
background-color: #7d206a;
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
transition: 0.4s;
font-weight:600;
font-family:'Dosis';
border-top-left-radius:20px;
border-top-right-radius:20px;
}
.icon {
float:right;
}
.header {
color:#45b072;
}
.active, .accordion:hover {
background-color: #7d206a;
}
p {
color:#fff;
font-family:'Dosis';
}
.panel {
padding: 0 18px;
display: none;
background-color: #7d206a;
overflow: hidden;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
}
<h2>Accordion</h2>
<button class="accordion"><span class="header">Stap 2</span> Implementatie in de organisatie<span class="icon">icon</span></button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

You can try it like this, I have explained the changes in comments.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
.accordion {
background-color: #7d206a;
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
transition: 0.4s;
font-weight: 600;
font-family: 'Dosis';
border-radius: 20px; /* You can have border-radius on all sides */
}
.accordion.active {
border-bottom-left-radius: 0px; /* You can set the border-radius of bottom part to 0 */
border-bottom-right-radius: 0px;
}
.icon {
float: right;
height: 30px; /* Define height and width for the icon */
width: 30px;
background-image: url("https://i.stack.imgur.com/Vvuj2.png"); /* Image for the closed panel */
}
.active .icon {
/* Icon for the active panel */
background-image: url("https://i.stack.imgur.com/ZAR5V.png");
}
.header {
color: #45b072;
}
.active,
.accordion:hover {
background-color: #7d206a;
}
p {
color: #fff;
font-family: 'Dosis';
}
.panel {
padding: 0 18px;
display: none;
background-color: #7d206a;
overflow: hidden;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.green-content { /* Properties for the new content */
display: grid;
grid-template-columns: repeat(4, 1fr); /* Four columns for your content as per image */
background: #45b072;
margin: 0 -18px; /* Negative margin so that the parent padding doesn't affect it */
margin-top: 10px;
padding: 18px; /* Same padding as parent */
color: white;
}
<h2>Accordion</h2>
<button class="accordion"><span class="header">Stap 2</span> Implementatie in de organisatie<span class="icon"></span></button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="green-content">
<!-- Extra content added -->
<div class="column-1">
Content
</div>
<div class="column-2">
Content
</div>
<div class="column-3">
Content
</div>
<div class="column-4">
Content
</div>
</div>
</div>

There are probably a lot of takes for this opinion but I think you should ditch the panel.style.dipslay and use class approach instead. So the gist of it is that you add an open state class to the wrapper and based on that you do stuff. I have set it up a bit for you so you can use the class accordion-container--is-open to do stuff with your css when the accordion is open
var accordions = document.querySelectorAll(".accordion-container");
accordions.forEach(element => {
const toggler = element.querySelector('.accordion')
toggler.addEventListener('click', function() {
element.classList.toggle('accordion-container--is-open')
})
})
.accordion {
display: flex;
align-items: center;
background-color: #7d206a;
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
transition: 0.4s;
font-weight: 600;
font-family: 'Dosis';
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.icon {
margin-left: auto;
}
.accordion-container--is-open .icon {
color: aqua;
}
.header {
color: #45b072;
}
.active,
.accordion:hover {
background-color: #7d206a;
}
p {
color: #fff;
font-family: 'Dosis';
}
.panel {
display: none;
background-color: #7d206a;
overflow: hidden;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.panel > * {
padding: 0 18px;
}
.accordion-container--is-open .panel {
display: block;
}
.accordion__footer {
display: flex;
align-items: center;
height: 4rem;
background-color: lime;
}
.accordion__footer-icon {
width: 2rem;
height: 2rem;
background-color: aqua;
}
<h2>Accordion</h2>
<div class="accordion-container">
<button class="accordion"><span class="header">Stap 2</span> Implementatie in de organisatie<span class="icon">icon</span></button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="accordion__footer">
<span class="accordion__footer-icon">1</span>
<span class="accordion__footer-icon">2</span>
<span class="accordion__footer-icon">3</span>
</div>
</div>
</div>

Have a play with this
I use delegation and content. You can change content for background image
const container = document.getElementById("container");
container.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("icon")) {
const button = tgt.closest("button");
tgt.classList.toggle("open");
const close = !tgt.classList.contains("open");
tgt.classList.toggle("close",close);
const panel = button.nextElementSibling;
panel.classList.toggle("hide",!close)
}
})
.accordion {
background-color: #7d206a;
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
transition: 0.4s;
font-weight: 600;
font-family: 'Dosis';
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.icon {
float: right;
display: inline-block;
width: 50px;
}
.icon.open::after {
content: "⭕"
}
.icon.close::after {
content: "❌"
}
.header {
color: #45b072;
}
.active,
.accordion:hover {
background-color: #7d206a;
}
p {
color: #fff;
font-family: 'Dosis';
}
.panel {
padding: 0 18px;
background-color: #7d206a;
overflow: hidden;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.hide { display: none;}
<h2>Accordion</h2>
<div id="container">
<button class="accordion"><span class="header">Stap 2</span> Implementatie in de organisatie<span class="icon open"></span></button>
<div class="panel hide">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>

Sliding Animation Stutters in Accordion

I have an accordion menu with tabs. When you click on the tabs, information is displayed below one of them, by sliding up and down smoothly.
The problem is that there is a stutter in the animation, during slideUp and slideDown. I also tried animate and adjusting some of the css, but I can't figure it out.
If it helps, here's the fiddle.
HTML:
<div class="project-container">
These don't slide well:
<ul class="project-nav">
<li class="project-tab" id="project-tab-1"><a id="project-tab-link" href="#" class="active">Tab 1</a>
<section class="is-open">
<p id="current-project-title">TITLE</p>
<p>TEXT HERE</p>
</section>
</li>
<li class="project-tab" id="project-tab-2"><a id="project-tab-link" href="#">Tab 2</a>
<section>
INFO HERE<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
</li>
</ul>
</div>
<br>
But this slides VERY well:
<br>
<button class="toggle-info">toggle slider<i class="glyphicon glyphicon-chevron-down"></i></button>
<section class="info-container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </section>
Javascript:
$(document).ready(function() {
var Tabs = {
el: {
nav: $(".project-nav"),
tabs: $(".project-nav > .project-tab > a"),
panels: $(".project-nav > .project-tab > section"),
},
init: function() {
Tabs.bindUIActions();
},
bindUIActions: function() {
Tabs.el.nav
.on(
'click',
'.project-tab > a:not(.active)',
function(event) {
Tabs.deactivateAll();
Tabs.activateTab(event);
event.preventDefault();
}
);
},
deactivateAll: function() {
Tabs.el.tabs.removeClass("active");
Tabs.el.panels.removeClass("is-open").slideUp('slow');
},
activateTab: function(event) {
$(event.target)
.addClass("active")
.next()
.addClass("is-open").slideDown('slow');
}
};
Tabs.init();
////// Slide Doesn't Work For Tabs
$('.project-tab section.is-open').slideDown('slow');
////// Slide Works For Toggle Button
$('.toggle-info').click(function() {
$('.info-container').slideToggle('slow');
$("i", this).toggleClass("glyphicon glyphicon-chevron-right glyphicon glyphicon-chevron-down");
});
});

This your problem
.project-nav section, .project-nav section.is-open, .project-nav .project-tab a:hover, .project-nav .project-tab a.active, #current-project-link,
#current-project-link:hover, .project-nav section.is-open, .project-nav section {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
You add transition css to slide element, it make slide effect not working correctly, you must remove it
you can try this jsfiddle

I was able to achieve the desired effect using CSS, instead of jquery. I used max-height transitions to make the tabs slide both up and down smoothly.
Here's the updated fiddle.
And here's the new CSS:
///// RESPONSIVE ACCORDION TO TABS
.project-container {
display: block;
}
.project-nav {
list-style: none;
position: relative;
}
.project-nav a:active{
opacity:1;
}
.project-nav .project-tab {
display: inline;
}
.project-nav > .project-tab > a {
display: inline-block;
padding: 10px 15px;
background-color: #00A88C;
border: solid 1px #00A88C;
border-radius: 0px 10px;
text-decoration: none;
color: #fff;
width:40%;
font-size: 30pt;
clear: both;
text-align: center;
}
#project-tab-1 {
margin-right: 2%;
margin-left: 7%;
}
#project-tab-2 {
margin-left: 2%;
}
#project-tab-link:hover {
background-color: #13ebc7;
border-color: #13ebc7;
}
#project-tab-link.active {
color: #00A88C!important;
background-color: rgba(19, 235, 199, 0)!important;
}
#project-tab-link.active:hover {
border-color: #00A88C;
}
.project-nav section {
position: absolute;
top: -9999px;
left: -9999px;
float: left;
color:#5c5c5c;
overflow: hidden;
border: solid 1px #00A88C;
width:100%;
margin-top:10px;
padding-bottom: 15px;
opacity: 0;
}
.project-nav section.is-open {
position: static;
opacity: 100;
}
.project-tab section p {
font-family:'century gothic';
padding: 0px 30px;
}
.project-tab section p:empty {
display: none;
}
#current-project-title{
font-size: 16pt;
}
#current-project-link {
float: right;
padding: 5px;
background: #00A88C;
color:#fff;
margin-right: 30px;
width: auto;
}
#current-project-link:hover {
background: #13ebc7;
}
.project-nav section, .project-nav section.is-open, .project-nav .project-tab a:hover, .project-nav .project-tab a.active, #current-project-link,
#current-project-link:hover, .project-nav section.is-open, .project-nav section {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#media only screen and (max-width: 730px) {
#front-page-textbox{
background: #0f2347;
color: #fff;
}
.project-container {
margin-bottom: 10px;
}
.project-nav .project-tab a {
display: block;
width:100%;
border-radius: 0px;
}
#project-tab-1, #project-tab-2 {
margin-left: 0;
margin-right: 0;
}
.project-nav .project-tab a.active {
border: solid 1px #13ebc7;
}
.project-nav section {
margin:0;
position: relative;
top: auto;
left: auto;
float: none;
max-height:0;
padding-bottom: 0px;
opacity: 100;
}
.project-nav section.is-open {
border-radius: 0px;
border-top: none;
max-height: 1200px;
}
.project-tab > a:after {
font-family: 'Glyphicons Halflings';
content: "\e080";
float: right;
font-size: 20pt;
margin-top: 10px;
}
.project-tab > a.active:after{
font-family: 'Glyphicons Halflings';
content: "\e114";
float:right;
font-size: 20pt;
margin-top: 10px;
}
/// TOGGLE BUTTON
.toggle-info {
display: block;
width: 100%;
color: #f5f5f5;
padding: 10px 15px;
background-color: #00A88C;
font-size: 30pt;
}
.toggle-info i{
font-size: 10pt;
margin-top: 10px;
float: right;
display: block;
}
.toggle-info:hover {
background-color: #13ebc7;
}
.toggle-info, .toggle-info:hover {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.info-container{
padding: 10px 15px;
border: solid 1px #00A88C;
}

Multiple background images, one cover the other

My ultimate goal is to have a webpage that looks something like this. Here is what I currently have.
My question is how to get the background to stick so that when the user scrolls, the rest of the text covers up the image. I saw this post and tried to play around with background-attachment: fixed but couldn't get anything to work, mainly because I have two backgrounds I'd like to use: the main picture (the kitten), and the texture I use for the background. I'm open to JavaScript or JQuery solutions if that's what it takes since I'm already using it for other features.
Here's the HTML:
<div id='cssmenu'>
<ul>
<li id="menu-one" class="active"><span>Home</span></li>
<li id="menu-two"><span>Wedding Info</span></li>
<li id="menu-three"><span>Direcitions</span></li>
<li id="menu-four"><span>Registry</span></li>
<li id="menu-five" class='last'><span>RSVP</span></li>
</ul>
</div>
<div class="before_content"></div>
<div id="item-one">
<!--<h2 class="names" name='top'>Bob + Suzy</h2>-->
<img src="http://placekitten.com/g/1000/400" alt="Snow" class="background">
</div>
<div id="item-two">
<h3 class="date">Wedding Info</h3>
<p>Paragraph 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
<div id="item-three">
<h3 class="date">Directions</h3>
<p>Paragraph 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
<div id="item-four">
<h3 class="date">Registry</h3>
<p>Paragraph 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
<div id="item-five">
<h3 class="date">RSVP</h3>
<p>Paragraph 4: Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
<footer>
Some footer text
</footer>
<script language="javascript" type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/scroll.js"></script>
</body>
CSS:
#font-face {
font-family: 'Abraham Lincoln';
src: url(../fonts/Abraham-Lincoln/AbrahamLincoln.ttf);
}
#font-face {
font-family: 'Ingleby';
src: url(../fonts/Ingleby/Ingleby_regular);
}
body {
font-family: 'Ingleby';
background-image: url(../Images/background.jpg);
background-repeat: repeat;
width: 100%;
margin: 0px;
padding: 0px;
}
.clearfix:after {
display: block;
clear: both;
}
h2.names {
font-size: 36px;
text-align: center;
font-family: 'Abraham Lincoln';
}
h3.date {
font-size: 28px;
text-align: center;
font-family: 'Abraham Lincoln';
}
h4 {
font-size: 20px;
text-align: center;
font-family: 'Abraham Lincoln';
}
p {
width: 960px;
margin-left: auto;
margin-right: auto;
font-size: 16px;
}
.background {
width: 100%;
background-attachment: fixed;
display: block;
margin: 0px auto;
margin-top: 0px;
}
footer {
text-align: right;
font-size: 12px;
height: 30px;
background-color: rgb(59, 58, 76);
width: 100%;
padding-top: 5px;
padding-bottom: 10px;
}
footer a {
text-align: right;
text-decoration: none;
display: block;
width: 960px;
margin-left: auto;
margin-right: auto;
color: black;
font-size: 12px;
padding-top: 12px;
}
footer a:hover {
text-decoration: underline;
}
#map-canvas {
height: 50%;
margin-top: 200px;
padding: 200px;
}
/* ------------ */
/* PICTURES */
/* ------------ */
.wrapper {
width: 720px;
margin: 0px auto;
display: block;
}
.grow {
-webkit-transition: all .2s ease-in-out; /* Safari and Chrome */
-moz-transition: all .2s ease-in-out; /* Firefox */
-ms-transition: all .2s ease-in-out; /* IE 9 */
-o-transition: all .2s ease-in-out; /* Opera */
transition: all .2s ease-in-out;
margin: 20px;
}
.grow:hover {
-webkit-transform: scale(1.1); /* Safari and Chrome */
-moz-transform: scale(1.1); /* Firefox */
-ms-transform: scale(1.1); /* IE 9 */
-o-transform: scale(1.1);
transform: scale(1.1);
z-index: -100;
}
/* ------------ */
/* NEW MENU */
/* ------------ */
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
font-size: 14px;
}
ul {
text-align: center;
}
#cssmenu {
line-height: 1;
background: rgb(43, 41, 59) ;
/*
background: -moz-linear-gradient(top, #333333 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);
background: -o-linear-gradient(top, #333333 0%, #141414 100%);
background: -ms-linear-gradient(top, #333333 0%, #141414 100%);
background: linear-gradient(to bottom, #333333 0%, #141414 100%); */
border-bottom: 5px solid rgb(117, 144, 112 );
width: auto;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
/*
background: -moz-linear-gradient(top, #333333 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);
background: -o-linear-gradient(top, #333333 0%, #141414 100%);
background: -ms-linear-gradient(top, #333333 0%, #141414 100%);
background: linear-gradient(to bottom, #333333 0%, #141414 100%);
*/
color: white;
display: block;
font-family: "Ingleby";
font-size: 50px;
padding: 19px 20px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul > li {
display: inline-block;
margin: 0;
}
#cssmenu.align-center {
text-align: center;
}
#cssmenu.align-center > ul > li {
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul {
float: right;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu > ul > li > a {
color: #ffffff;
font-size: 12px;
transition: background-color 0.5s ease;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-o-transition: background-color 0.5s ease;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid rgb(117, 144, 112 );
margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
/*
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
*/
}
#cssmenu.align-right > ul > li:first-child > a,
#cssmenu.align-center > ul > li:first-child > a {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#cssmenu.align-right > ul > li:last-child > a {
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a {
color: white;
/*
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
*/
background: #403D57;
/*
background: -moz-linear-gradient(top, #262626 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #262626), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #262626 0%, #070707 100%);
background: -o-linear-gradient(top, #262626 0%, #070707 100%);
background: -ms-linear-gradient(top, #262626 0%, #070707 100%);
background: linear-gradient(to bottom, #262626 0%, #070707 100%);
*/
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu.align-right .has-sub ul {
left: auto;
right: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #31b7f1;
font-size: 11px;
filter: none;
display: block;
line-height: 120%;
padding: 10px;
color: #ffffff;
}
#cssmenu .has-sub ul li:hover a {
background: #0c7fb0;
}
#cssmenu ul ul li:hover > a {
color: #ffffff;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu.align-right .has-sub .has-sub ul,
#cssmenu.align-right ul ul ul {
left: auto;
right: 100%;
}
#cssmenu .has-sub .has-sub ul li a {
background: #0c7fb0;
border-bottom: 1px dotted #31b7f1;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #0a6d98;
}
#cssmenu ul ul li.last > a,
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul ul li.last > a,
#cssmenu ul ul ul li:last-child > a,
#cssmenu .has-sub ul li:last-child > a,
#cssmenu .has-sub ul li.last > a {
border-bottom: 0;
}
/* Make menu bar stay at top */
#cssmenu {
position: fixed;
top: 0;
width: 100%;
}
h2 {
margin-top: 75px;
}
JavaScript:
$(document).ready(function(){
var itemFour = $("#item-four");
var position = itemFour.offset();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= $("#item-five").offset().top - 75) {
$("li").removeClass('active');
$("#menu-five").addClass('active');
} else if (scroll >= $("#item-four").offset().top - 75) {
$("li").removeClass('active');
$("#menu-four").addClass('active');
} else if (scroll >= $("#item-three").offset().top - 75) {
$("li").removeClass('active');
$("#menu-three").addClass('active');
} else if (scroll >= $("#item-two").offset().top - 75) {
$("li").removeClass('active');
$("#menu-two").addClass('active');
} else {
$("li").removeClass('active');
$("#menu-one").addClass('active');
}
});
$("#menu-one").click(function() {
$('html, body').animate({
scrollTop: $("#item-one").offset().top - 74
}, 'slow');
$("li").removeClass('active');
$(this).addClass('active');
});
$("#menu-two").click(function() {
$('html, body').animate({
scrollTop: $("#item-two").offset().top - 74
}, 'slow');
$("li").removeClass('active');
$(this).addClass('active');
});
$("#menu-three").click(function() {
$('html, body').animate({
scrollTop: $("#item-three").offset().top - 74
}, 'slow');
$("li").removeClass('active');
$(this).addClass('active');
});
$("#menu-four").click(function() {
$('html, body').animate({
scrollTop: $("#item-four").offset().top - 74
}, 'slow');
$("li").removeClass('active');
$(this).addClass('active');
});
$("#menu-five").click(function() {
$('html, body').animate({
scrollTop: $("#item-five").offset().top - 74
}, 'slow');
$("li").removeClass('active');
$(this).addClass('active');
});
});

basically:
<div class="imageCover" style="background-image:url(http://placekitten.com/1000/400)"></div>
CSS:
.imageCover{
height:500px;
background: none 50% / cover fixed;
}
Regarding your jQuery, this is all you need:
$(function(){
var $menuLi = $("[id^=menu-]");
var $itemEl = $("[id^=item-]");
$(window).on("scroll resize", function() { // check also on resize!
var scroll = $(window).scrollTop();
var currId = $itemEl.filter(function(i, e){ // Filter items
return $(e).offset().top >= scroll - 75; // retrieve a match
})[0].id.split("-")[1]; // get it's suffix (i.e: "two")
$("#menu-"+currId).addClass("active").siblings().removeClass("active");
});
$menuLi.click(function() {
var num = this.id.split("-")[1]; // get "one", "two"...
var y = $("#item-"+ num).offset().top-74;
$('html, body').animate({scrollTop: y }, 'slow');
});
});
A better approach using #href to #id
jsBin demo
Hash-Link the Menu A HREF to the desired article ID elements like:
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div class="imageCover" style="background-image:url(image1.jpg)"></div>
<article id="home"><h1>Home</h1><p>Content</p></article>
<div class="imageCover" style="background-image:url(image2.jpg)"></div>
<article id="home"><h1>About</h1><p>Content</p></article>
<div class="imageCover" style="background-image:url(image3.jpg)"></div>
<article id="home"><h1>Contact</h1><p>Content</p></article>
where i.e. the hash href="#about" relates to the id="about" article.
CSS:
nav{
background: hsla(0, 0%, 100%, 0.9);
position:fixed;
width:100%;
box-shadow: 0 3px 5px hsla(0, 0%, 0%, 0.4);
}
#menu li, #menu a{
display: inline-block;
}
#menu a{
padding: 15px 25px;
text-decoration: none;
border-right:1px solid #fff;
color:#000;
}
#menu a.active{
background: #dca;
}
.imageCover{
height:500px;
background: none 50% / cover fixed;
}
article{
margin: 0 auto;
padding: 50px;
width: 80%;
max-width: 1140px;
}
than inside jQuery you watch the window scrollTop and filtering the current positions you set the active class to the related Menu Link:
var $link = $("#menu a");
var $arti = $("article");
$(window).on("scroll resize", function() {
var scroll = $(this).scrollTop();
var id = $arti.filter(function(i, el){
return $(el).offset().top >= scroll;
})[0].id;
$link.removeClass("active");
$("#menu a[href$="+id+"]").addClass("active");
});
$link.click(function( e ) {
e.preventDefault(); // Don't follow link!
var y = $( $(this).attr("href") ).offset().top;
$('html, body').stop().animate({scrollTop: y }, 'slow');
});

You can add an illusion that will make the images position the way you want by using some parallax scroll effect. Here's one of the many links where you can find tutorials and examples on how to add a parallax effect to your elements using a combination of background fixed positions, scroll speed, etc: https://ihatetomatoes.net/simple-parallax-scrolling-tutorial/

Show/Hide content doesn't work on IE10 and below. Div not clickable

I have a jsfiddle here which demonstrates an Isotope gallery that when you clicked on, a description will slide up. It works well on Firefox, Chrome and IE 11 but not on IE10 and below.
script:
$('.showhide').click(function() {
$(this).toggleClass('showhidenew');
});
CSS:
.blurb {
bottom: 0;
color: white;
padding: 20px;
position: absolute;
}
.showhide {
cursor: pointer;
display: block;
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: 1;
}
.more-content {
background: #008dee;
color: white;
cursor: pointer;
height: 100%;
padding: 11px 20px;
position: absolute;
right: 0;
top: 5px;
z-index: 10;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.showhide .more-content {
top: 100%;
}
.showhide.showhidenew .more-content {
top: 0;
}
.info {
background: none repeat scroll 0 0 #323232;
color: white;
padding: 7px 15px;
position: absolute;
right: 0;
top: 0;
z-index: 11;
}
.more.showthis{
bottom: 0;
}
Can anyone help? Thanks.

I found a solution. Putting the showhide class under the bits class made the showhide class not clickable. The solution I did was to remove the showhide div and add the showhide class inside the bits class to make the whole div clickable. I also made remove the 100% width on the showhide class.
Here's an updated fiddle
<div class="bits i-h3 showhide">
<div class="more-content">
<div class="info">X</div>
<h2>Title</h2>
<h5>Sub Title <br /> Description</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- morecontent -->
<div class="blurb">
<h2>Title</h2>
<h5>Sub Title <br /> Description</h5>
</div><!-- blurb -->
<img src="http://placehold.it/580x450" alt="M Moser Associates" />
</div><!-- bits -->