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

PHP pattern substitution [ replace ]

Seeking assistance with two cases involving regular expressions in HTML code editing [parsing]. I currently use a parser with the following logic (example provided below with YouTube). Select the unique fragment (ED96RtfF22E) from the source HTML code of ...

phphtmlregexreplace

Update the state within a different function in Vue.js

Just starting out with Vue.js and I'm trying to figure out how to update the component's state from a function in another file. I have a basic form with only an input file element. Once the user selects a file, the onChange handler will be trigg ...

javascriptvue.js

Can you guide me on implementing an onclick event using HTML, CSS, and JavaScript?

I am looking for a way to change the CSS codes of the blog1popup class when the image is clicked. I already know how to do this using hover, but I need help making it happen on click instead. The element I want to use as the button; <div class=&quo ...

javascripthtmljquerycss

Guide on converting a complex nested json into the jquery autocomplete format

How can I properly format a complex nested JSON for use with jQuery autocomplete? I have been attempting to map my custom JSON data to fit the required jQuery autocomplete format of label and value, but unfortunately, my list is returning as 'undefine ...

javascriptjsonjquery-ui-autocomplete

Avoiding Multiple Clicks on Anchor Tags in AngularJS

After implementing the sharing functionality, I have noticed that it works fine but there is a repeating issue with the user list. Every time the 'a' tag is clicked multiple times, the user list gets repeated. Can someone guide me on how to resol ...

javascriptangularjs

Troubleshooting IE compatibility issues with jQuery .hide() method

I am encountering a curious issue with hiding span elements using CSS (display: none;). Upon page load, I expect the first span element to be displayed, which it does in all browsers except IE7. This anomaly has left me perplexed as there is no unusual cod ...

jquerycssxhtml

Ways to ensure that a function operates independently for each cloned div and not the original

I'm facing an issue where a jquery function needs to be executed when the drop-down is changed. However, the problem arises when I clone the div element and make changes in the drop-down of the newly cloned element, the effect takes place in the first ...

javascriptjqueryclone

What is the process for transforming the outcome of a Javascript function into a webpage containing solely a JSON string?

I have a specific requirement where I need to fetch a URL and ensure that the only content displayed on the page is a JSON string. For instance, let's say I created a basic function called getDayOfWeek() to determine the current day of the week. The ...

javascriptphpjqueryjson

Tips for resolving CORS error in swagger-ui-express

I'm encountering a "Possible cross-origin (CORS) issue?" error with Spec2 while running this swagger-ui-express application: const express = require('express'); var cors = require('cors'); const app = express(); const swaggerUi = ...

javascriptnode.jsexpressswagger-ui

Utilizing Print Styles in an Angular 7 Application: A Step-by-Step Guide

I'm trying to print an html form within my Angular7 App with minimal margins. I've attempted different solutions such as adjusting the margins manually in Chrome's print preview box and adding @media print styles & @page styles in both the c ...

cssangular

Arrangement containing 4 separate div elements - 2 divs are fixed in size, 1 div adjusts dynamically (without scroll), and the remaining div fills the

I am trying to implement a specific layout using HTML and CSS on a webpage. So far, I have successfully created the black, red, and blue areas, but I am facing challenges with the scrollable green content. It currently has a static height, but I need it to ...

htmlcss

What is the best way to target the specific DIV using a jQuery selector?

My dynamic div is filled with other divs... <div id="wrapper"> </div> //javascript for(//lots of times){ var d = document.cloneNode('divModel'); d.foo = {//a lot of stuff }; document.getChildById('wrapper').append ...

javascriptjqueryhtml

Adding a class to a navigation item based on the route path can be achieved by following

I am currently working on a Vue.js project and I have a navigation component with multiple router-links within li elements like the example below <li class="m-menu__item m-menu__item--active" aria-haspopup="true" id="da ...

javascriptjqueryvue.js

best way to retrieve state from redux-toolkit (excluding initial state) in a Next.js environment

I am attempting to access the state of redux-toolkit in Next.js's getStaticProps (After saving the accessToken in the store, I need to access the store from getstaticprops for the API it requires) Here's what I have tried: export default functi ...

javascriptreduxnext.jsredux-toolkit

Enhanced approach to building with React and Express

Quick Summary: How can I set up a project using React on the front-end and Express on the back-end with just one package.json and node_modules folder? When starting a project that combines a React front-end and an Express back-end, my desired structure is ...

javascriptnode.jsreactjsexpresscreate-react-app

The animation in an AngularJS directive only functions properly when utilizing $timeout

I can't seem to figure out why the animation is not working as intended in the code below: app.directive('openMenu', ['$animate', '$timeout', function($animate, $timeout) { return { link: function(scope, elem ...

javascriptangularjsanimation

Display the footer once the user has reached the end of the page by scrolling

Below is the footer code I am working with. <div class="row"> <div class="col-md-12"> <div> this section always remains at the bottom </div> </div> <div class="col-md-12"> <div> only v ...

javascripthtmlcsstwitter-bootstrap

Retrieving a boolean value (from a JSON file) to display as a checkbox using a script

Currently, I am utilizing a script to fetch data from a Google Sheet $.getJSON("https://spreadsheets.google.com/feeds/list/1nPL4wFITrwgz2_alxLnO9VBhJQ7QHuif9nFXurgdSUk/1/public/values?alt=json", function(data) { var sheetData = data.feed.entry; va ...

javascriptjqueryhtml

Change button to an ajax spinner when it is clicked using jQuery

$(".post-btn").html("<img src='../images/loader.gif' />"); Why isn't this code working? I know I have the correct selector because when I tried $(".post-btn").text('test'), it worked. I want the text of the button to change ...

javascriptjquerycssajax

Adding ngrx action class to reducer registration

Looking to transition my ngrx actions from createAction to a class-based approach, but encountering an error in the declaration of the action within the associated reducer: export enum ActionTypes { LOAD_PRODUCTS_FROM_API = '[Products] Load Products ...

javascriptangulartypescriptngrxngrx-store