Develop Reference

each loop should only run once when button is clicked

I want to hide a div when a button is clicked and then show the next div with the same class. I have tried using this code, but when I do this, the next div that I want shown also fades out.
$('.arrow:last-of-type').on('click', function(){
$( ".collaboration" ).each(function( index ) {
if($('.collaboration').css('display') == 'block'){
$(this).fadeOut()
$(this).next().fadeIn()
}
})
})
Is there a way to stop the each() from running when it is executed once and then run again when the click action happens?
Here's the HTML:
<div id="collaborations">
<p class="arrow"><</p>
<div class="collaboration">
<img src="./img/test.png" />
<p>Text</p>
<button>Visit</button>
</div>
<div class="collaboration">
<img src="./img/test.png" />
<p>Text</p>
<button>Visit</button>
</div>
<div class="collaboration">
<img src="./img/test.png" />
<p>Text</p>
<button>Visit</button>
</div>
<p class="arrow">></p>
</div>
</div>
Thanks

Solution
You could solve this by not iterating through the .collaborations at all.
The key thing is that you need to keep track of which one is currently being shown.
If you know that, then what your click handler can do is show the next one and hide the current one.
I would suggest doing that with a class .active on the same div as .collaboration. You can then select the next div by $('.active').next().addClass('.active'), and deselect by $('.active').removeClass('.active').
You might need to store a reference to your first element before you select the next one 👍
Example
Here's a quick example of how this might work: https://codepen.io/juancaicedo/pen/LYGgPWa
I moved around the html to group all the collaborations into a div by themselves.
Other approaches
You'll find that you have to think through some other behaviors with the solution above. For example, in my example, there is a moment when two items are on the screen, causing their container div to grow and later shrink.
For these reasons, I don't like handling presentation from within javascript (i.e. using jquery's fadeIn/fadeOut).
If you can find a way to instead using only css, I think that's preferable. Here's an example using css transitions
https://codepen.io/juancaicedo/pen/ZEQqzrR

The each method of jQuery can be stopped whenever you want by returning false inside of the callback, so you can probably fix your code by doing this:
$('.arrow:last-of-type').on('click', function(){
$( ".collaboration" ).each(function( index ) {
if($('.collaboration').css('display') == 'block'){
$(this).fadeOut()
$(this).next().fadeIn()
return false;
}
});
});

Toggle Image Source on Click

I'm trying to do a typical expand and collapse function to display/hide a div on image click.
Here's my HTML:
<div id="result_location">
<h3>Heading Text here</h3>
</div>
<div class="result_menu"></div>
And my JavaScript:
$('#result_location').click(function() {
$('.result_menu').slideToggle("slow");
});
So there's going to be an image within the #result_location div, that alternates between a plus/minus when the .result_menu gets toggled.
Hope that kinda makes sense!

Have wrote a fiddle for you.
Basically toggling the source will done the trick.
Here is the code
Html
<div class="msg_list">
<p class="result_location">Heading Text here<img src="http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/CollapseSign.gif"></img></p>
<div class="result_menu">
This <br/>
is <br/>
a <br/>
Testing <br/>
Content
</div>
</div>
javascript
$(".result_location").click(function(){
$(this).next(".result_menu").slideToggle("slow");
})
.toggle( function() {
$(this).children("img").attr("src","http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/ExpandSign.gif");
}, function() {
$(this).children("img").attr("src","http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/CollapseSign.gif");
});
check the fiddle here

Assuming I read correctly, your "trigger" is .result_menu. Here is a JSFiddle that accomplishes what I think you're looking for: http://jsfiddle.net/trevanhetzel/P4N2c/
Essentially, we bind to the trigger element using .on("click") and then find the image to toggle and .slideToggle it. Pretty straightforward.
$(function () {
$(".result_menu").on("click", function () {
$("#result_location img").slideToggle();
});
});
You'll also want to display: none the image in the CSS.
Am I missing anything about your desired outcome?

You could toggle a class on #result_location and then add the arrow image as a CSS background image for that selector. When clicked again the class would be removed, thus removing/changing the image.

Fade Out And fade in Div with specific class and id

I am facing a little issue with some jquery code. I have some divs (look bellow)
<div class="add" id="1">Follow</div>
<div class="added" id="1">Following</div>
<div class="add" id="2">Follow</div>
<div class="added" id="2">Following</div>
I am trying when user clicks in each div with class add to fadeout the specific div and fade in the next div with class added.
Check my Code:
<script type="text/javascript">
$(document).ready(function($){
$('.add').click(function () {
$(this).find('.add').hide("fast");
$(this).find('.added').fadeIn("slow");
});
});
</script>

ID's must be unique and it should not be a number. You have to set different ids for your divs. Additionally you have to hide the div with class .added initially to achieve your need.
Because fadeIn wont work on elements which are already visible.
Try,
<script type="text/javascript">
$(document).ready(function($){
$('.added').hide();
$('.add').click(function () {
$(this).hide("fast");
$(this).next('.added').fadeIn("slow");
});
});
</script>
DEMO

