I am currently working on customizing the layout of data retrieved from a plugin on my WordPress page. Specifically, I want to rearrange elements within a div with the class name IDX-columnThree (containing price & address data) and move them to another div with the class name IDX-columnTwo.
Since there are multiple results with the same class name, I am having trouble figuring out how to achieve this on my own, so I am seeking assistance. Below are two screenshots: one displaying the current layout and the other showing the desired layout for better clarity.
https://i.sstatic.net/juBkr.png Current Layout
https://i.sstatic.net/Cvigx.png Desired Result
Initially, I attempted the following code:
$(".IDX-columnThree").contents().appendTo('.IDX-columnTwo').end().fadeOut();However, the result was that it extracted content from all listing results under columnThree and transferred them to every individual listing under columnTwo.
UPDATE 1: I managed to get it working by using the following code:
$(".IDX-columnTwo").append($(".IDX-columnThree").html());
$(".IDX-columnThree").fadeOut();
I couldn't paste the actual code here as it's external, but the webpage I'm referring to is:
The resulting HTML code for columnTwo, after executing the jQuery code mentioned above and gathering contents from both columnTwo and columnThree:
<div class="IDX-resultsCol IDX-columnTwo">
<div class="IDX-propertySize">
<div... [Omitted for brevity] ...>
</div>
Now, I encounter another issue where I aim to create a custom div and place Price, Beds, Baths, and SquareFt inside it to organize them in a row using CSS.