Achieving a stacked arrangement of divs upon click-through using only pure JavaScript

Question

Achieving a stacked arrangement of divs upon click-through using only pure JavaScript

In the example provided in my fiddle, the div elements return to their original positions when clicked. However, I am looking for a solution where the last clicked div always remains on top. This is my current code:

function displayOne() {
    document.getElementById("fluid1").style.display = 'block';
}

function displayTwo() {
    document.getElementById("fluid2").style.display = 'block';
}

function displayThree() {
    document.getElementById("fluid3").style.display = 'block';
}

If possible, I would like to find a solution without using jQuery. Thank you!

javascript css onclick

Answer 1

Answer №1

Here is a suggestion to achieve the desired outcome.

You can move the items into a container upon clicking on them, which will maintain their order based on when they were moved into the container.

http://jsfiddle.net/Zgxv9/1/

var target = document.getElementById( "container");

function displayOne() {
    target.appendChild(document.getElementById("fluid1"));
}

function displayTwo() {
    target.appendChild(document.getElementById("fluid2"));;
}

function displayThree() {
    target.appendChild(document.getElementById("fluid3"));
}

If you prefer them to be added to the top, you can use the insertBefore method, and it can be implemented like this: http://jsfiddle.net/Zgxv9/7/

var target = document.getElementById( "container");

function displayOne() {
    target.insertBefore(document.getElementById("fluid1"), target.firstChild);
}

function displayTwo() {
    target.insertBefore(document.getElementById("fluid2"), target.firstChild);;
}

function displayThree() {
    target.insertBefore(document.getElementById("fluid3"), target.firstChild);
}

Answer 2

Here is a suggestion to achieve the desired outcome.

You can move the items into a container upon clicking on them, which will maintain their order based on when they were moved into the container.

http://jsfiddle.net/Zgxv9/1/

var target = document.getElementById( "container");

function displayOne() {
    target.appendChild(document.getElementById("fluid1"));
}

function displayTwo() {
    target.appendChild(document.getElementById("fluid2"));;
}

function displayThree() {
    target.appendChild(document.getElementById("fluid3"));
}

If you prefer them to be added to the top, you can use the insertBefore method, and it can be implemented like this: http://jsfiddle.net/Zgxv9/7/

var target = document.getElementById( "container");

function displayOne() {
    target.insertBefore(document.getElementById("fluid1"), target.firstChild);
}

function displayTwo() {
    target.insertBefore(document.getElementById("fluid2"), target.firstChild);;
}

function displayThree() {
    target.insertBefore(document.getElementById("fluid3"), target.firstChild);
}

Answer 3

Answer №2

EXAMPLE — http://jsfiddle.net/KsJz8/2/

var box = document.getElementById('box');

function showBox() {
    var popup = document.getElementById("popup");
    popup.style.display = 'block';
    box.insertBefore(popup, box.firstChild);
}

Answer 4

EXAMPLE — http://jsfiddle.net/KsJz8/2/

var box = document.getElementById('box');

function showBox() {
    var popup = document.getElementById("popup");
    popup.style.display = 'block';
    box.insertBefore(popup, box.firstChild);
}

Answer 5

Answer №3

To utilize the insertBefore technique, you can refer to the documentation. A live example is available for demonstration.

function showContent(evt) {
    evt.preventDefault();
    var identifier = this.href.split('#')[1],
        content = document.getElementById('fluid' + identifier),
        allContents = document.getElementsByClassName('container-fluid');

    //if current content is not the first one, insert it before the initial content
    content !== allContents[0] && content.parentNode.insertBefore(content, allContents[0]); 
    content.style.display = 'block'; //then display it
}

[].forEach.call(document.getElementsByClassName('toggle'), function(element){
    element.addEventListener('click', showContent);
});

Answer 6

To utilize the insertBefore technique, you can refer to the documentation. A live example is available for demonstration.

function showContent(evt) {
    evt.preventDefault();
    var identifier = this.href.split('#')[1],
        content = document.getElementById('fluid' + identifier),
        allContents = document.getElementsByClassName('container-fluid');

    //if current content is not the first one, insert it before the initial content
    content !== allContents[0] && content.parentNode.insertBefore(content, allContents[0]); 
    content.style.display = 'block'; //then display it
}

[].forEach.call(document.getElementsByClassName('toggle'), function(element){
    element.addEventListener('click', showContent);
});

Answer 7

Answer №4

Enhancing the modularity of the function is essential. Here is the updated code: http://jsfiddle.net/a3RtP/12/

function modifyElement(elementID) {
var element = document.getElementById(elementID);
element.style.display = 'block';

var clonedElement = element.cloneNode(true);
// console.log(clonedElement);

var parent = element.parentNode;
// console.log(parent);

var containerList = document.getElementsByClassName("container-fluid");

var firstElement = containerList[0];

parent.insertBefore(clonedElement, firstElement);
parent.removeChild(element);
}

Answer 8

Enhancing the modularity of the function is essential. Here is the updated code: http://jsfiddle.net/a3RtP/12/

function modifyElement(elementID) {
var element = document.getElementById(elementID);
element.style.display = 'block';

var clonedElement = element.cloneNode(true);
// console.log(clonedElement);

var parent = element.parentNode;
// console.log(parent);

var containerList = document.getElementsByClassName("container-fluid");

var firstElement = containerList[0];

parent.insertBefore(clonedElement, firstElement);
parent.removeChild(element);
}

Achieving a stacked arrangement of divs upon click-through using only pure JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What steps do I need to take to adjust this function based on the timezone?

Setting the response type to text in Angular 6 when making an http call

Tips for selecting a checkbox with Puppeteer

JQuery Mobile Listview Filter Not Working: Troubleshooting Tips

Retrieving complete database in JSON format with the help of the mysql node.js driver

Fixing content at the bottom inside a container with Bootstrap 4

How do I view a wildcard in my ID selector using jQuery?

What is the best way to adjust the spacing between posts on a website

Video from Brightcove continues to play even after closing the modal dialog

Displaying the number of tasks completed compared to the total number of tasks within a JavaScript ToDo list

Is it possible for an HTML file to not recognize an external CSS stylesheet?

Resolving conflicting event handlers within vue.js

Update the style class of an <img> element using AJAX

Steps for initializing a Vue component instance by passing parameters

Setting the $dirty flag to true when a value is entered in the text box, but not the other way around

Error: An unexpected identifier was found within the public players code, causing a SyntaxError

"Counting the clicks on the filter button in React

Issue with Abide Validation Events not triggering in Reveal Modal for Foundation Form

Three.js: dividing the camera's view frustum (similar to what is done in Cascade Shadow Mapping)

Is there a way to change the background color of the body on click and have it applied throughout the entire site