You need to use $(this) to hide current element and use next to hide .added, also use unique ids to make your html valid.
The next element is already visible you probably need fadeOut() to hide it.
Live Demo
$('.add').click(function () {
$(this).hide("fast");
$(this).next('.added').fadeOut("slow");
});

You can't have same id on multiple elements. Instead use a class
$('.add').on('click', function(){ $(this).fadeOut().next('.added').fadeIn(); });

Couple of points:
Ids should be unique. In case, you need same selector on group of elements, use class.
this reference contains the target on which event listener is added, So your this context contains the element with add class. jquery.find() tries to match the selector on the children. That's why your code is not working.
Just try this Jsbin Demo
HTML
<div class="wrapper">
<div class="add" id="1">Follow</div>
<div class="added" id="1">Following</div>
</div>
JS
$('.wrapper').click(function () {
$(this).find('.add').hide("fast");
$(this).find('.added').fadeIn("slow");
});
Idea: Bind event listener on parent.

Changing CSS class in jQuery

I'm trying to change the CSS class of a couple DIVs, Linked below is my jFiddle
The only change is that the -selected class actually has a background image which seems to have the background color of the -non-selected class.
The other problem is after selecting another div, you can't select the first one again. What exactly is jQuery doing with the classes? When I add the -non-selected class to it, it should become select-able again, right?
http://jsfiddle.net/9FZcz/
jQuery
$(".selector-box").click(function () {
$(".selector-box-selected").removeClass("selector-box-selected").addClass("selector-box");
$(this).removeClass("selector-box").addClass("selector-box-selected");
});
HTML
<div class="selector-box-selected"></div>
<div class="selector-box"></div>
<div class="selector-box"></div>
<div class="selector-box"></div>
CSS
.selector-box{
margin-bottom:2px;
width:328px;
height:46px;
background-color:rgba(255,255,255,.25);
}
.selector-box-selected{
margin-bottom:2px;
width:351px;
height:46px;
background-image:url(../images/layout/SelectedArrow.png);
}

You should try another way to adding and removing classes, try this one :
$(".selector-box").click(function () {
$('.selector-box').removeClass("selected");
$(this).addClass("selected");
});
Updated JsFiddle

The problem with not being able to select the first one again is that the click event is not being linked to it, since you only apply it to the <div> elements with the class .selector-box. Apart from that, CSS seems fine, check the fiddle: http://jsfiddle.net/9FZcz/2/

I change your code abit
<div name="ss" class="selector-box-selected"></div>
<div name="ss" class="selector-box"></div>
<div name="ss" class="selector-box"></div>
<div name="ss" class="selector-box"></div>
$("div[name=ss]").click(function () {
$("div[name=ss]").removeClass("selector-box-selected").addClass("selector-box");
$(this).removeClass("selector-box").addClass("selector-box-selected");
});
don't mind a name SS, change it to what you want :D

There are already answers posted that suggests solutions that requires some refactoring, like adding a selected class to selected elements rather than having seperate selector-box-selected and selector-box classes.
While I think you should perform the refactoring since it makes the overall design better and leads to less CSS code duplication, here's a solution without refactoring the code.
I kept track of the last selected element to avoid looping over all of boxes to remove the selected class.
DEMO
var selectedBox = $('.selector-box-selected').get();
$('.selector-box').add(selectedBox).click(function () {
if (selectedBox === this) return;
selectedBox = $([this, selectedBox])
.toggleClass('selector-box-selected')
.toggleClass('selector-box')
.get(0);
});

jQuery toggle - Close all except this

I have found this code (jQuery):
$('.toggle').click(function() {
$('.container').eq($(this).index()).toggle('fast');
});
This is my HTML:
<h4 class="toggle">Title1</h4>
<h4 class="toggle">Title2</h4>
<h4 class="toggle">Title3</h4>
<div class="container">Content1</div>
<div class="container">Content2</div>
<div class="container">Content3</div>
CSS
.container {
display: none;
}
I can toggle what I want with it.
The problem
When I click the toggle-class I want to close all open container-classes BUT NOT the current container-class (because it should be toggled).
The current container-class should toggle. That means that all elements could be closed BUT ONLY ONE could be opened at the same time.
I tried to just put jQuery hide before the script but that makes the container-class impossible to close (because when toggle hide is equal to show).
Code guess hide all .container except this

Using David's answer as a starting point, we can use .siblings to accomplish what you want:
$('.toggle').click(function() {
var index = $(this).index();
$('.container').eq(index).toggle().siblings('.container').hide();
});
See: http://www.jsfiddle.net/85zCp/
As an aside, you might want to use JavaScript to hide all elements initially instead of CSS because users with JavaScript disabled won't be able to see any content if you use CSS to hide them. Also, you would probably want to have each h4 heading in front of the contents instead of it put together like you're doing right now.

$('.toggle').click(function () {
$('.container').hide('fast');
$('.container').eq($(this).index()).show('fast');
});
I don't know exactly but I think this is what you're looking for...
Cheers...

This is a little verbose, but its use should be fairly obvious:
$('.toggle').click(
function(){
var index = $(this).index();
$('.container').hide().eq(index).show();
});
JS Fiddle demo.