We Keep Coding

jQuery ToggleClass optimisation and features

I have worked on the below code to control a series of 3 sidebars. As you can see, the code isn't particularly efficient as I've simply repeated the content for each class. I'd like to streamline this if possible to just one function?
I'd also like to add the functionality of only ever allowing one sidebar to be active. So if sidebar .artists is .active and I click sidebar .about, the .artists sidebar will collapse.
Thanks.
JQuery
$(function() {
$( ".artists" ).click(function() {
$( ".sidebar.artists" ).toggleClass( "active" );
});
});
$(function() {
$( ".about" ).click(function() {
$( ".sidebar.about" ).toggleClass( "active" );
});
});
$(function() {
$( ".history" ).click(function() {
$( ".sidebar.history" ).toggleClass( "active" );
});
});
HTML
<nav>
<ul>
<li class="artists"><a>Artists</a></li>
<li>News</li>
<li class="about"><a>About</a></li>
<li class="history"><a>History</a></li>
</ul>
</nav>
<nav class="sidebar artists">
Sidebar Artists content
</nav>
<nav class="sidebar about">
Sidebar About content
</nav>
<nav class="sidebar history">
Sidebar History content
</nav>

You can use this to optimize it:
$(function() {
$( ".sidebar" ).click(function() {
$(this).toggleClass( "active" );
$(".active").toggleClass( "active" );
});
});
As per markup code I would suggest you to add an ID to the main ul as main-nav:
$(function() {
$( "#main-nav li" ).click(function() {
var cls = this.className;
$(this).addClass( "active" )
.siblings("li").removeClass( "active" );
$(".sidebar."+cls).slideToggle()
.siblings(".sidebar").slideUp();
});
});

$('.artists, .about, .history').click(function() {
var subClass = '';
if($(this).hasClass('artists')) {
subClass = 'artists';
} else if($(this).hasClass('about')) {
subClass = 'about';
} else if($(this).hasClass('history')) {
subClass = 'history';
}
$('.sidebar:not(.'+subClass+')').removeClass('active');
$('.sidebar.'+subClass).toggleClass('active');
});
https://jsfiddle.net/aua0wxm9/3/

As you have given the markup, I have changed my code.
Try this:
I have checked this code and it works properly
JS
$(document).ready(function(){
$('ul li').on('click',function(){
$('.sidebar').hide();
$(this).parent().parent().siblings("." +$(this).attr('class')).show();
});
});
Alternatively using active class
$('ul li').on('click',function(){
$('.sidebar').removeClass('active');
$(this).parent().parent().siblings("." +$(this).attr('class')).addClass('active');
});
Here's the fiddle example:
http://jsfiddle.net/5angwsnb/3/
Hope it works well for you too!
Update:
CSS:
.sidebar{
display:none;
}
.active{
//your transition here
}

Put transition to hover in jquery

I have this script in jquery which makes a hover image (in the hover replaces the images) .
The specific question is how do I place a transition ?
$( "figure.salud img" ).hover(
function() {
$( this ).attr("src","img/salud5.jpg");
},function() {
$( this ).attr("src","img/salud5-gris.jpg");
}
);

