We Keep Coding

Iterate through "hover" function

For a client I am working on a website. She wants a section where she can find the prices and rates of her company. I just want to create one class, and when the person will hover over "this" class, the button will appear.
Well here's where things get complicated for me. At this point, when the person hovers over the "prices1" section, both buttons will appear in both sections.
I tried already to give the ".arrow" the property "this", however, logically, the "a" section will move up, instead of the ".arrow" class.
Would appreciate some help!
$(".prices1 a").hover(function () {
$('.arrow').css({
"opacity": "100%",
"transform": "translate(0%, -80%)",
});
$('.button-tarieven p').css({
"transform": "translateY(-50%)",
"opacity": "0%",
});
}, function () {
$('.arrow').css({
"transform": "translate(0%, 0%)",
"opacity": "0%",
});
$('.button-tarieven p').css({
"transform": "translateY(0%)",
"opacity": "100%",
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="prices1">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 225.992 197.776"></svg>
<h2>Conversation</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo.</p>
<p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
<p>Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p>
<div class="buttons-price">
<a href="#">
<p>Make appointment!</p>
</a>
</div>
<a href="">
<div class="arrow">
<img src="img/arrow.png" alt="Arrow">
</div>
</a>
</div>
<div class="prices1">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 225.992 197.776"></svg>
<h2>Intake</h2>
<p>Vestibulum id ligula porta felis euismod semper.</p>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.</p>
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
</p>
<div class="buttons-price">
<a href="#">
<p>Make appointment!</p>
</a>
</div>
<a href="">
<div class="arrow">
<img src="img/arrow.png" alt="Arrow">
</div>
</a>
</div>

You should try using hide() and show() function instead of CSS.
And as #TKoL suggested use the $(this) to refer to the current target
Like this :
$(".prices1 .trigger").hover(function() {
$(this).find('.arrow').show();
}, function() {
$(this).find('.arrow').hide();
});
//This is in order to hide the button at the page load ;)
$('.arrow').hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="prices1">
<h2>Conversation</h2>
<div class="trigger">
<a href="#">
<p>Make appointment!</p>
</a>
<a href="" class="arrow">
<div>
<img src="img/arrow.png" alt="Arrow">
</div>
</a>
</div>
</div>
<div class="prices1">
<h2>Intake</h2>
<div class="trigger">
<a href="#">
<p>Make appointment!</p>
</a>
<a href="" class="arrow">
<div>
<img src="img/arrow.png" alt="Arrow">
</div>
</a>
</div>
</div>

Coloring the child of the element

I have six sections. Inside them, I am creating a new div with 6 span circles. I made a function that does that and it works fine. Now, I need to color the circle that is the same number as its parent section. For example: if I have the third section from the top, I need the third circle to be colored and the rest not. Same goes for the fourth section and fourth circle.
This would be my HTML with only one section... others are the same.
var anchor = $('.anchor-link');
var section = $('.panels');
var count = 0;
if (anchor.length > count) {
section.append('<div class= "circle"></div>');
var circle = $('.circle');
circle.each(function(e){
count++;
circle.append('<span></span>');
})
}
var green = $('.circle > span');
circle.each(function(e){
if ($(this).find('span').length > 0) {
var indexSection = section.index(this);
var indexSpan = green.index(this);
if (indexSection == indexSpan){
green.addClass('greens');
}
}
})
<section class="two-split panels">
<div class="container">
<div class="row">
<div class="col col-2 left-col">
<h4 class="heading grey">Our Strategic Model</h4>
<h2 class="section-title green">Creating value...</h2>
<p class="txt grey">UDG Healthcare is an international outsourcing services group focussed on the healthcare industry. The Group is organised and managed in three separate divisions, each focused on providing a specific area of specialist services to healthcare companies.</p>
<img class="pic pic-left" src="./images/left-white.png" alt="Customers">
<div class="row">
<div class="col col-2 col-2-t small">
<h4 class="small-heading grey">How we create value</h4>
<p class="text small-text grey">Our strategy is to capitalise on an increasing trend by pharmaceutical, biotech and medtech companies to outsource non-core and specialist activities on an international basis. To achieve this we provide specialist skills and technical capabilities to clients across local and international markets.</p>
</div>
<div class="col col-2 col-2-t small">
<h4 class="small-heading grey padded">What makes us different</h4>
<p class="text small-text grey padded">We strive to create strong market offerings which can provide customers with a range of specialist capabilities within each of our areas of operation. We work in partnership with the manufacturer to create a bespoke solution to best address their objectives. We operate with a quality and governance framework which reflects the industry standards which allows clients to outsource with confidence.</p>
</div>
</div>
</div>
<div class="col col-2 right-col">
<h2 class="section-title white">...Growing sustainably</h2>
<p class="txt white">The strategy of the Group is to focus on maximising Shareholder value from outsourced commercialisation services, by capitalising on its existing market leading positions as the demand for specialist outsourced services in the healthcare sector increases, driving higher levels of growth and profitability. We aim to drive growth through a combination of organic growth supplemented by strategic acquisitions, which will drive increasing returns on capital employed for the Group.</p>
<img src="./images/right-green.png" alt="People" class="pic pic-right">
<div class="row">
<div class="col col-2 col-2-t small">
<h4 class="small-heading white">People at the core</h4>
<p class="text small-text white">Attracting and retaining talented leaders is essential for UDGHealthcare to sustain its growth model.</p>
</div>
<div class="col col-2 col-2-t small">
<h4 class="small-heading white">Delivering value</h4>
<p class="text small-text white">Successful delivery of our strategy will result in increased shareholder value through share price appreciation and dividends. Disciplined financial management and increased cash generation will allow for on-going re-investment in the business to sustain the growth model and capitalise on the opportunity to grow our services.</p>
</div>
</div>
</div>
</div>
<div class="bottom-btn">
<a href="javascript:;" class="download-link">
<span class="s s-down-arrow btn-link">
<span class="hide">download</span>
</span>Download Strategic Model <span class="no-under">(PDF, 185KB)</span>
</a>
<a href="#" class="going-down anchor-link">
<button type="button" class="down down-desktop">
<img src="./images/down-green.png" alt="Move to the top content">
<span class="s s-down-arrow btn-arrow">
<span class="hide">Move Up</span>
</span>
</button>
</a>
<button type="button" class="down down-tablet">
<img src="./images/down.png" alt="Move to the top content">
<span class="s s-down-arrow btn-arrow">
<span class="hide">Move Up</span>
</span>
</button>
</div>
</div>
</section>
The circles are there but the coloring of them is a problem... this way I colored them all... need some help.

Since you HTML code is a little bit messy, I will provide you with a general solution. let me know if this the kind of solution you are looking for?
$(document).ready(function(){
$('section').each(function(idx,ele){
let circles = '';
for(let i = 0; i<6; i++){
circles += '<div class= "circle"></div>';
}
$(ele).append(circles);
$(ele).find('.circle').eq(idx).addClass('green');
});
})
.circle{
width:20px;
height:20px;
border-radius:100%;
background-color:#ccc;
margin:5px;
display:inline-block;
}
.green{
background-color:#ccee11 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="two-split panels">
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</div>
</section>
<section class="two-split panels">
<div>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</div>
</section>
<section class="two-split panels">
<div>Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.</div>
</section>
<section class="two-split panels">
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</div>
</section>
<section class="two-split panels">
<div>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</div>
</section>
<section class="two-split panels">
<div>Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.</div>
</section>

Using react.js, I receive no errors, but content doesn't load

I'm currently working on a site on freelance, and the client is requesting form verification via react.js. I've never used it before, so I'm trying to learn, and of course, my first goal is to get the content on the page. After some fiddling, and finding my mistakes, I finally received no errors, but the content isn't loading on the page. I'm also using bootstrap. File structure is all correct.
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Site Name</title>
<!-- Bootstrap -->
<link href="css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="navbar navbar-defualt dc-navbar navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle dc-navbutton collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">
Toggle navigation
</span>
<span class="toggle-bar icon-bar"></span>
<span class="toggle-bar icon-bar"></span>
<span class="toggle-bar icon-bar"></span>
</button>
<a class="navbar-brand unfloat" href="#">
<img id="logo" src="img/Service2Rev2.png" alt="DockChain">
</a>
</div>
<div id="navbar" class="dc-navbar collapse navbar-collapse">
<ul class="fnt-sec nav-pad nav navbar-nav navbar-left">
<li class="active">
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
Settings
</a>
</li>
<li>
<a href="#">
About
</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</header>
<section>
<div class="container-fluid">
<div class="main jumbotron">
<center class="fnt-secondary">
<h1>Client's Service</h1>
<p>Lorem Ipsum Dolor</p>
<a href="#">
<button class="btn btn-default">Learn More</button>
</a>
</center>
</div>
</div>
</section>
<section class="sections">
<div class="container">
<div class="center row">
<div class="col-sm-4">
<h2>Safe</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non accumsan nulla. Quisque rutrum rutrum condimentum. Aenean lacinia semper egestas. Pellentesque nec tortor eu erat ullamcorper lobortis vitae ut leo. Aliquam ipsum mi, ultrices et posuere id, ornare non quam. Fusce nec augue bibendum, eleifend ipsum viverra, maximus urna. Nullam tincidunt quam id faucibus suscipit.</p>
</div>
<div class="col-sm-4">
<h2>Secure</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non accumsan nulla. Quisque rutrum rutrum condimentum. Aenean lacinia semper egestas. Pellentesque nec tortor eu erat ullamcorper lobortis vitae ut leo. Aliquam ipsum mi, ultrices et posuere id, ornare non quam. Fusce nec augue bibendum, eleifend ipsum viverra, maximus urna. Nullam tincidunt quam id faucibus suscipit.</p>
</div>
<div class="col-sm-4">
<h2>Verified</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non accumsan nulla. Quisque rutrum rutrum condimentum. Aenean lacinia semper egestas. Pellentesque nec tortor eu erat ullamcorper lobortis vitae ut leo. Aliquam ipsum mi, ultrices et posuere id, ornare non quam. Fusce nec augue bibendum, eleifend ipsum viverra, maximus urna. Nullam tincidunt quam id faucibus suscipit.</p>
</div>
</div>
</div>
</section>
<section class="sections info-section">
<div class="container">
<div class="some-room row">
<div class="col-md-6">
<img class="center" src="img/Service3.png" alt="flow chart">
</div>
<div class="info-text col-md-6">
<h2>This is how we work</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non accumsan nulla. Quisque rutrum rutrum condimentum. Aenean lacinia semper egestas. Pellentesque nec tortor eu erat ullamcorper lobortis vitae ut leo. Aliquam ipsum mi, ultrices et posuere id, ornare non quam. Fusce nec augue bibendum, eleifend ipsum viverra, maximus urna. Nullam tincidunt quam id faucibus suscipit. Aenean in enim at est porttitor vestibulum eu quis ipsum. Morbi ac tortor tempus, pulvinar nisi at, sodales urna. In facilisis ut diam vel aliquam. Mauris tempor, nulla non hendrerit rhoncus, leo diam dictum elit, nec molestie ex arcu ac erat. Vivamus malesuada libero eget erat bibendum rutrum. Nunc tempus posuere ornare. Sed eleifend, nisl non ultricies pretium, elit diam dictum orci, in aliquet nisi neque luctus lacus. </p>
</div>
</div>
</div>
</section>
<div id="formDiv">
</div>
<section>
<div class="container-fluid">
<div class="main jumbotron">
<center>
<h1>Here's another focal point</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non accumsan nulla. Quisque rutrum rutrum condimentum. Aenean lacinia semper egestas. Pellentesque nec tortor eu erat ullamcorper lobortis vitae ut leo. </p>
<a href="#">
<button class="btn btn-default">Call to Action</button>
</a>
</center>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="fnt-sec pull-left">
<p><i class="fa fa-copyright"></i> 2015 Client</p>
</div>
<div class="fnt-sec pull-right">
<p>You can have some stuff here too.</p>
</div>
</div>
</footer>
<script src="js/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- React.js -->
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<!-- Form jsx -->
<script src="comp/Form.jsx" type="text/jsx"></script>
<script type="text/jsx">
var form = React.createElement(Form);
function run() {
React.render(form, document.getElementById('formDiv'));
}
if (window.addEventListener) {
window.addEventListener('DOMContentLoaded', run);
} else {
window.attachEvent('onload', run);
}
</script>
</body>
</html>
And here's Form.jsx:
var Form = React.createClass({
render: function () {
return(
<div className="container form-border">
<h2>Enter your info to subscribe.</h2>
<form>
<div classNameName="form-group has-success has-feedback">
<label className="control-label" for="name">Name</label>
<input type="text" className="form-control" id="nameInput" placeholder="Name" />
<span className="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div className="form-group has-warning has-feedback">
<label className="control-label" for="emailInput">Email address</label>
<input type="email" className="form-control" id="emailInput" placeholder="Enter email" />
<span className="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div className="form-group has-error has-feedback">
<label className="control-label" for="passInput">Password</label>
<input type="password" className="form-control" id="passInput" placeholder="Password" />
<span className="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<div className="form-group">
<label for="comments">Comments</label>
<textarea className="form-control" id="commentInput" rows="3" placeholder="Enter comments here"></textarea>
</div>
<div className="row">
<div className="col-xs-6">
<div className="form-group">
<div className="checkbox-inline">
<label>
<input type="checkbox" value="" checked /> Option one
</label>
</div>
<div className="checkbox-inline">
<label>
<input type="checkbox" value="" />Option two
</label>
</div>
<div className="checkbox disabled">
<label>
<input type="checkbox" value="" disabled /> Option three (disabled)
</label>
</div>
</div>
<div className="form-group">
<div className="radio-inline">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked />Option one
</label>
</div>
<div className="radio-inline">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" />Option two
</label>
</div>
<div className="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled /> Option three (disabled)
</label>
</div>
</div>
</div>
<div className="col-xs-6">
<div className="form-group">
<label for="jobForm">How would you describe yourself?</label>
<select name="profession" id="profession" className="form-control">
<option value="default">Select an option...</option>
<option value="developer">Developer</option>
<option value="designer">Designer</option>
<option value="director">Director/Manager</option>
<option value="joke">Puppet Maker</option>
</select>
</div>
<div className="form-group">
<label for="useForm">How will you be using this service?</label>
<select name="use" id="use" className="form-control" multiple>
<option value="personal">Personal</option>
<option value="production">Production</option>
<option value="corporate">Corporate</option>
<option value="joke">With gusto</option>
</select>
</div>
</div>
</div>
<button type="submit" className="center btn btn-default">Submit</button>
</form>
</div>
);
}
});
I removed references to the client's service in file names and headers for confidentiality. I can't find why it isn't loading. Can anyone see something I can't?

You shouldn't need the event loader or the call to createElement. Try this instead:
<script type="text/jsx">
React.render(<Form />, document.getElementById('formDiv'));
</script>

How to bind event with dynamic data generated

I'm unable to bind jQuery events with dynamically generated html data. This is my code. Please help me through it.
I've tried on() function but still it doesn't not working. Multiple guidelines guide to resolve this problem with on() method but it's not working. Please guide me through this. Thanks
<span class="btn btn-warning addnew">Add New Question</span>
<div class="clearfix"></div>
<br/>
<script>
var div = '<section class="panel default red_border horizontal_border_1 h2"> <div class="block-web"> <div class="header"> <div class="actions"> <a class="minimize" href="#"><i class="fa fa-chevron-down"></i></a> <a class="refresh" href="#"><i class="fa fa-repeat"></i></a> <a class="close-down" href="#"><i class="fa fa-times"></i></a> </div> <h3>Default Block</h3> </div> <div class="body-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non lectus molestie, condimentum quam et, iaculis justo. Nunc vel ultricies nunc. Aliquam tempus sodales eros vel tincidunt. Proin ultricies bibendum urna et aliquam. Nunc quis nisl sit amet erat bibendum aliquet.</p> </div> </div> </section>';
$(".addnew").click(function(){
$(".insertafter").after(div);
});
</script>
<div class="insertafter"></div>
<div class="col-lg-4 col-md-4">
<section class="panel default red_border horizontal_border_1 h2">
<div class="block-web">
<div class="header">
<div class="actions"> <a class="minimize" href="#"><i class="fa fa-chevron-down"></i></a> <a class="refresh" href="#"><i class="fa fa-repeat"></i></a> <a class="close-down" href="#"><i class="fa fa-times"></i></a> </div>
<h3>Default Block</h3>
</div>
<div class="body-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non lectus molestie, condimentum quam et, iaculis justo. Nunc vel ultricies nunc. Aliquam tempus sodales eros vel tincidunt. Proin ultricies bibendum urna et aliquam. Nunc quis nisl sit amet erat bibendum aliquet.</p>
</div>
</div>
</section>
</div>
<script>
/*==Porlets Actions==*/
$('.minimize').click(function(e){
var h = $(this).parents(".header");
var c = h.next('.body-content');
var p = h.parent();
c.slideToggle();
p.toggleClass('closed');
e.preventDefault();
});
$('.refresh').click(function(e){
var h = $(this).parents(".header");
var p = h.parent();
var loading = $('<div class="loading"><i class="fa fa-refresh fa-spin"></i></div>');
loading.appendTo(p);
loading.fadeIn();
setTimeout(function() {
loading.fadeOut();
}, 1000);
e.preventDefault();
});
$('.close-down').click(function(e){
var h = $(this).parents(".header");
var p = h.parent();
p.fadeOut(function(){
$(this).remove();
});
e.preventDefault();
});
</script>
jsfiddle: http://jsfiddle.net/nfqz4bqq/

Instead of...
$('.minimize').click(function(e){
//..
});
You can write...
$('body').on('click', 'a.minimize', function() {
var h = $(this).parents(".header");
var c = h.next('.body-content');
var p = h.parent();
console.log(this);
c.slideToggle();
p.toggleClass('closed');
//e.preventDefault();
});
I tried it and it works because there is a related question

scrollspy navigate to different page and back at same position

Hello fellow web enthusiasts, I am hoping you could help me out with a problem.
I am using bootstrap to create a website that uses scrollspy to navigate to parts of the page with the navbar. The only way I could get the URL to not display "#section-2" when scrolling to a part of a page was to call my javascript in my <head>.
Now the problem...
I attempted to add an FAQ section which would be a different page completely, hoping to have it link back to specific part of the original page.
It seems as the FAQ <a> tag is not working unless the browser is resized..
That's two bugs with scrollspy already!! Is it normal for bootstrap to experience this many bugs?
http://dnwebdev.com
code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Day & Night | Responsive Web Design
</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js">
</script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js">
</script>
</head>
<body data-spy="scroll" data-target="#myNavbar" data-offset="125">
<nav id="myNavbar" class="navbar navbar-dn navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<a class="navbar-brand" style="color:#2c3e50;">
Day
<img src="../images/dnlogoc.png" height="35px"/>
Night
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav" style="text-align:center;">
<li class="active">
<a href="#section-1">
About Us
</a>
</li>
<li>
<a href="#section-2">
What We Do
</a>
</li>
<li>
<a href="#section-3">
Our Process
</a>
</li>
<li>
<a href="#section-4">
Our Work
</a>
</li>
<li>
<a href="#section-5">
Get in touch
</a>
</li>
<li>
<a href="/faq">
FAQ
</a>
</li>
</ul>
</div>
</nav>
<div class="container day" style="padding-top:75px;">
<hr>
<h2 class="center" id="section-1">
Web Solutions, LLC
</h2>
<hr>
<div class="row">
<div class="col-lg-4">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.
</p>
</div>
<div class="col-lg-4" style="text-align:center;">
<img src="../images/dnlogoc.png" height="200px" class="mainimg">
</div>
<div class="col-lg-4">
<p>
Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.
</p>
</div>
</div>
<p>
Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.
</p>
</div>
<div class="container day">
<hr>
<h3 class="center" id="section-2">
What We Do
</h3>
<hr>
<div class="row">
<!-- Boxes de Acoes -->
<div class="col-xs-12 col-sm-4 col-lg-4 smallpad">
<div class="box">
<div class="icon">
<div class="image">
<i class="fa fa-map-marker">
</i>
</div>
<div class="info">
<h3 class="title">
Local Search Engine Optimization
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper.
</p>
<div class="more">
<a href="#" title="Title Link">
Read More
<i class="fa fa-angle-double-right">
</i>
</a>
</div>
</div>
</div>
<div class="space">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-lg-4 smallpad">
<div class="box">
<div class="icon">
<div class="image">
<i class="fa fa-laptop">
</i>
</div>
<div class="info">
<h3 class="title">
Mobile Friendly Web Design
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper.
</p>
<div class="more">
<a href="#" class="hover" title="Title Link">
Read More
<i class="fa fa-angle-double-right">
</i>
</a>
</div>
</div>
</div>
<div class="space">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-lg-4 smallpad">
<div class="box">
<div class="icon">
<div class="image">
<i class="fa fa-mobile">
</i>
</div>
<div class="info">
<h3 class="title">
Responsive - Mobile Friendly Web Design
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper.
</p>
<div class="more">
<a href="#" title="Title Link">
Read More
<i class="fa fa-angle-double-right">
</i>
</a>
</div>
</div>
</div>
<div class="space">
</div>
</div>
</div>
<!-- /Boxes de Acoes -->
</div>
</div>
<div class="container night">
<div class="page-header" style="text-align:center;" id="section-3">
<h2>
Our Process
</h2>
<h3>
</h3>
</div>
<ul class="timeline">
<li class="timeline">
<div class="timeline-badge mybadge">
<i class="glyphicon glyphicon-search">
</i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">
Planning
</h4>
</div>
<div class="timeline-body">
<p>
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge mybadge">
<i class="glyphicon glyphicon-th-list">
</i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">
Content
</h4>
</div>
<div class="timeline-body">
<p>
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</p>
<p>
Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mé, cursus quis, vehicula ac nisi. Aenean vel dui dui. Nullam leo erat, aliquet quis tempus a, posuere ut mi. Ut scelerisque neque et turpis posuere pulvinar pellentesque nibh ullamcorper. Pharetra in mattis molestie, volutpat elementum justo. Aenean ut ante turpis. Pellentesque laoreet mé vel lectus scelerisque interdum cursus velit auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac mauris lectus, non scelerisque augue. Aenean justo massa.
</p>
</div>
</div>
</li>
<li class="timeline">
<div class="timeline-badge mybadge">
<i class="glyphicon glyphicon-pencil">
</i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">
Design
</h4>
</div>
<div class="timeline-body">
<p>
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge mybadge">
<i class="glyphicon glyphicon-wrench">
</i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">
Development
</h4>
</div>
<div class="timeline-body">
<p>
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</p>
<hr>
</div>
</div>
</li>
<li class="timeline">
<div class="timeline-badge mybadge">
<i class="glyphicon glyphicon-cloud-upload">
</i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">
Test & Launch
</h4>
</div>
<div class="timeline-body">
<p>
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="container day">
<hr>
<h3 class="center" id="section-4">
Our Work
</h3>
<hr>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 myimg">
<img src="../images/after-searok.jpg" class="img-responsive">
<blockquote class="blockquote">
<footer>
<cite title="Source Title">
Searok Charters
</cite>
</footer>
</blockquote>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 myimg">
<img src="../images/after-nicor.jpg" class="img-responsive">
<blockquote class="blockquote">
<footer>
<cite title="Source Title">
Nicor
</cite>
</footer>
</blockquote>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 myimg">
<img src="../images/after-cmt.jpg" class="img-responsive">
<blockquote class="blockquote">
<footer>
<cite title="Source Title">
Castle Mountain Team
</cite>
</footer>
</blockquote>
</div>
<hr>
</div>
</div>
<hr>
<div class="container" style="text-align:center;">
<div class="col-xs-3">
<i class="fa fa-5x fa-arrow-right">
</i>
</div>
<div class="col-xs-6">
<h2 class="center">
<button type="button" class="btn btn-primary btn-lg btn-block">
All my our work
</button>
</div>
<div class="col-xs-3">
<i class="fa fa-5x fa-arrow-left">
</i>
</div>
</h2>
</div>
<footer style="text-align:center;">
<div class="container night nopad">
<hr>
<h3 class="center" id="section-5">
Let's talk about your project!
</h3>
<hr>
<div class="col-lg-4 col-xs-12">
<hr>
<h2>
<a href="tel:4073497036">
<i class="fa fa-phone">
</i>
(407) 349-7036
</a>
</h2>
<hr>
</div>
<div class="col-lg-4 col-xs-12 nopad" style="text-align:center;">
<!-- Place this tag where you want the widget to render. -->
<div class="g-page" data-width="200" data-href="//plus.google.com/u/0/106333335696092351517" data-theme="dark" data-rel="publisher">
</div>
<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div class="col-lg-4 col-xs-12">
<hr>
<h2>
<a href="mailto:rob#dnwebdev.com">
<i class="fa fa-envelope-o">
</i>
rob#dnwebdev.com
</a>
</h2>
<hr>
</div>
<div id="footer" class="day" style="text-align:center;">
<div class="col-lg-12 col-xs-12">
<p>
Day & Night Web Solutions, LLC
</p>
</div>
</div>
</div>
</footer>
<script>
function close_toggle() {
if ($(window).width() <= 768) {
$('.nav a').on('click', function () {
$(".navbar-toggle").click();
});
} else {
$('.nav a').off('click');
}
}
close_toggle();
$(window).resize(close_toggle);
//function that offsets scoll
if ($(window).width() <= 768) {
var offset = 100;
} else {
var offset = 115;
}
$('.navbar li a').click(function (event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
});
</script>
</body>
</html>

You have a jQuery function that's forcing each of your menu link to scroll to that section. You need to tell the function to do this for all menu-links except FAQ and to redirect if FAQ clicked, so you do:
//trim the spaces and check if the text of the menu link is not equal to 'FAQ'
if ($.trim($(this).html()) != 'FAQ') {
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
} else {
//if it is, redirect to the page
window.location.href = $(this).attr('href');
}
Full Screen (jsfiddle)
Edit:
From comment:
when trying to link back I am using ""; which is throwing off the
scrollspy by adding #section-2 to the url.
This is quite a tricky to solve because of the limited functions we can use on page redirection. However, you can do this:
First, remove this function $('.navbar li a').click(function(event) { completely, and place this code on top of the other scripts:
$("document").ready(function() {
$(document).on('click','.navbar li a',function(event) {
alert($(this).html());
event.preventDefault();
if($.trim($(this).html())!='FAQ'){
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
}
else
{
window.location.href = $(this).attr('href');
}
});
//document.referrer returns the url from which this page has been entered,
//we will use this to check if we are redirected from FAQs page
var previous_url = document.referrer;
if(previous_url=='http://dnwebdev.com/dev/faq/'){
//if we were redirected from FAQ page, we would have a #section-value in our url
//hash here fetched that value
var hash = document.URL.substr(document.URL.indexOf('#')+1);
//this is the important part, we are gonna trigger that the
//#section-value passed in url is _clicked_. And so the browser will
//scroll down to that section
$('.navbar li a#a-'+hash).trigger('click');
//once it scrolls down, this deletes the #section-value from url
history.pushState('', document.title, window.location.pathname);
}
});
For the above to work, you also need to add an id attribute to each of your <a> tag such as:
<a href="#section-1" id="a-section-1">
<a href="#section-2" id="a-section-2">
etc.
A little demonstration on how the trigger works: demo

give id to the first div i.e. like dynaDiv and modify FAQ as <a href="/faq" onclick='addFAQ();'> FAQ </a> define function as
function addFAQ(){
$("#dynaDiv").load("./faq.html");
}