Is there a method to modify the arrangement in which 3 specific HTML elements are displayed (i.e., their hierarchy in relation to one another)?

I have 3 "p" elements and I'm trying to find a way to change the order in which they load on the page using JS or CSS. Below is an example of what I've attempted so far. When you click on the first box labeled "about 1," it opens up and displays the small boxes for the other boxes below it, allowing you to click on them. I want this behavior to apply to all the boxes. Essentially, I want the sequence in which the boxes are loaded by the HTML to be altered when a box is clicked. For instance, if I click on box 2, then the HTML element News / Updates / Announcements should move above About 1 and About 2, so that when clicked, both links are visible at the bottom.

I'm stuck and would appreciate any assistance.

Thank you!

(In essence, similar to clicking on About 1 for all the boxes!)

body {
  background-color: #000080;
  overflow: hidden;
}

.box1 {
  background-color: #fff;
  position: absolute;
  bottom: -530px;
  left: 50px;
  height: 585px;
  width: 100px;
  border-radius: 10px;
  transition: all 0.8s;
  font-family: Calibri;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 5px;
  font-size: 20px;

}

.box1:focus {
  bottom: -10px;
  left: 35px;
  width: 500px;
  background-color: #dfff00;
}

.box2 {
  background-color: #fff;
  position: absolute;
  bottom: -530px;
  left: 225px;
  height: 585px;
  width: 125px;
  border-radius: 10px;
  transition: all 0.8s;
  font-family: Calibri;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 5px;
  font-size: 20px;

}

.box2:focus {
  bottom: -10px;
  left: 35px;
  width: 500px;
}

.box3 {
  background-color: #fff;
  position: absolute;
  bottom: -530px;
  left: 400px;
  height: 585px;
  width: 100px;
  border-radius: 10px;
  transition: all 0.8s;
  font-family: Calibri;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 5px;
  font-size: 20px;

}

.box3:focus {
  bottom: -10px;
  left: 35px;
  width: 500px;
  background-color: #dfff00;
}

.boxTitle {
  display: block;
  text-align: center;
  font-size: 25px;
}
<p tabindex="0" class="box1">
  <span class="boxTitle"><b><u>About 1</u></b></span>
</p>

<p tabindex="0" class="box3">
  <span class="boxTitle"><b><u>About 2</u></b></span>
</p>



<p tabindex="0" class="box2">
  <span class="boxTitle"><b><u>News / Updates / Anouncements</u></b></span>
</p>

javascripthtmlcss

Answer №1

To achieve this effect, utilize the CSS property z-index.

Assign a z-index value to the body tag and then set a default z-index for each box. I recommend adding a generic class called box to style all boxes uniformly. On focus, adjust the z-index to be lower than the base level of the boxes.

body {
  background-color: #000080;
  overflow: hidden;
  z-index: 1;
}

.box {
  z-index: 3;
  /* common to all boxes */
  background-color: #fff;
  position: absolute;
  height: 585px;
  bottom: -530px;
  border-radius: 10px;
  transition: all 0.8s;
  font-family: Calibri;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 5px;
  font-size: 20px;
}

.box:focus {
  z-index: 2;
  /* These are common to all boxes */
  bottom: -10px;
  left: 35px;
  width: 500px;
}

.box1 {
  left: 50px;
  width: 100px;
  
}

.box1:focus {
  background-color: #dfff00;
}

.box2 {
  left: 225px;
  width: 125px;
}

.box3 {
  left: 400px;
  width: 100px;
}

.box3:focus {
  background-color: #dfff00;
}

.boxTitle {
  display: block;
  text-align: center;
  font-size: 25px;
}
<p tabindex="0" class="box1 box">
  <span class="boxTitle"><b><u>About 1</u></b></span>
</p>

<p tabindex="0" class="box3 box">
  <span class="boxTitle"><b><u>About 2</u></b></span>
</p>

<p tabindex="0" class="box2 box">
  <span class="boxTitle"><b><u>News / Updates / Anouncements</u></b></span>
</p>

Answer №2