Are you looking for something as this ,do let me know if something else was expected!
$( ".salud img" ).hover(
function() {
$( this ).fadeOut(0).attr("src","https://pmcdeadline2.files.wordpress.com/2014/06/yahoo-logo.jpg").fadeIn(500);
},function() {
$( this ).fadeOut(0).attr("src","http://velocityagency.com/wp-content/uploads/2013/08/go.jpg").fadeIn(500);
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="salud">
<img src="http://velocityagency.com/wp-content/uploads/2013/08/go.jpg" width="160" height="160"/>
</div>
JS FIDDLE: https://jsfiddle.net/nhwuh7pb/9/

Toggle 2 div with one onclick

I have 2 divs which i need to toggle them with one button, the first one slide Up and the second one slide down.
HTML
dasdasdasdasd
<button>Toggle 'em</button>
JQuery
$( "button" ).click(function() {
$( "#nav" ).slideUp();
});
Can anybody help me out?
JSFIDDLE

You can use class instead of id and make one div hidden by using display:none;
html:
<div class="nav" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div class="nav" style="background:gray; height:200px;display:none;"></div>
<button>Toggle 'em</button>
jquery
$( "button" ).click(function() {
$( ".nav" ).toggle( "slow" );
});
Demo

Use a class or then name attribute instead of an id .
HTML
<div class="nav" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div class="nav" style="background:gray; height:200px"></div>
<button>Toggle 'em</button>
JS
$( "button" ).click(function() {
$( ".nav" ).toggle( "slow" );
});
JSFiddle
PS
Never use the same id for two elements. An id should be unigue.

You need to hide one element to toggle them differently
$( "button" ).click(function() {
$( "#nav1" ).slideToggle( "slow" );
$( "#nav2" ).slideToggle( "slow" );
});
Demo

Try this,
Html
<div id="nav1" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div id="nav2" style="background:gray; height:200px"></div>
And some CSS
#nav1{
display:none;
}
Script
$( "button" ).click(function() {
$( "#nav1,#nav2" ).slideToggle( "slow" );
});
Demo

Duplicate ids are invalid html, you should rather use class instead.
You will also need to hide one element in beginning for toggling.:
$( "button" ).click(function() {
$( ".nav" ).slideToggle( "slow" );
});
Working Demo

It seems that your div has an id of nav. In order to select 2 divs, you can try assigning the same class name to both, for example:
<div class="nav"></div> (x2)
Then change your jQuery to:
$('.nav').slideUp();
That way, jQuery knows to select both divs and slide them up.

Is it possible to trigger mouseover on body load

I need to trigger mouseover event on body load. I have done the below code:-
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#outer").trigger("mouseover");
$( "#outer" ).mouseover(function() {
alert("rrrrr");
$( "#log" ).append( "<div>Handler for .mouseover() called.</div>" );
});
});
</script>
<div id="outer">
Outer
<div id="inner">
Inner
</div>
</div>
<div id="other">
Trigger the handler
</div>
<div id="log"></div>
But it's not working. Any help please?

You are possibly triggering the code before the body is actually wrote to the page. I made up a JSFiddle and got it working putting the trigger after the function. Not sure why but it works.
$( "#outer" ).mouseover(function() {
alert("rrrrr");
$( "#log" ).append( "<div>Handler for .mouseover() called.</div>" );
});
$("#outer").trigger("mouseover");
here is my JSFiddle

JQuery - Adding class onto element, and then interacting with that class doesn't work

When you click ( ".toggle-button a" ), it adds .close class to itself. And fades in .info-overlay
This works fine, but when you click it again, I want info-overlay to fade out again, and the close class to be removed. But this doesn't work.
Am I missing something here?
http://jsfiddle.net/bazzle/xpS9P/1/
html
<div class="toggle-button">
<a>click</a>
</div>
<div class="info-overlay">
content
</div>
css
.info-overlay{
display:block;
width:100px;
height:100px;
background-color:green;
display:none;
};
js
$( ".toggle-button a" ).click(function() {
$( ".info-overlay" ).fadeIn("500");
$(this).addClass('close');
});
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});

Use event delegation:
Change
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
to:
$(document).on('click',".toggle-button a.close",function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
Because a .click() is attach and forget handler, but .on() is dynamic.

see updated Fiddle
$( ".toggle-button a" ).click(function() {
if($(this).hasClass('close')){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
}else{
$( ".info-overlay" ).fadeIn("500");
$(this).addClass('close');
}
});
reference hasClass()

You could use delegation or just set your logic as following:
DEMO
$(".toggle-button a").click(function () {
$(".info-overlay").fadeToggle(500).toggleClass('close');
});