Creating a banner using four grid elements, with each element containing four child elements, is a simple process that can

Can you assist me in recreating my idea from an image?

I am having trouble understanding how to select and place other elements, and then return them to their original positions after deselecting...

I attempted to use a grid but it did not work properly...

Here is the code I have that displays the child elements:

  function toggleAdditionalGrid(clickedElement) {
  var section = clickedElement.closest('.shopify-section');
  var additionalGrid = section.querySelector('.dt-sc-additional-grids');
  if(window.innerWidth<1020){
              if(additionalGrid.style.display=='none' ){
                  additionalGrid.style.cssText='display: flex; flex-wrap: wrap;justify-content: center;flex-direction: column;align-content: center;';
                }
              else {
                console.log(window.innerWidth);
               additionalGrid.style.cssText='display: none; grid-template-columns: repeat(4, 25%) !important; margin: auto; width: 100% !important;justify-content: center !important; @media (max-width: 1020px) {display: none; flex-wrap: wrap;justify-content: center;flex-direction: column;align-content: center;}';
              }
  }
 else{
              if(additionalGrid.style.display=='none' ){
                additionalGrid.style.cssText='display: inline-grid; grid-template-columns: repeat(4, 25%) !important; margin: auto; width: 100% !important;justify-content: center !important;';
              }
            else{
                console.log(window.innerWidth);
             additionalGrid.style.cssText='display: none; grid-template-columns: repeat(4, 25%) !important; margin: auto; width: 100% !important;justify-content: center !important; @media (max-width: 1020px) {display: grid;grid-template-columns: repeat(1, 100%) ;justify-content: center;flex-direction: column;align-content: center;}';
            }
    }
};

I simply need a code that will expand the clicked element and display its child elements.

javascripthtmlcssgrid

Answer №1

Why not try utilizing the Flexbox layout technique to create a "grid" design instead of relying on display: grid.

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  font-family: Arial;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.grid {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem;
  gap: 1rem;
  height: 100%;
}

.row {
  display: flex;
  flex-direction: row;
  flex: 1;
  gap: 1rem;
}