It's not necessary to use JavaScript in this scenario. Simply include z-index: -1; within each :focus rule. This will effectively move the element behind others when it is focused.

Answer №3

Ensuring that the clicked box is positioned behind the other two is key.

Avoid redundant CSS classes with minor variations. Create a single class encompassing common properties and apply it to all "box" elements. Define separate classes only for unique properties of each item.

let boxes = document.querySelectorAll("p");

// Iterate through each paragraph box
boxes.forEach(function(box){
  // Add click event listener
  box.addEventListener("click", function(){
    // Iterate through all boxes again
    boxes.forEach(function(b){
      // Set high z-index for all boxes
      // to layer them on top
      b.style.zIndex = 100;
    });
    // Give clicked box a low z-index to send it
    // behind other boxes
    this.style.zIndex = -100;
  }); 
});
body {
  background-color: #000080;
  overflow: hidden;
}

/* Consolidate shared styles into a common class */
.box {
  background-color: #fff;
  position: absolute;
  bottom: -530px;
  height: 585px;
  width: 100px;
  border-radius: 10px;
  transition: all 0.8s;
  font-family: Calibri;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 5px;
  font-size: 20px;
}

/* Specific styles for individual boxes */
.box:focus {
  bottom: -10px;
  left: 35px;
  width: 500px;
  background-color: #dfff00;
}

/* Separate classes for unique properties */
.box1 { left:50px;   }
.box2 { left: 225px; }
.box3 { left: 400px; }

.boxTitle {
  display: block;
  text-align: center;
  font-size: 25px;
}
<p tabindex="0" class="box box1">
  <span class="boxTitle"><b><u>About 1</u></b></span>
</p>

<p tabindex="0" class="box box3">
  <span class="boxTitle"><b><u>About 2</u></b></span>
</p>

<p tabindex="0" class="box box2">
  <span class="boxTitle"><b><u>News / Updates / Anouncements</u></b></span>
</p>

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

What is the best way to set up playwright-jest so that I can skip a specific Test Suite (spec) file during execution?

