We Keep Coding

Bootstrap accordion target links stay active

So what I'm trying to accomplish is I'm building a website using Wordpress. I have a menu and one of the items is "Products" under products I have 4 items, electronics, cars, house supplies, and other. For this example I'm focusing on electronics. So under electronics i have another submenu. So this is the 3rd level, which looks like the code below.
<li class="dropdown menu-products"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="http://mywebsite/products/">Products <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu menu-electronics">Electronics
<ul class="dropdown-menu">
<li class="menu-tv">Tvs</li>
<li class="menu-phones">Phone</li>
<li class="menu-games">Games</li>
<li class="menu-other">Other</li>
</ul>
</li>
Now when I click on any of the links on the 3rd level it will take you to the parent page and open up an accordion for that id. So I set that up and it works. However the problem I'm having is since all of these items example (tv, phones, games, others) are technically on the same page. When I click on one of the links, and i go back to the menu, all the links in the 3rd level are active. So if I were to click on a different item, the url changes but the page doesn't refresh nor does the new target accordion open. Here is what I have so far for this area. I'm assuming I have to add something to this script to check every time a link is clicked?
<script type="text/javascript">
(function( $ ) {
$(document).ready(function() {
var anchor = window.location.hash.replace("#", "");
$(".collapse").collapse('hide');
$("#" + anchor).collapse('show');
});
})( jQuery );
</script>
Tried to set up a JSfiddle to show this but failed at it.

Triggering Javascript from a link on a previous page

I have a list of links on a services page that when clicked, reveal content relevant to the individual service. This is to save space on the page. I have done this using slide in JS.
On the homepage I also have a list of services that I would like to have linked the services page and then open up the relevant content dependant on service clicked on the homepage.
I'm a new user of Javascript so unfortunately this isn't something I could work out myself or find a solution for elsewhere. I would really appreciate somebody helping me to find a way of doing this.
Find below a short example of my code:
Homepage
<ul id='homepage-services-list'>
<li><a href='services.php'>Service 1</a></li>
<li><a href='services.php'>Service 2</a></li>
</ul>
Services
<ul class='services-tabs'>
<li class='services-tab'>
<a class='service-1-trigger'>
<div>
<h3>Service 1</h3>
<img src='images/down-arrow-icon.png'>
</div>
</a>
</li>
<article class='service-1-content'>
<p>Content about service etc.</p>
</article>
<li class='services-tab'>
<a class='service-2-trigger'>
<div>
<h3>Service 2</h3>
<img src='images/down-arrow-icon.png'>
</div>
</a>
</li>
<article class='service-2-content'>
<p>Content about service etc.</p>
</article>
</ul>
Javascript - JQuery
$(document).ready(function(){
$(".service-1-trigger").click(function(){
$(".service-1-content").slideToggle(600, function(){
$(this).toggleClass("service-1-toggle").css('display',' ');
});
});
$(".service-2-trigger").click(function(){
$(".service-2-content").slideToggle(600, function(){
$(this).toggleClass("service-2-toggle").css('display',' ');
});
});
});
Thank you!

You can add anchors to your links.
<ul id='homepage-services-list'>
<li><a href='services.php#1'>Service 1</a></li>
<li><a href='services.php#2'>Service 2</a></li>
</ul>
With these anchors, you can extract from the URL the service wanted (1 or 2) and simulate a click with jQuery.
In your document.ready :
var url = document.location.toString();
if (url.indexOf('#') != -1) {
var num_service = url.split('#')[1];
$(".service-" + num_service + "-trigger").click();
}

Here's one way to approach it:
On the home page, add fragment identifiers to those links:
<ul id='homepage-services-list'>
<li><a href='services.php#service-1'>Service 1</a></li>
<li><a href='services.php#service-2'>Service 2</a></li>
</ul>
On page load (inside your ready handler will do) look at location.hash. That is the current fragment identifier for the page. If it's one of your service identifiers, trigger the code showing that service.
You might also have your click handlers add the hash to the URL by setting location.hash, for consistency.
Look also at the history API for more control over hashes and URLs for in-page transitions.

Short of switching to a SPA-type framework, there's no way for javascript on one page to directly affect a subsequently-linked page.
Two simple approaches to work around this are
Cookie / localStorage: Have your outgoing link set a cookie with a specific value for each link. The receiving page can check the value of this cookie and adjust as needed.
URL hash: Include a hash value or parameter in the outgoing links, i.e. <a href='services.php#service1'>. The receiving page can then check location.hash to read this value.

Click event on jQuery "fly out" menu

I'm trying to create a click event on a jQuery fly out menu. Once you hover to the 2nd or 3rd layer is where I need the event to take place.
I'm also new to jQuery so forgive me if the code isn't up to standards.
I have a sample here: http://jsbin.com/makoreficexe/1/edit