.col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.bg-red    { background: #FF2222; color: #FFF; }
.bg-orange { background: #FF6422; color: #FFF; }
.bg-brown  { background: #441212; color: #FFF; }

.fs-1 { font-size: 1rem; }
.fs-2 { font-size: 2rem; }
.fs-3 { font-size: 3rem; }
<div class="grid">
  <div class="row flex-2 bg-red fs-3">
    <div class="col">Selected</div>
  </div>
  <div class="row">
    <div class="col bg-orange fs-1">Child</div>
    <div class="col bg-orange fs-1">Child</div>
    <div class="col bg-orange fs-1">Child</div>
    <div class="col bg-orange fs-1">Child</div>
  </div>
  <div class="row">
    <div class="col bg-brown"></div>
    <div class="col bg-brown"></div>
    <div class="col bg-brown"></div>
  </div>
</div>

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 happens when the `.push` command runs the "Undefined" function in jQuery - is it possible to execute a number instead?

My script is quite simple - I'm trying to use the push method to add the result of a function called dNumber into the variable named pattern. However, every time I try this, the result is always "undefined". Oddly enough, when I try pushing just plain ...

javascriptjqueryarrays

Instruction to pay attention to the event

After noticing that I've added similar event listening code to many of my controllers, I began to think about how to streamline it. The code looks something like this: document.addEventListener("resume", function(e){ $scope.doSomething(); }, ...

javascriptangularjsangularjs-directivedom-events

Ways to clear away adhesive header and maintain its fixed position

I've been tinkering with my website, which you can find at this link: . I used the html5 up template for it, and the template came with a sticky header. However, when the site is viewed on a smaller screen, there's an ugly gap that forms between ...

javascriptcsshtmlscrollsticky

Custom JavaScript files are not recognized by Angular 4 pages unless the page is manually refreshed

I am facing an issue with my custom JavaScript files in Angular. I have imported them all in the angular-cli.json file but the pages do not recognize them unless I refresh the page after navigating from one page to another. Here is a snippet of my angular ...

javascriptangularroutesangular-cli

Why does this asynchronous function initially return nothing, only to suddenly return all results on subsequent tries?

My current task involves inserting data into my database within a map loop. To ensure that the loop completes before proceeding, I am utilizing an async function to store all results in the variable "practicasAgregadas." This is how I invoke the function: ...

javascriptexpressasynchronouspromise

What is the best way to keep wp_nav_menu expanded while accessing submenu links?

Recently, I joined the Wordpress community and am currently in the process of converting a static HTML site to the WP platform. Almost everything is working smoothly except for the navigation menu. I am attempting to utilize the built-in navigation featur ...

phphtmlcsswordpressnavbar

What is the best way to ensure that my multiple choice code in CSS & JS only allows for the selection of one option at a time? Currently, I am able

I'm currently facing a small issue that I believe has a simple solution. My knowledge of Javascript is limited, but I am eager to improve my skills in coding for more visually appealing websites. My problem lies in the code snippet below, where I am ...

javascripthtmlcss

The RC-dock library's 'DockLayout' is not compatible with JSX components. The instance type 'DockLayout' is not a valid JSX element and cannot be used as such

Despite encountering similar questions, none of the provided answers seem to address the issue within my codebase. My project utilizes React 17, Mui v5, and TS v4. I attempted to integrate a basic component from an external package called rc-dock. I simply ...

javascriptreactjstypescriptmaterial-uireact-dnd

Methods for verifying if a file is included in another file, while disregarding any whitespace adjustments

Let's say I have multiple CSS files (a.css, b.css, ..., e.css) and after concatenating and compressing them, I get a new file called compressed.css. Now, I need to verify if each of the original CSS files is included in the compressed.css file. Are th ...

cssfilecompressionminify

Sending data to a Bootstrap modal dialog box in an Angular application

Using span and ng-repeat, I have created tags that trigger a modal pop-up when the remove button is clicked. Within this modal, there is a delete button that calls a function. I am trying to figure out how to pass the id of the remove button to the modal ...

javascriptjqueryangularjstwitter-bootstrapbootstrap-modal

What could be causing my code to become unresponsive when using a for loop compared to a loop with a specific

After spending a solid 4 hours on it, I finally managed to figure it out. There were no errors popping up, so I resorted to using the debug feature which unfortunately didn't provide much insight. Without any error messages to guide me, I wasn't ...

javascriptnode.jsfor-loopwhile-loop

Pass the ID and content of a textarea element by utilizing the AJAX post method and incorporating SweetAlert version 2 for a seamless and

function solveTheIssue(id) { promptUser({ title: "Share your complaint", input: "textarea", showCancelButton: true, confirmButtonColor: "#DD8B11", confirmButtonText: "Yes, submit it!", ...

jqueryhtmlajaxsweetalert2

The functionality of Material UI tooltip is not functioning properly when accessed on mobile devices

Attempting to transform Tooltip into a controlled component that relies on the onClick event. While this setup works well on mobile and web, it loses its original functionality of showing the Tooltip on hover. Is there a way to make the Tooltip function ...

javascriptreactjsmaterial-ui

Send a request to templateUrl

After experimenting with AngularJS, I decided to create a dynamic route system that funnels all routes through a single PHP file. This was motivated by my desire to prevent users from accessing raw templateUrl files and seeing unstyled partial pages. Prio ...

javascriptajaxangularjs

How can I locate the following table after choosing an element using a jQuery selector?

I'm looking for a selector that can start at the element I click on and locate the next item with a specific class on the page. Here's an example to illustrate my request: <table> <tr> <td>Some text here</td> <td>&l ...

javascriptjqueryjquery-selectors

Creating a div that expands to occupy the entire width, even when hidden and requiring a scroll mechanism

I am facing a challenge with my webpage that has two panels. The second panel includes a large table that does not fit within the width of the window, even with wrapped content. To address this issue, I added a horizontal scroll, but the div still does not ...

htmlcsspanel

jQuery-UI tabs appearing on various elements

My web page layout includes three different divs: header, wrapper, and footer. The header is set to a fixed position. Within the wrapper, there are various components, including some jqueryUI tabs. However, as I scroll down the page, the wrapper and its ...

jqueryhtmlcssjquery-uijquery-ui-tabs

JavaScript ACTING UP -> CROSS-ORIGIN RESOURCE ACCESS ERROR

After extensive research and troubleshooting, it dawned on me that the issue was not with JavaScript itself. Instead, I was facing a cross origin resource exception, which occurred because the ajax request was unable to access my server script due to lac ...

javascriptphpajax

Guide to triggering a popover from within another popover using jQuery

Currently, I have a situation where a popover is triggered by clicking on a button. The goal is to trigger another popover from the first popover by clicking on some content within it. If you'd like to see a demonstration, check out this JSFiddle lin ...

jqueryhtmlcss

Prevent scrolling on browser resize event

I am working on a basic script that adds a fixed class to a specific div (.filter-target) when the user scrolls beyond a certain point on the page. However, I am wondering how I can prevent the scroll event from triggering if the user resizes their brows ...

javascriptjquerywindow-resize