When my page loads I have a div that is set to display:block and a second div that is set to display:none.

I've got a toggle switch that I would like to replace the shown div with the hidden div.

Currently, I'm trying to do this, but when I perform the switch I no longer have a reference to the div I've replaced and cannot toggle between them.

I can't position the Div's beside one another in the HTML as the page is a different Layout in Desktop so I'm wondering if it is possible to switch positions and hide the one being replaced?

This is my Fiddle:

/

I'd appreciate any help.

I tried cloning the divs before I switch them but that doesn't work either.

In my fiddle I'm trying to get it so that when you check the box the LEFT div switches position with the RIGHT div and vice versa

When my page loads I have a div that is set to display:block and a second div that is set to display:none.

I've got a toggle switch that I would like to replace the shown div with the hidden div.

Currently, I'm trying to do this, but when I perform the switch I no longer have a reference to the div I've replaced and cannot toggle between them.

I can't position the Div's beside one another in the HTML as the page is a different Layout in Desktop so I'm wondering if it is possible to switch positions and hide the one being replaced?

This is my Fiddle:

http://jsfiddle/javacadabra/mdqmto9u/

I'd appreciate any help.

I tried cloning the divs before I switch them but that doesn't work either.

In my fiddle I'm trying to get it so that when you check the box the LEFT div switches position with the RIGHT div and vice versa

• javascript
• jquery
• html
• css

• 1 Couldn't you just toggle() them? Incidentally please take the time to include your code in the question itself, don't rely on external sites. – David Thomas Commented Feb 9, 2015 at 16:59
• I can't because it's a responsive layout and on my desktop version the divs are seperated by a central div. basically when I get below a certain screen width I hide the div on the far right. – Javacadabra Commented Feb 9, 2015 at 17:00
• do you want to do this only for a smaller screen? if so use a CSS @media tag – Steve Commented Feb 9, 2015 at 17:04

2 Answers 2

In my fiddle I'm trying to get it so that when you check the box the LEFT div switches position with the RIGHT div and vice versa

Couldn't you just do this?

$('#check').change(function () {
    if ($(this).is(':checked')) {
        $('#div3').insertBefore($('#div2'));
        $('#div1').insertAfter($('#div2'));
    } else {
        $('#div3').insertAfter($('#div2'));
        $('#div1').insertBefore($('#div2'));
    }
});

jsFiddle example

Here is another solution, changing just the content. If you want classes, etc. changed you could adjust your layout to apply css to the innerHTML of your divs. Fiddle: http://jsfiddle/e9aa84ry/

$('#check').change(function(){
   var left = $('#div1').html();
   var right = $('#div3').html();
   $('#div1').html(right);
   $('#div3').html(left);
});