Reordering div elements with JQuery

As soon as my page loads, I have a div set to display:block and another div set to display:none.

I have implemented a toggle switch that should replace the visible div with the hidden one.

However, I am facing an issue where after performing the switch, I lose reference to the replaced div and cannot toggle between them.

Due to the different layout on Desktop, I cannot position the Divs beside each other in the HTML. So, I am exploring options to switch positions and hide the one being replaced.

If you would like to take a look at my work so far, you can check out my Fiddle here:

http://jsfiddle.net/javacadabra/mdqmto9u/

Your assistance would be highly appreciated.

I attempted cloning the divs before switching them, but unfortunately, that approach did not yield the desired result either.

In my fiddle demo, the goal is for the LEFT div to switch positions with the RIGHT div when the box is checked.

javascriptjqueryhtmlcss

Answer №1

I have a challenge in my code where I want to switch the position of two divs when a checkbox is checked.

Have you considered this solution?

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

Check out the live demo on jsFiddle

Answer №2

Here is an alternate solution, focusing on modifying the content only. If you wish to change classes or other attributes, you can modify your design to apply CSS to the innerHTML of your elements. Check out this live example: http://jsfiddle.net/8yqctr2p/

$('#toggle').on('click', function(){
   var topContent = $('#box1').html();
   var bottomContent = $('#box3').html();
   $('#box1').html(bottomContent);
   $('#box3').html(topContent);
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The website's text content loads first, allowing for images to take their time and load afterwards

My priority is to ensure that my images load as quickly as HTML and CSS. Currently, the loading time for images (all in .svg format and small) exceeds 2 seconds after other content loads, despite HTML and CSS loading swiftly. Is there a method to expedite ...

jqueryhtmlcssangularjs

Tips for Dynamically Binding Data in Angular ChartsWant to learn how to dynamically bind

I have integrated angular-charts directives into my application and everything works perfectly when initializing the data. However, I encountered an issue when reading the data from a JSON file and assigning it to the chart. The x-axis and y-axis are gener ...

javascriptjsonangularjschartsangularjs-controller

Storing progress of a multi-step form in Laravel 5.6 on both the database and local drive

I've been working on implementing a multi-step form using JQuery Steps in Laravel 5.6. Instead of just saving all the data at the end, I want to save each step of the form in the MySQL database and on the user's local drive. This way, I can track ...

jqueryajaxlaravellaravel-5laravel-5.6

Determine the total count of files in queue with Uploadify prior to initiating the upload process

When I specify auto: false in the uploadify settings, the upload process will only start when the submit button is clicked. Once the onQueueComplete event is triggered, the form will be submitted. However, if no files are selected, the onQueueComplete even ...

javascriptjquery

Embracing the node mindset with a Java foundation

As a Java Developer, I have become accustomed to working in a sequential manner where tasks are executed one after the other or concurrently with multiple threads. The organization of code in a sequential way seemed logical under this paradigm. However, wh ...

javajavascriptnode.jsasynchronous

Ways to apply color conditions to table rows based on table data values?

I am using ngFor to create a table from two arrays in Angular typescript. <tr *ngFor="let e of lis1; let k=index"> <td>{{e}} </td> <td>{{lis2[k]}}</td> </tr> The resulting table l ...

htmlcssangulartypescripthtml-table

Is there a way to modify certain parameters of a plugin without the need to directly edit the

Is there a way to modify certain parameters of a plugin without directly editing it? You can find the link to the plugin here: . Can we include an additional script to override specific parameters of the above script, such as setting displayTime to 1000 ...

javascriptjquerypluginsjquery-plugins

What is the process of creating and customizing popovers in Bootstrap 5 with jquery?

Is there a way to dynamically create and add content to Bootstrap 5 popovers using JavaScript or jQuery? In Bootstrap 3, I used the following method: $('#element').popover({ placement : 'left', trigger : 'focus', html: true } ...

javascriptjquerypopoverbootstrap-5

What is the best way to send a parameter in pug?

My template with URL parameter is not functioning properly doctype html html head block head meta(charset="utf-8") meta(name="viewport", content="width=device-width") meta(http-equiv="X-UA-Compatib ...

javascriptreactjspug

Altering the language code on LinkedIn

As a beginner in programming, I successfully added the linkedin share button to my test webpage. Now, I am hoping to make the button change language based on the user's language selection on the webpage. Linkedin uses a five character language code ( ...

javascriptdjangolinkedin-api

When you utilize the [Authorize] attribute in an ASP.NET MVC controller, it effectively prevents any Script code from executing

I have encountered an issue with my JavaScript code within script tags in my ASP.NET MVC project. Everything runs smoothly, but as soon as I include the Authorize keyword in my controller, the JavaScript stops working. Strangely, I have been unable to find ...

javascriptasp.netasp.net-mvcauthorizationauthorize

How can you simultaneously start multiple tweens in Three.js using Tween chain?

Here's the current code snippet : function move(){ var A = new TWEEN.Tween(meshA.position).to({ z: -10 }, 2000).start(); var B = new TWEEN.Tween(meshB.rotation).to({ z: Math.PI }, 2000); var C = new TWEEN.Tween(meshC.position).to({ x: ...

javascriptthree.jschaintween.js

Every attempt to make an Ajax request ends in failure

I'm struggling with my jQuery script, as the AJAX call always fails and I can't figure out why. Here is the function: <script> function submitLoanApplication() { var time = document.getElementById(&apo ...

javascriptphpjqueryhtmlajax

utilizing an arrow function in the same manner as a traditional function

I am a fan of the new arrow ()=>{} syntax and would love to use it wherever possible. I understand that arrow functions point to the outer this context. Is there a way to modify an arrow function so that "this" points to its inner scope? For example, h ...

javascriptangularjsecmascript-6

Div with full height will not have scrollbars

As I work on developing a chat site, I've come across a peculiar issue with the chat display feature. Currently, my jQuery code dynamically adds chat rows to a div. My goal is to set the height of this div to 100% so that it adjusts based on the user& ...

jqueryhtmlcsscross-browser

Exploring the potential of utilizing the "wait" function in Selenium WebDriver for

I want to automate a test on my website using the Selenium WebDriver for JavaScript. How can I approach running tests here with content that may not be ready when the page loads, such as data coming from an external API? In my case, the content is loaded ...

javascripthtmlseleniumselenium-webdriverauth0

`Finding specific components or pages within an AngularJS application`

I came across a unique webpage for an Angularjs based project. I am looking to develop an autofiller and autoclicker feature. To achieve this, I need to identify pages or subpages uniquely (especially in cases of Ajax-based changes). The major challenge ...

javascriptjqueryangularjsautofill

Combining and mapping arrays in Javascript to form a single object

I am using the following firebase function this.sensorService.getTest() .snapshotChanges() .pipe( map(actions => actions.map(a => ({ [a.payload.key]: a.payload.val() }))) ).subscribe(sensors => { ...

javascriptangulartypescriptfirebasefirebase-realtime-database

Navigation drop-down extending beyond the boundaries of the screen

On the right side of react-bootstrap's Navbar, there is a Dropdown menu: <Nav className="container-fluid justify-content-end"> <NavDropdown alignRight title="Dropdown" flip> <NavDropdown.Item href="#action ...

cssreact-bootstrapbootstrap-5

Identify this concept: a data structure that arranges all elements in an array towards the beginning

Imagine a type of data structure that allows for random access, where removing one object causes all subsequent objects to shift forward. For instance, consider an array with a length of five but only containing three items: [A,B,C,null,null] If we remo ...

javascriptjqueryarraysdata-structuresvector