Develop Reference

Moving between 4 buttons and have roll overs stay clicked between

I have seen a few things close to what I want but am not sure how to implement to what I'm doing.
The below code all works fine but have now been asked to make the hover stay in place when each button is clicked. How would I go about this? Or is it better to start again using buttons and not divs?
Here is a jsfiddle (not sure why all the divs are showing here, live only the first one does which is correct)
Example of button:
<div id="tab1" class="tab" style="height:50px; width:160px; background-color:#CCC; float:left;">
<img src=".../images/landing/terms-coach.jpg" onmouseover="this.src='.../images/landing/terms-coach-col-2.jpg'" onmouseout="this.src='.../images/landing/terms-coach.jpg'" />
</div>
https://jsfiddle.net/uqxdum1o/

I've modified the markup and JS a bit to get there but I think this code should fulfil the tab requirement and remove some of the inline JS.
Essentially, store the active image src in an attribute for each tab button:
<div id="tab1" class="tab" style="..."
data-image-active="./images/button1-active.jpg"
data-image="./images/button1.jpg">
<img src="./images/button1.jpg" />
</div>
Then use this to set active state in your javascript for each tab button. I've moved your current code for click handling into this each loop too.
$(document).ready(function(){
var $contents = $('.tab-content');
$contents.slice(1).hide();
$('.tab').each(function() {
$(this).hover(function() {
setButtonActive($(this));
}, function() {
if (!$(this).hasClass('active')) {
setButtonInactive($(this));
}
});
$(this).click(function() {
resetAllButtons();
setButtonActive($(this));
$(this).addClass('active');
var $target = $('#' + this.id + 'show').show();
$contents.not($target).hide();
})
});
});
function setButtonActive(button) {
var img = button.find('img'),
imgSrc = button.attr('data-image-active');
img.attr('src', imgSrc);
}
function setButtonInactive(button) {
var img = button.find('img'),
imgSrc = button.attr('data-image');
img.attr('src', imgSrc);
}
function resetAllButtons() {
$('.tab').removeClass('active').each(function() {
setButtonInactive($(this));
});
}

How do I change the CSS for the sequential number element on click?

I have used jQuery to generate a sequential numbering for my menu items.
When clicked, the hyperlink text becomes red.
However, the problem here is that I want the respective number to turn into red as well when the hyperlink is clicked (active).
Such as when 'WHY YOU NEED IT' is clicked, the text turns red perfectly. But I need the number 1's background color to change into red as well.
I tried replacing classes but it didn't work.
This is the JS.
jQuery(function ($) {
$(".menu-solutions-menus-container ul li").each(function (i, el) {  $(this).children('a').prepend("<number>" + (i + 1.) + "</number>");
});
$('.local-scroll').click(function (event) {
event.preventDefault();
var full_url = this.href;
var parts = full_url.split('#');
var trgt = parts[1];
var target_offset = $('#' + trgt).offset();
var target_top = target_offset.top;
$('html, body').animate({
scrollTop: target_top
}, 500);
});
$('.menu-solutions-menus-container a').click(function () {
$('.menu-solutions-menus-container a').removeClass('active');
$(this).addClass('active');
});
$('.number').click(function () {
$('.number').removeClass('active');
$(this).addClass('active');
});
Here's the jsfiddle workspace. (Change jQuery version to jQuery 1.7.2 or above if you don't see the numbers.)
The secondary menu in this site is where I would really want to implement it.
Thanks a lot in advance.

Your class names just need a tweek and this'll work fine
change
number.active {
background: white;
}
To
.active number {
background: red;
}
Edit (explanation)
The CSS selector number.active is looking for an html element number that has a class of active like this <number class="active" /> but what your HTML shows is that you wanted the parent <a> to have the active with a child node of <number>.
So to do that you put the parent class first, followed by a space to note a child node of the parent, followed by the element you want to target.
so:
parentElement.parentClass childElement.childClass {
defs
}
you could write
a.active number {
background: red
}
Edit 2 for top bars:
There's a few things, the first being that the grey areas are actually background colors, as opposed to borders. Second the CSS selector is looking for a parent class of "active" but your "active" is a child of the <li>'s
<li id="menu-item-205" class="local-scroll menu-item menu-item-type-custom menu-item-object-custom menu-item-205">
</li>
what you can do is make the li the get the active class like this
$('.menu-solutions-menus-container a').click(function () {
$('.menu-solutions-menus-container a').removeClass('active');
$(this).parent('li').addClass('active');
});
$('.number').click(function () {
$('.number').removeClass('active');
$(this).parent('li').addClass('active');
});
$('.menu-solutions-menus-container a').click(function(){
$('ul.shortcode_menu.solution-menu li').removeClass('active');
$(this).parent('li').addClass('active');
});
Then change your CSS to reflect the <li> is the element with the active class.
ul.shortcode_menu.solution-menu li.active {
background: black;
}
Again I've changed it to background: black instead of border-top, as I think that's the effect you want.

Jquery .load "cannot get"

I'm using .load to switch content in my #content div but when I click on a link it brings me to a white page saying "cannot get /index" or whatever.
The initial content does get loaded so I know the first three lines of code work.
Any ideas why I "cannot get" my other files?
Here's my HTML
<div id="nav">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
</ul>
</div>
And the Jquery
$(document).ready(function() {
// initial
$('#content').load('content/index.html');
// handle menu clicks
$('ul#nav li a').click(function() {
var page = $(this).attr('href');
$('#content').load('content/' + page + '.html');
return false;
});
});

Here is the answer -
$(document).ready(function() {
// initial
$('#content').load('content/index.html');
// handle menu clicks
$('div#nav ul li a').click(function() {
var page = $(this).attr('href');
$('#content').load('content/' + page + '.html');
return false;
});
});
Shortly, the #nav is the id of the div not the ul so $('ul#nav li a'). should have been $('div#nav ul li a'). more precisely $('div#nav > ul > li > a').
If you want animations like fade, try this -
$('div#nav ul li a').click(function() {
var page = $(this).attr('href');
$('#content').fadeOut('fast', function(){
$('#content').load('content/' + page + '.html', function(){
$('#content').fadeIn('fast');
});
});
return false;
});
But for sliding animation its gonna be a little tricky, cause you have to do something like that -
Fist slide left by animating width
Then take the div to the right end of the window using css left
Load it and make the width normal
change the left to make it slide left again.
This will give you a space between animations, but if you want spaceless animation, then you will have to use more divs and a little more logics. Happy experimenting.. :)

