Develop Reference

JS Accordion closes while clicking links inside

I'm having some issues with keeping the accordion open whilst clicking links within that accordion dropdown. It's a careers page and when I open the individual jobs, I want users to be able to open the application in a new tab. Any ideas?
https://www.trinovainc.com/careers.html
<div class="accordion">
<div class="accordion-panel careers" data-id="panel-1">
<div class="accordion">
<h4><a class="accordion-title">Application Engineer - Mobile, AL<span class="ion-chevron-down"></span></a></h4>
</div>
<div class="accordion-panel-content panel-1">
<p>TriNova is looking for an energetic and personable candidate who is a self-motivated and well-organized professional to join our team as an Application Engineer.</p>
<h4>Summary</h4>
<ul>
<ul>
<li>Provides in-depth product and application knowledge for TriNova and customers; specifically providing inside sales support for account managers. Duties to include reviewing of specifications, verifying model codes, quoting, ordering, expediting and communicating with the customer and sales force.</li>
</ul>
</ul>
<h4>PRIME RESPONSIBILITIES</h4>
<ul>
<ul>
<ul>
<li>Review all types of applications that consist of but not limited to: sizing valves, choosing instruments, sizing gamma, sizing flowmeters and creating electrical & PID drawings for various types of field instrument panels.</li>
<li>Review specifications and provide model codes for products.</li>
<li>Perform CAD drawings of best practice installation and wiring</li>
<li>Communicate with the customer, outside salespeople, manufacturers and the Area Vice President.</li>
<li>Understand commercial issues and terms.</li>
<li>Field visits with account managers for relationship development, training and as required to optimize the order process and achieve customer satisfaction</li>
<li>Improve product and technical knowledge.</li>
<li>Troubleshooting of basic device issues.</li>
</ul>
</ul>
</ul>
<h4>MINIMUM EDUCATION</h4>
<ul>
<ul>
<ul>
<li>Bachelor’s Degree in Engineering.</li>
<li>Minor in Sales Engineering is a plus</li>
</ul>
</ul>
</ul>
<h4>TRAVEL</h4>
<ul>
<ul>
<ul>
<li>Occasional travel required.</li>
</ul>
</ul>
</ul>
<h4>PREVIOUS JOB EXPERIENCE</h4>
<h4>Desired:</h4>
<ul>
<ul>
<ul>
<li>Previous related experience of at least 2 years</li>
</ul>
</ul>
</ul>
<h4>Required:</h4>
<ul>
<ul>
<li>None</li>
<ul></ul>
</ul>
</ul>
<a class="button orange apply" href="https://www.trinovainc.com/job-application.html" target="_blank">Apply Now</a>
</div>
</div>
</div>

Use event.stopPropagation():
In Javascript you have event bubbling, which means that whenever an event is fired for an element. That event bubbles up to all the parent elements. This means if you have an onlick for the accordion to close it and you click a button (or anything else) inside of it, it will close. You can prevent this by using event.stopPropagation(). This will stop the event from propagating up the DOM structure.
Example:
function prop(e){
console.log(e.currentTarget);
}
function notProp(e){
console.log(e.currentTarget);
e.stopPropagation();
}
<div id="propagated" onclick="alert('Bubbled')"><button onclick="prop(event)">Click</button></div>
<div id="notpropagated" onclick="alert('OH NO')"><button onclick="notProp(event)">Click</button></div>

make content slide in and out when clicking link?

