Develop Reference

When div is toggled, already toggled divs untoggle

I'm stuck with some code and I'm not clear as to how to go about making it function without writing a massive amount of code.
The idea is that when one div is toggled to display a hidden text, when you click on another div, that one un-toggles and only shows the other one.
I know how to do it manually (using a boat load of code) but I was wondering if there is maybe a "general" line of code I can just paste behind each it.
Here's my JS:
$(document).ready(function(){
$('#bioInfo').on('click', function(){
$('#bioInfoText').toggle();
});
$('#bioTech').on('click', function(){
$('#bioInfoText').toggle();
});
$('#bioFuture').on('click', function(){
$('#bioFutureText').toggle();
});
$('#bioCont').on('click', function(){
$('#bioContText').toggle();
});
$('#bioAdd').on('click', function(){
$('#bioAddText').toggle();
});
$('#bioPrac').on('click', function(){
$('#bioPracText').toggle();
});
$('#automInfo').on('click', function(){
$('#automInfoText').toggle();
});
$('#automFuture').on('click', function(){
$('#automFutureText').toggle();
});
$('#autom').on('click', function(){
$('#automInfoText').toggle();
});
$('#automContent').on('click', function(){
$('#automContentText').toggle();
});
$('#automAdd').on('click', function(){
$('#automAddText').toggle();
});
$('#automPrac').on('click', function(){
$('#automPracText').toggle();
});
$('#itInfo').on('click', function(){
$('#itInfoText').toggle();
});
$('#it').on('click', function(){
$('#itInfoText').toggle();
});
$('#itFuture').on('click', function(){
$('#itFutureText').toggle();
});
$('#itCont').on('click', function(){
$('#itContText').toggle();
});
$('#itAdd').on('click', function(){
$('#itAddText').toggle();
});
$('#itPrac').on('click', function(){
$('#itPracText').toggle();
});
As you can see it toggles one by one, but only toggles off if I click on that individual div manually, this is not desired.

It would be better to have it in a different implementation. For the solution, here, use a reset function:
function resetAll() {
$('[id$="Text"]').hide();
// Translates to:
$("#bioInfoText, #bioInfoText, #bioFutureText, #bioContText, #bioAddText, #bioPracText, #automInfoText, #automFutureText, #automInfoText, #automContentText, #automAddText, #automPracText, #itInfoText, #itInfoText, #itFutureText, #itContText, #itAddText, #itPracText").hide();
}
And then call the resetAll() function in every click.

If I were you I would just add a class to the elements you want to work with. Then you can do something like this:
$('body').on('click', '.someClass', function(){
var id = $(this).attr('id');
$('.someClass').hide();
$('.someClass #' + id + 'Text').show(); // Following your naming convention
});
Now I don't know how your html looks so I can't say if it is 100% correct... but I think you get the idea.

Moving elements from a list to another list with JQuery

I would like to add an element to another list and remove it from the current when clicked. I tried it with the property appendTo of Selectable, but nothing happens when I click on it.
I built this https://jsfiddle.net/wgaga8uc/ to ilustrate it.
$("#paramselectable").selectable({appendTo: "#paramselected"});
$("#paramselected").selectable({appendTo: "#paramselectable"});
I would appreciate any help,
Thanks.

$("#paramselected li").click(function(){
$("#paramselectable").append(document.createTextNode( "Hello" ));
});

Finally I achieved it adding and removing classes. https://jsfiddle.net/22d7sxvd/
$(function() {
$( ".paramsnav" ).selectable();
});
$('li').click(function () {
var selected = $('#params').find('.ui-selected');
if(selected.hasClass('selectable')) {
selected.removeClass('ui-selected');
selected.removeClass('selectable');
selected.addClass('selected');
selected.appendTo('#paramselected');
} else {
selected.removeClass('ui-selected');
selected.removeClass('selected');
selected.addClass('selectable');
selected.appendTo('#paramselectable');
}
});

How can I combine 2 or more jquery functions with elements that do the same thing but with different names

I would like to make one function that recognizes which instance of playimg is being clicked and which popup to fade in. I have like 5 of these and want to compact the code as much as possible.
How can I rewrite this into just one function?
$('#playimg2').click(function() {
$('#popup2').fadeIn('fast', function() {
// Animation complete.
});
});
$('#playimg3').click(function() {
$('#popup3').fadeIn('fast', function() {
// Animation complete.
});
});
$('#playimg4').click(function() {
$('#popup4').fadeIn('fast', function() {
// Animation complete.
});
});

you can use
$(document).ready(function(){
$('[id*="playimg"]').on('click',function(){
var thisNum = $(this).attr('id').match(/\d+/);
$('#popup'+thisNum).fadeIn('fast', function() {
// Animation complete.
});
});
});
JSFIDDLE

Seeing that all your playimg id's look the same. You can access all of them in the following example. Then all you need to do is retreive the last character of the id (the number) and add the animation to the corresponding element.
$('id^=playimg').click(function(){
var _id = $(this).attr('id');
$('#popup' + _id.subString(_id.length-1)).fadeIn('fast', function(){
//do stuff
});
});

Are those popups descendant (children) HTML elements of #playimg? If yes, you can name it with classes instead of ids like this:
<div class="playimg">
<div class="popup"></div>
</div>
and now javascript:
$( '.playimg').click(function() {
$(this).find('popup').fadeIn('fast', function() {
// Animation complete
});
});

You could do this by simply using classes and getting the index of the clicked element and using that to affect it's partner element like this:
$('.playimg').click(function() {
var cur = $('.playimg').index($(this));
$('.popup').fadeOut('fast');
$('.popup').eq(cur).fadeIn('fast', function() {
// Animation complete.
});
});
.playimg{
width: 100px;
height:20px;
}
.popup{
width: 100px;
height:100px;
display:none;
background-color:#ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="playimg"> playimg 1</div><br>
<div class="popup">popup 1</div><br>
<div class="playimg"> playimg 2</div><br>
<div class="popup">popup 2</div><br>
<div class="playimg"> playimg 3</div><br>
<div class="popup">popup3</div><br>

Below, I demonstrate how you can trigger the click event on all of your target elements.
You also need some way to get the number from the string id's (i.e. playimg2, playimg15, playimg232). You can use a regex with capturing groups via something like /([a-z]+)([0-9]+)/. This regex should work based off the format of your id strings.
Try this:
var splitRegex = /([a-z]+)([0-9]+)/;
$('#playimg2, #playimg3, #playimg4').click(function () {
$('#popup' + this.id.match(splitRegex).pop()).fadeIn('fast', function () {
// Animation complete.
});
});
You may also consider creating a common class for your id's instead.
$('.some-class').click(function () {
$('#popup' + this.id.match(splitRegex).pop()).fadeIn('fast', function () {
// Animation complete.
});
});

jQuery toggle multiple elements

I can not make this piece of code work:
$("a.expand_all").on("click",function(){
$(this).text('Hide');
$('.answer').each(function () {
$(this).slideDown(150, function () {
$(this).show();
});
});
}, function () {
$(this).text('Expand');
$('.answer').each(function () {
$(this).slideUp(150, function () {
$(this).hide();
});
});
});
I'm trying to collapse expend multiple divs, but nothing happens on click event. I 'm using latest jQuery 1.10.1

It looks to me like you're using jQuery's .on method incorrectly. That method has some overloads, but none of them (sensibly) takes two functions.
If I understand what you're trying to do correctly, you just want to toggle some answer elements when a <a> tag is clicked. What you really need to do is have some way of determining if your answers are expanded or not. There are multiple ways to do that, but I've chosen to use a data element:
<a class="expand_all" href="#" data-collapsed="true">expand</a>
<p class="answer">I'm an answer!</a>
<p class="answer">Another answer</a>
Then your JavaScript can be simplified thusly:
$('a.expand_all').on("click",function(){
if( $(this).data('collapsed') ) {
$(this).text('hide').data('collapsed','');
$('.answer').slideDown(150);
} else {
$(this).text('expand').data('collapsed','true');
$('.answer').slideUp(150);
}
});
I simplified some of your constructs as well. In particular, in your code:
$('.answer').each(function () {
$(this).slideDown(150, function () {
$(this).show();
});
});
The .each is unnecessary. Just applying a jQuery method is essentially equivalent to calling .each. You rarely need to use .each. So that simplifies to this:
$('.answer').slideDown(150, function () {
$(this).show();
});
Then, .slideDown shows the element before it starts, so there's no need to call .show a second time. So we can get rid of the callback, simplifying all of this to:
$('.answer').slideDown(150);
You can see all of this in action here:
http://jsfiddle.net/Jammerwoch/sRnkw/5/
Lastly, the reason I asked whether any of your elements are dynamically added is because if they are, the way you are attaching them won't work. That is, the jQuery selectors run once, and then don't get re-run when you add new elements. So you have to be more clever. That's described in the jsfiddle above. Let me know if you need more clarification on that point.

That doesn't look like valid event binding to me, having the two functions there.
HTML - I added a div wrapper for event delegation
<div class="expando_content">
<a class="expand_all" href="#">Expand</a>
<p class="answer">I'm an answer!</a>
<p class="answer">Another answer</a>
<p>Dynamically added "expand more" goes below...it won't work :(</p>
<div id="thing"></div>
</p>
</p>
</div>
JS - moved the toggling functionality inside one function.
$(".expando_content").on("click", ".expand_all", function () {
if (!$('.answer').is(':visible')) {
$(this).text('Hide');
$('.answer').each(function () {
$(this).slideDown(150, function () {
$(this).show();
});
});
} else {
$(this).text('Expand');
$('.answer').each(function () {
$(this).slideUp(150, function () {
$(this).hide();
});
});
}
});
$('<a class="expand_all" href="#">expand more</a>').appendTo($('#thing'));
jsFiddle

jQuery if condition for two element mouseleave

Hereis the code and online JsFiddle:
<div class="blocka"></div>
<div class="blockb"></div>
$(".blocka").mouseenter(function(){
$(".blockb").show();
});
$(".blocka").mouseleave(function(){
$(".blockb").hide();
});
My question is is it possible to have something like
if $(".blocka") or $(".blockb") mouseleave then hide $(".blockb")
I tried the following but it doesn't work :
$(".blocka" || ".blockb" ).mouseleave(function(){
$(".blockb").hide();
});

You can do multiple selections using a comma ,:
$(".blocka, .blockb").mouseenter(function(){
$(".blockb").show();
});
$(".blocka, .blockb").mouseleave(function(){
$(".blockb").hide();
});
Updated fiddle:
http://jsfiddle.net/jaUNY/3/

$(".blocka, .blockb" ).mouseleave(function(){
$(".blockb").hide();
});
multiple selectors will work.
http://api.jquery.com/multiple-selector/

You may want to keep blockb open when moving mouse from blocka to blockb, so the code would be:
$(".blocka, .blockb").hover(
function() { $(".blockb").show() },
function() { $(".blockb").hide() }
);