When the content is loaded dynamically the actions on html elements will not be catched by direct .click() function So:
Use $(document).on('click', 'ul#nav li a', function() {
Instead of $('ul#nav li a').click(function() {
This Worked for me

As per your edit
You have a wrong jQuery selector, it should be -
$('#nav ul li a').click...

Can't figure out adding/removing classes with jquery

I need help with this JS code for my wordpress theme.
First part is when it looks for h4 heading and if it has certain text it wraps all paragraphs below this h4 into div (which hides all paragraphs into fading section) and adds "button" (which is span):
var tutustu = 'TUTUSTU';
var syvenny = 'SYVENNY';
$('.article_content h4').each(function(){
if($(this).text() == tutustu)
{
$(this).nextUntil("h4").wrapAll('<div class="expand" />').parent().append('<span id="expand">show more</span>');
}
else if($(this).text() == syvenny) {
$(this).nextUntil("h4").wrapAll('<div class="expand" />').parent().append('<span id="expand">show more</span>');
}
});
Second is when user clicks on "button" div (that we wrapped into all paragraphs early) will get another class (to basicaly reveal all the paragraphs) and remover button:
$('span#expand').click(function() {
$(this).parent('.expand').removeClass('expand').addClass('expanded');
$(this).remove();
});
What I need is after paragraph text is revealed I want to have button to click on and everything goes back like in 1st part.
I came up with something like this:
$('span#expanded').click(function() {
$(this).parent('.expanded').removeClass('expanded').addClass('expand');
});
But it doesn't work (
Help is much appreciated

Use event Delegation and .toggleClass() instead of .addClass() and .removeClass()
$(document).on("click" , "span#expanded" , function() {
$(this).parent().toggleClass('expanded expand');
});

$('#expanded').on('click', function(e) {
$(this).parent().toggleClass('expanded expand');
e.preventDefault();
});

jQuery Accordion misbehaving when expanding and contracting

I'm having trouble figuring out a bug in my accordion. The arrow icons are misbehaving when clicked on. If you go here, you will see some categories hidden by accordions. When you click on one and then close it, it behaves properly. But if you click on one, then click on another below before closing the first one, you'll notice that the arrow for the one above has returned to its "closed" position without closing it.
Here is the HTML that makes up each accordion:
<dl class="accordion">
<dt><strong>Accordion Title:</strong> Details</dt>
<dd>Hidden details</dd>
</dl>
The CSS for the arrows:
.accordion dt:after {
content: "\f125";
color: #ED4F30;
font-family: "Ionicons";
padding-left: 10px;
}
and
.accordion dt.accordion-active:after {
content: "\f123";
color: #ED4F30;
font-family: "Ionicons";
padding-left: 10px;
}
And finally the jQuery that I'm using to expand/collapse:
function ($) {
//Hide all panels
var allPanels = $('.accordion > dd').hide();
//Show first panel
//$('.accordion > dd:first-of-type').show();
//Add active class to first panel
//$('.accordion > dt:first-of-type').addClass('accordion-active');
//Handle click function
jQuery('.accordion > dt').on('click', function () {
var $this = $(this) ,
$target = $this.next();
jQuery('.accordion > dt.accordion-active').not($this.toggleClass('accordion-active')).removeClass('accordion-active');
$this.siblings('dd').not($target.addClass('active').slideToggle()).slideUp();
return false;
});
}
Any ideas what I'm missing?

It looks like you are overcomplicating things a little. You don't need to use the "not()" method to filter anything out. You are only toggling between 2 states (add/remove class, show/hide element) so you only need to use 2 jQuery methods, which were already in your code.
jQuery('.accordion > dt').on('click', function () {
var $this = $(this),
$target = $this.next();
$this.toggleClass('accordion-active');
$target.slideToggle();
return false;
});
Here's a JSFiddle based on the code you provided: http://jsfiddle.net/e5pe5/
Let me know if this is the intended functionality of your accordion.