I am green in this area and I am trying to learn while I build a virtual resume for a website I can use to advertise my programming services (my strength lies more with C#, Java and similar languages :')
Something I think would look pretty cool, is if when you click on a link in my side-bar, the content on the page slides out and is replaced with the content on the new page that slides in, in the previous page' place.
I am a bit lost on how to achieve this though and if I have to do a per-page thing, or if I can make one general method in Javascript to take care of it. I am using jQuery and bootstrap.
var main;
main = function () {
$(".sidebar-nav a").click(function() {
<!-- Not sure what to do here -->
<!-- Pseudo Code -->
<!-- find out what element was pressed
slide out content on current page using animate();
slide in content from the element that was pressed using animate(); -->
})
}
$("document").ready(main);
The HTML:
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<h1>Brand</h1>
</li>
<li>
<a href="#">
Index
</a>
</li>
<li>
<a href="#">
About Me
</a>
</li>
<li>
<a href="#">
Resume
</a>
</li>
<li>
<a href="#">
Contact
</a>
</li>
</ul>
</div>
<!-- Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
Toggle Menu
</div>
</div>
</div>
</div>
</div>
Let me know if you need the CSS.

You should use an AJAX technology to seamlessly load another page's HTML contents inline into the document.
The best choice (in my opinion) for this situation is the jQuery function load(), due to it's simplicity and pure convenience. You can also send a callback function, it's easy to implement.
You could then easily implement a CSS animation using the animation attribute.

Slide multi-level menu and breadcrumbs in Angular

Does anyone know how I could modify the following code to make a sliding multi-level menu and breadcrumbs in Angular, like this facebook help page?
My basic html code is like this:
<ul>
<li>
Electronics
<ul>
<li>back</li>
<li>Phones</li>
</ul>
</li>
<li>
Furniture
<ul>
<li>back</li>
<li>
Living Room
<ul>
<li>back</li>
<li>Bookshelves</li>
</ul>
</li>
<li>Patio</li>
</ul>
</li>
</ul>

In regards to the sliding menu, there are a ton of solutions out there. Here are some links:
http://www.sitepoint.com/pure-css-off-screen-navigation-menu/
http://blogs.sitepointstatic.com/examples/tech/css3-sliding-menu/index.html
To stay in the angular world you can switch out partials in different states or use something like ng-switch. There are really so many options it is difficult to give you a single answer.
In regards to the breadcrumbs, here are a few nice pre-built options:
jsc-breadcrumbs - a blog post with instructions
angular-breadcrumbs

Scrollspy with jQueryUI Accordion functionality

So i've managed to figure out how to get scrollspy working, however I'm not realizing that my table of contents is too long for the navigation. I'm wondering how I can add an accordion type functionality so that my navbar table of contents will collapse after it has scrolled passed an associated anchor. I'm essentially looking for the same type of functionality that the bootstrap website has for it's affixed sidebar. I have looked at this: Using bootstrap scrollspy for a div with collapse, to an affixed sidebar
but I'm not sure if thats the same thing I'm looking for. I've also considered using the TOCIFY plugin written by Greg Franko, but i'm not sure how to implement it. I've been reading the TOCIFY documentation but i'm not really sure what it is I have to change.
Currently my scrollspy functionality is working with this setup:
<body data-spy="scroll" data-offset="0" data-target="#navbar" style="">
<div class="container-fluid">
<div class="row-fluid">
<div class="span3" id="navbar">
<ul class="nav nav-tabs nav-stacked affix">
<li class="active h2-link">Executive Summary</li>
<ul>
<li class="h3-link">Defining Mental Health</li>
<li class="h3-link">Review Process</li>
<li class="h3-link">Findings and Recommendations</li>
<li class="h3-link">Acknowledgement</li>
</ul>
<li class="h2-link">Preamble</li>
<li class="h2-link">Section One: Our Context</li>
<ul>
<li class="h3-link">Mount Royal University: A World of Difference</li>
<ul>
<li class="h4-link">Mount Royal's Vision</li>
<li class="h4-link">Mount Royal's Mission</li>
<li class="h4-link">Mount Royal's Guiding Principles</li>
</ul>
<li class="h3-link">Health and Safety at Mount Royal University</li>
<li class="h3-link">Student Services Plan</li>
<li class="h3-link">Rationale for a Student Mental Health Strategy</li>
</ul>
</ul>
</div>
<div class="span9">
<h2 id="executive-summary">Executive Summary</h2>
</a>
<h3 id="two">Introduction & Background</h3>
<p class="ParagraphText">Mount Royal University (MRU) has a long-standing history
of student-centered leadership and learning. We are known to be an institution
that cares about the success and the health of our students, and we have strong
services that support mental health promotion and respond well to mental health
issues and concerns. In addition to excellent service providers, MRU has many
positive practices and policies in place to support students. Recent trends
suggest that the prevalence of mental health issues is on the rise among young
adults. More students are entering into university with pre-existing mental health
conditions, more are seeking help, and often issues are complex and
multifaceted. Given that rates of mental illness are on the rise, and given
that our student population has reported stress levels higher than other students
at post-secondary institutions in North American, a review of our student mental
health practices and procedures was warranted.</p>
You can see it working here: https://googledrive.com/host/0BwvPQbnPrz_LTlBjelIwemxaZzg/index.html
I'd be grateful for any help or suggestions. I apologize if my research was not extensive enough and this has already been answered.

how to jump down the web page with out it deleting the rest of the site?

here is my site: http://web.njit.edu/~dp257/boilerplate/Org.html
click on the side bar world wide web, all i want it to do is scroll down or jump down the page to that Div(worldwideweb definition) but instead it like deletes the rest of the page except for that div. how come?
heres my website code:
<div id="wrapper">
<header id="name" align="center">IS117 TERMS</header>
<div id="primary_links" align="center">
<ul>
<li>Home</li>
<li>CSS</li>
<li>HTML</li>
<li>Organizations</li>
<li>Technologies</li>
</ul>
</div>
<div id="content">
<h1>Organizations</h1>
<div>
Client- the computers and devices that use web applications
</div>
<div>
Internet exchange point-a point in the world that connect many WAN’s
</div>
<div>
Internet- global system of interconnected networks
</div>
<div>
Internet service provider- Someone or company who owns a WAN and leases its access to their network
</div>
<div>
Intranet- network where only employees can run web applications typically they are in the same area
</div>
<div>
Local area network- a small network of computers that are near each other and communicate over short distances
</div>
<div>
Network-a system that allows clients and servers to communicate
</div>
<div>
W3C-world wide web consortium, group that develops standards, for code
</div>
<div>
Web browser-programs that access web pages
</div>
<div>
Web server- holds the files that make up a web application
</div>
<div>
WHATWG-community of people interested in evolving html, big source of info
</div>
<div>
Wide area network-2 or more LAN’s connected by a router
</div>
<div id="zz">
World Wide Web- components that bring together a web page to your desktop over the internet
</div>
</div> <!-- content -->
<div id="sidebar">
<div id="secondary_links">
<ul>
<li>Client</li>
<li>Internet Exchange Point</li>
<li>Internet</li>
<li>Internet Service Provide</li>
<li>Intranet</li>
<li>Local Area Network</li>
<li>Network</li>
<li>W3C</li>
<li>Web Browser</li>
<li>Web Server</li>
<li>WHATWG</li>
<li>Wide Area Network</li>
<li>World Wide Web</li>
</ul>
</div>
</div>
</div>

There's a lot of funky stuff going on in that page. I recommend starting with just validating the HTML. You can validate it here - http://html5.validator.nu/?doc=http%3A%2F%2Fweb.njit.edu%2F%7Edp257%2Fboilerplate%2FOrg.html Don't worry about the "X-UA-Compatible" error, but you should definitely get the others fixed and then go from there.