If I understood it right, you just want to have a click event inside the sub items of menu.
To do that, you need to find a way to identify the tag that was clicked, and there are a lot of ways.
I'll show you just 3 examples, but there are a lot...
1 - you can have a class for every tag that you want to click.
HTML - specifying a class
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a class="About" href="#">About This Template Here</a></li>
<li><a class="Flash" href="#">Flash</a></li>
<li><a class="Jquery" href="#">jQuery</a></li>
</ul>
</li>
Js
$(document).ready(function($) {
$(".About").click(function(){
alert("clicked")
}),
$(".Flash").click(function(){
alert("clicked")
})
});
The problem in this case is that is difficult to manage a lot of classes.
2 Using Id's
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a id="About" href="#">About This Template Here</a></li>
<li><a id="Flash" href="#">Flash</a></li>
<li><a id="Jquery" href="#">jQuery</a></li>
</ul>
</li>
JS
$(document).ready(function($) {
$("#About").click(function(){
alert("clicked")
}),
$("#Flash").click(function(){
alert("clicked")
})
});
The problem is that could be harder to manage a lot of ids as well. but i guess that is the better approach for your simple scenario
3 - You can get it using nth child. the problem is that if you change the structure of your html file, it can "break" your jquery selector.
$("#navList li:nth-child(2)").click(function(e){
alert(e);
})
Here is a list with a lot of types of jquery selector .
http://www.tutorialspoint.com/jquery/jquery-selectors.htm
Hope it helps.

$('.listTab a').click(function(e){...});

One approach would be to add "data" attributes to your a tags (http://api.jquery.com/data/).
For example, in the html for your first flyout:
<li><a data-whatever="This is in data-whatever" href="#">About This Template Here</a></li>
And in your jQuery ready bit, add this:
$('.listTab li a').click( function (e){
e.preventDefault(); // this prevents the href="#" in your a tag from firing
console.log($(this).data('whatever'));
});
You can then use the 'data-whatever' attribute in your click function to trigger what needs to happen.
http://jsbin.com/budoqizumuja/3/edit?html,css,js,console,output

How do you scroll down to navbar when a nav link is clicked

I want to be able to automatically scroll down when a link in the navbar is clicked. Right now when links in the navbar are clicked the page reloads and returns to the top of the page. I used JQuery to hide the sections that aren't selected now I need to add the scroll method when a link is clicked. OR build it so that when the navbar link is selected, the page reloads with the new unhidden section, and the page moves down to the navbar. I would like to see both methods if possible.
<div id="tab_container">
<nav id="tabs">
<ul id="nav">
<li class="active">About</li>
<li class="inactive">Services</li>
<li class="inactive">Our Staff</li>
<li class="inactive">book</li>
<li class="inactive">Gift Cards</li>
<li class="inactive">Reviews</li>
</ul>
</nav>
</div>

You need to provide an ID for the link to point to. If you only link to '#', the page will simply reload.
This link will jump to the corresponding ID on the H2
Click to move to ID 'myLink'
<h2 id="myLink">My link</h2>
As for the jQuery, did you use .hide(), .toggle() or .remove()?
.hide() does exactly that, but doesn't delete it from the DOM.
.toggle() switches between visible and invisible.
.remove() actually deletes your target from the DOM, and it can't be manipulated after that.

Getting every element with a specific ID (jQuery)

I need to get every element with a specific id, get the parent of the object, and set its ID.
How would I do this?
I have this code:
<li id="edge_top"> </li>
<!-- Menu Items Here -->
<li id="not_selected"><a id="selection_link" href="index.htm">Home</a></li>
<li id="not_selected"><a id="selection_link" href="page1.htm">Subitem 1</a></li>
<li id="not_selected"><a id="selection_link" href="page2.htm">Subitem 2</a></li>
<!-- Menu Items End Here -->
<li id="edge_bottom"> </li>
I need to find all the anchor elements with the id "selection_link", get the parent (the "list item" element [li]) and set its ID to "selected". How would I do this with jQuery? I'll be using the conditioning to determine if the li element will actually be allowed to get the new ID. (if the URL matches the href property of the anchor element).

HTML specification specifies that an ID should only be applied to 1 element. You can't have more then one element with the same ID.
In this case, it's better to use classes.
TO select by class:
$(".classname")...
EDIT: An example based on your code:
<li class="edge_top"> </li>
<!-- Menu Items Here -->
<li class="not_selected"><a class="selection_link" href="index.htm">Home</a></li>
<li class="not_selected"><a class="selection_link" href="page1.htm">Subitem 1</a></li>
<li class="not_selected"><a class="selection_link" href="page2.htm">Subitem 2</a></li>
<!-- Menu Items End Here -->
<li class="edge_bottom"> </li>
<script type="text/javascript">
$(document).ready(function(){
$(".selection_link").parent().removeClass("not_selected").addClass("selected")
});
</script>

You need to use classes for that. In HTML you not allowed to use ID's multiple times.

The id attribute should be unique across your XHTML document, so this question is not really valid.
Although this may work if you really insist:
$("[id=xx]")

$('li a').each(function(){
if ($(window).attr('location').href.match($(this).attr('href'))) {
//example with class
$(this).parent().addClass('selected');
// example with id
$(this).parent().attr('id', 'selected');
}
});