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>

How can I dont show the divisions between cells in this divs?

I have this simple screen of an application in Vue.js:
Sample screen
I want to hide these divisions between cells, in a manner that the lines of the itens are continous.
I had tried to alter the classes of the columns to "col-md" and "col-sd", but witout sucesss.
Here is the code of the template session of the application:
<template>
<div class="container">
<h1> Animais </h1>
<br>
<div class="row">
<div class="col-md-6">
<h3>
Animais Cadastrados
<span class="badge badge-info">{{animais.length}}</span>
</h3>
<ul>
<div class="row">
<div class="col">
Nome
<li class="list-group-item" v-for="animal in animais" v-bind:key="animal">
{{animal.nome}}
</li>
</div>
<div class="col">
Idade
<li class="list-group-item" v-for="animal in animais" v-bind:key="animal">
{{animal.idade}}
</li>
</div>
<div class="col">
Raça
<li class="list-group-item" v-for="animal in animais" v-bind:key="animal">
{{animal.raca}}
</li>
</div>
<div class="col">
Informações
<li class="list-group-item" v-for="animal in animais" v-bind:key="animal">
<i #click="Show" class="fa fa-info-circle" aria-hidden="true"></i>
</li>
</div>
</div>
</ul>
</div>
<div class="col-md-6">
<h3>
h3. Lorem ipsum dolor sit amet.
</h3>
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
</div>
</template>

To make things easier, you can just copy the generated HTML into JsFiddle. I'm trying to guess what you are trying to achieve and I think you can try something like that:
<div class="row" v-for="animal in animais" v-bind:key="animal">
<div class="col-md-3">{{animal.nome}}</div>
<div class="col-md-3">{{animal.idade}}</div>
<div class="col-md-3">{{animal.raca}}</div>
<div class="col-md-3">
<i #click="Show" class="fa fa-info-circle" aria-hidden="true"></i>
</div>
</div>
Again, I'm not sure what you're trying to do but looping 4 times on the same array is probably not the way to go. And yes, you may nest Bootstrap a row inside another.

When the window resizes then the button should work differently

$(document).ready(function(){
if ($(window).width < '700')
{
$(".fevent").removeAttr('data-toggle data-target aria-expanded aria-controls');
$(".fevent").attr({"data-toggle":"collapse", "data-target":"#bol", "aria-expanded":"false", "aria-controls":"bol"});
$(".fevent").on("click",function(){
$("#bol").collapse('toggle');
});
} else if ($(window).width > '700')
{
$(".fevent").removeAttr('data-toggle data-target aria-expanded aria-controls');
$(".fevent").attr({"data-toggle":"collapse", "data-target":"#col", "aria-expanded":"false", "aria-controls":"col"});
$(".fevent").on("click", function(){
$("#col").collapse('toggle');
});
}
});
.fvent is the class of button , when i resize my window then the button should function differently,
when the window is less than the 700 then clicking on button show div id #bol otherwise #col .
The button is working for width > 700 when i resizes the window less than 700 it still works as the width > 700.
PLEASE HELP ME OUT!!!

You do not need to use any additional JavaScript for this. Just use 2 buttons and show and hide them with media queries:
.btn.col {
display:none;
}
#media (min-width: 700px) {
.btn.col {
display:inline-block;
}
.btn.bol {
display:none;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<button class="btn btn-primary bol" type="button" data-toggle="collapse" data-target="#bol" aria-expanded="false" aria-controls="bol">Toggle bol</button>
<button class="btn btn-primary col" type="button" data-toggle="collapse" data-target="#col" aria-expanded="false" aria-controls="col">Toggle col</button>
<div class="row">
<div class="col">
<div class="collapse" id="col">
<div class="card card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis enim ornare, ullamcorper ipsum ut, bibendum mi. Quisque sit amet velit dignissim, tincidunt neque nec, consequat dolor.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="collapse" id="bol">
<div class="card card-body">
Vivamus auctor commodo nisl ut vestibulum. Aliquam erat volutpat. Aliquam eu leo non nunc ullamcorper fermentum. Donec vehicula dolor sed augue maximus, non congue urna semper.
</div>
</div>
</div>
</div>

$(document).ready() is triggered only the page loads; it's not triggered when the page is resized.
You can try $(window).on('resize',function(){ ...

The $(document).ready() is trigged only once so you are checking viewport width only on document load.
You have to add $(window).on('resize') function and check viewport the size there.

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>

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");
}