Develop Reference

onclick switch div position

Brief Description: Need to switch the position of the div's when i click on them.
Requirement: If i click on hello,world these 2 should switch , if i click on hello2,world2 those 2 will switch.
Here is my code:
Note - i have switched the div's with a checkbox, note - only the top one is switching, i want to achieve the switching on clicking
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
alert("div swapped");
})
$('#check').change(function () {
//alert('check clicked');
if ($(this).is(':checked')) {
$('#div1').insertAfter($('#div2'));
} else {
$('#div1').insertBefore($('#div2'));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="div1">Hello</div>
<div id="div2">World</div>
</div>
<br>
<div>
<div id="div1">Hello2</div>
<div id="div2">World2</div>
</div>
<br>
click me to switch Hello,World<input type="checkbox" name="check" id="check"/>
If i click on hello,world these 2 should switch , if i click on hello2,world2 those 2 will switch.
Please help.

If I get you right this is what you're looking for:
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
alert("div swapped");
})
$('.click').click(function (evt) {
var $div = $(evt.target).closest('.switch');
$div.next('.switch').after($div);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">
<div class="switch">Hello</div>
<div class="switch">World</div>
</div>
<br>
<div class="click">
<div class="switch">Hello2</div>
<div class="switch">World2</div>
</div>

alternating button on clicking event?

Hey, it's all about Jquery. I am using two Div and a button, at a time only one div is shown. Suppose these are div:
<div id="first"></div>
<div id="second"></div>
And button is:
<input type="button" value="show first" onClick="called a javascript();"/>
Only single div is shown i.e. first
<script>
$(document).ready( function() {
$("#second").hide();
});
</script>
Now on clicking button, I want to hide first div, show second and the value of button is changed to show second and if clicked again it revert back to previous state.
Thanks in advance

Heres' the FIDDLE. Hope it helps.
html
<div id="first" style="display:none;">first</div>
<div id="second">second</div>
<input id="btn" type="button" value="show first" />
script
$('#btn').on('click', function () {
var $this = $(this);
if ($this.val() === 'show first') {
$('#first').show();
$('#second').hide();
$this.val('show second');
} else {
$('#first').hide();
$('#second').show();
$this.val('show first');
}
});

What you are looking for is the toggle function from jquery
Here's an example on fiddle
$(".toggleMe").click(function() {
$(".toggleMe").toggle();
});

Jquery move element from a div to another

I have two lists: the first one is displayed on the left and the second on the right.
I want that if I click on an element in the left, he is removed and he is prepended to the right list (and the opposite action)
This is my html:
<div class="cont">
<div id="groupL" class="innDiv">
<div id="1" class="aaaL">Value 1</div>
<div id="2" class="aaaL">Value 2</div>
</div>
<div id="groupR" class="innDiv">
<div id="4" class="aaaR">Value 4</div>
<div id="3" class="aaaR">Value 3</div>
</div>
</div>
This is the javascript source.
var clickLtoR = function(n){
_this = $('#'+n);
$('#groupR').prepend('<div class="aaaR" id="'+n+'">'+_this.html()+'</div>');
_this.remove();
}
var clickRtoL = function(n){
_this = $('#'+n);
$('#groupL').prepend('<div class="aaaL" id="'+n+'">'+_this.html()+'</div>');
_this.remove();
}
$('.aaaL').click(function(){
clickLtoR($(this).attr("id"));
});
$('.aaaR').click(function (){
clickRtoL($(this).attr("id"));
});
If I click for example on "Value1", I need to move this div to the right.
It's works..but if I click again on the same element, for example following the previous example on the "value 1", this have not any associated click event and does not come back on the left list.
How to do to solve this problem and bind the click on the "new element"?
Here, the working code on JSFiddle http://jsfiddle.net/uw446/1/

http://jsfiddle.net/uw446/2/
$("div.el").on("click", function() {
var $this = $(this);
if ($this.hasClass("aaaL")) {
$this.removeClass("aaaL").addClass("aaaR").prependTo("#groupR");
} else {
$this.removeClass("aaaR").addClass("aaaL").prependTo("#groupL");
}
});
You are indeed overcomplicating this. The above should work flawlessly.

try this..
$('div.cont div div').click(function(){
var $value = $(this);
var $parent = $value.parent();
if($parent.attr('id') == 'groupL'){
$parent.next('#groupR').prepend($value);
}else if($parent.attr('id') == 'groupR'){
$parent.prev('#groupL').prepend($value);
}
})
http://jsfiddle.net/uw446/4/

Cycle through divs?

I have this HTML:
<div id="container">
<div class="boxes">first box</div>
<div class="boxes">second box</div>
<div class="boxes">third box</div>
</div>
Show me next box
Consider that initially only the first box is visible. When I click 'Show me next box' I want the current visible box to be hidden, and the next .boxes on the list to appear.
The only thing that I think it gets close is the .each function, but I shouldn't cycle through all divs just to show one, I think.

$('a').click(function() {
var visibleBox = $('#container .boxes:visible');
visibleBox.hide();
var nextToShow = $(visibleBox).next('.boxes:hidden');
if (nextToShow.length > 0) {
nextToShow.show();
} else {
$('#container .boxes:hidden:first').show();
}
return false;
});
Live demo.

$('a').click(function(){
$('.boxes').filter(':visible').hide().next().add('.boxes:first').last().show();
});

What code do i need to collapse a div when another is open?

i use a simple bit of code to make a div collapse, this is it:
<script language="JavaScript">
<!--
function expand(param)
{
param.style.display=(param.style.display=="none")?"":"none";
}
//-->
</script>
what code do i add to make it recognise when one div is open an collapse the previous div?here's the link I'd use:
Link 1
<div id="div1" width="300px" style="display:none"></div>
Any ideas?

This is something jQuery works really well for. Here is a working example in jsfiddle.
http://jsfiddle.net/mrtsherman/uqnZE/
Example html
<div class="category">A
<div class="artists">Apple<br/>Ace<br/>Ants<br/></div>
</div>
<div class="category">B
<div class="artists">Bee<br/>Bop<br/>Book<br/></div>
</div>
<div class="category">C
<div class="artists">Cake<br/>Chimp<br/>Charles<br/></div>
</div>
And the code:
$(".category").click( function() {
$(".artists").hide();
$(this).children(".artists").show();
});
Basically what it does is hide all the divs that contain artists, then shows the div for the one you clicked on. Really simple.

If you were willing to use jQuery, the selector of your interest is something along the lines of
$('div#parent-container > div').filter(':visible');
For example, if I were to demonstrate with next & previous, I would do it something like this. With targeted links it would work by appending ID's to the divs and referencing those in the href attribute of `anchors'. (now included within example)
Something to mess with:
$(function(){
//Reference Object
var $divs = $('div > div');
//Buffer for selected variable
var $selected = 0;
//Show first
$divs.eq(0).show();
$('#next').click(function(){
//Update selected var
$selected = $divs.filter(':visible');
//Save next to variable
var $next = $selected.next();
//Change Visibility
toggle($next);
//Prevent Default
return false;
});
$('#prev').click(function(){
$selected = $divs.filter(':visible');
var $prev = $selected.prev();
toggle($prev);
return false;
});
$('a').click(function(){
$selected = $divs.filter(':visible');
var selector = $(this).attr('href');
if(selector == '#') return false;
toggle( $( selector ) );
return false;
});
var toggle = function($toggle){
if(!$toggle.length) return false;
$selected.hide();
$toggle.show();
}
});
<!--Simple Implementation and dependancies-->
<a id="prev" href="#">Prev</a>
<a id="next" href="#">Next</a>
Show Item Four
<div>
<div id="item-1">One</div>
<div id="item-2">Two</div>
<div id="item-3">Three</div>
<div id="item-4">Four</div>
<div id="item-5">Five</div
<div id="item-6">Six</div>
</div>
div > div {
font-size:5em;
width:auto;
text-align:center;
padding:20px 0;
display:none;
}