In my repository, I have a setup using `playwright-jest` with multiple spec files for test suites. I need to skip one of the spec files without moving it from its current directory in the repo. The default script in `package.json` is `"test": "jest -c jes ...

javascriptjestjsbrowser-automationplaywrighte2e

"Implementing a 2D graphical user interface on a three.js

Struggling to create a 2D graphical user interface on the renderer. The challenge lies in positioning the 2D GUI dynamically based on the width of an element drawn in threejs (the element has a width of X using threejs units, and the menu needs to be posit ...

javascriptuser-interfacethree.js

What is the significance of the source element in Vue3's audio element?

Playing mp3 files works in Vue 2, but not in Vue3. <template> <audio src="../file_example_MP3_700KB.mp3" controls ></audio> </template> In Vue3, the code needs to be modified as follows: <template> <audi ...

javascripthtmlvue.jsvuejs3

You are unable to access the array beyond the scope of the function

I am encountering an issue with a function I wrote: function gotData(data){ result = data.val() const urls = Object.keys(result) .filter(key => result[key].last_res > 5) .map(key => ({url: 's/price/ ...

javascriptangularjsarraysnode.js

Mastering the art of jQuery scrolling: A step-by-step guide

Is there a way to utilize jQuery for scrolling purposes? For example, transforming this: <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#home">Home <span class="sr-only">(current)</span></a> ...

javascriptjqueryhtmlcss

Filtering an Array of Objects on the Fly in Vue.js

I'm currently working on a Vue.js app where I need to dynamically apply filter values to an Array of objects based on their field values. Each object in the Array has various fields that I want to filter by. The challenge is that each field can have m ...

javascriptvue.js

What methods can be used to limit the input allowed in a kendo filter text field by the

I have successfully customized the filter on a Kendo grid, but I am facing a small issue. When there is a date column in the grid, I want to restrict users from typing anything in the filter input. The expected behavior is that users should always select t ...

javascriptfilterkendo-uikendo-grid

Sending a JavaScript variable to PHP in order to specify the timezone

I'm working on setting the timezone for every user in the navbar.php file that's included on all pages of my website. After finding a helpful js script, I am able to echo the variable 'Europe/Brussels' to identify my timezone correctly. ...

javascriptphpajaxtimezone

Utilizing jQuery to eliminate spaces and prevent special characters: a comprehensive guide

For my website's signup form, I need to enforce certain rules for the username: The username cannot contain any spaces. The username can only include a dot (.) as special character, similar to how Gmail handles usernames in their signup form. I am ...

javascriptjqueryregexvalidation

Angular Bootstrap uibModal is failing to resolve attributes

Issue with Roles in AngularJS Bootstrap uiModel var modalInstance = $uibModal.open({ animation: $scope.animationsEnabled, templateUrl: 'myModalContent.html', controller: 'ModalInstanceCtrl', size: 100, resolve: { roles: f ...

javascriptangularjs

Text randomly appears on the html page

I've been dedicating a significant amount of time to finding a solution, but haven't had any luck. I'm aiming to create a visual effect where 10 words with varying font sizes slide in from different directions on a canvas within my document ...

javascripthtmlcsscanvashtml5-canvas

The slider customization on Joomla is functioning perfectly on my local machine, but it seems to be encountering some issues on

Having recently started working on a Joomla website for the first time, I encountered some challenges when trying to add a slider module. Despite successfully implementing the slider on my local machine, I faced issues when transferring the code to the liv ...

javascriptphpjqueryjoomlajoomla2.5

Identifying whether a child component is enclosed within a specific parent using React

Is there a more elegant and efficient method to determine if the parent of SeminarCard is Slider? Currently, I am passing this information through a prop. The prop value (true/false) is used to provide additional padding. When used independently: <Semi ...

javascriptreactjs

Having trouble executing javascript with Ext.Ajax in Sencha-Touch2?

Currently, I am utilizing htmlPanel.js in Sencha-Touch as discussed in the Forum here to exhibit local HTML content. Even though I can load the HTML content with standard HTML tags, I'm facing issues with loading JavaScript. Here's the snippet o ...

javascripthtmlajaxextjssencha-touch-2

Implementing React selectors to manage the state changes on page load and when a user

I'm currently delving into React selectors with ReSelect, and while things seem to be going well, I have a feeling that there may be an issue in my logic. 1 - Upon receiving an AJAX response, I obtain a list of "categories" consisting of id, name, an ...

javascriptreactjsreduxreact-reduxreselect

Don't display div if database has certain value - Angular

Is there a way to determine if a specific value exists in a PostgreSQL database? If so, can I then hide an HTML element based on this information? Can CSS and JavaScript be used to hide elements, or is there another method that should be utilized for hidi ...

javascriptcssnode.jsangularpostgresql

What is the best way to utilize moment.js for adding days while excluding weekends?

I have a requirement to set a default follow-up date that is two days ahead of the current date. The existing code for this functionality is as follows: const Notify = moment().add(2, 'days').toDate(); Now, I need to modify this code to exclude ...

javascriptnode.jsangulartypescriptmomentjs

Can the lazy load script dependent on jQuery be utilized before the jquery.js script tag in the footer?

After receiving HTML from an AJAX callback, I noticed that there is a script tag for loading code that uses jQuery. However, I consistently encounter the error of jQuery being undefined. All scripts are connected before the closing </body> tag. Is ...

javascriptjqueryhtmlajax

Tips for concealing the CSS style of a descendant span element when the parent div employs text-overflow: ellipsis

Is it possible to prevent the green background of a child span from showing when the parent span has text overflow ellipsis applied? .container { border : 1px solid black; max-width : 100px; overflow : hidden; text-overflow ...

htmlcss

Encountering a 404 error while using THREE.ImageUtils.loadTexture in three.js

My first attempt at using three.js involves loading a 3D model, but I'm encountering an issue with texture loading. loader.load('models/asteroid_OBJ/asteroid OBJ.js', function (geometry, materials) { var material = new THREE.MeshLambertM ...

javascript3dthree.js