What is the best way to reposition an element to the end of its flexbox container?

I have a flexbox-container that contains multiple details-elements with flex-wrap behavior. My goal is to have a details-element move below the other elements within the container when it is opened.

For example, I want it to go from this initial layout:

to this rearranged layout:

Any subsequent open details should also jump to the last position in the container.

So far, I've attempted to change the order of the clicked details-element using JavaScript/jQuery:

$('details').click(function (event) {
   this.style.order = "2";
   $('details').not(this).style.order = "1";
});
.container {
    display: flex;
    flex-wrap: wrap;
}

details {
    order: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <details>
        <summary>
            First Details
        </summary>
        <p>Some details</p>
    </details>
    
    <details>
        <summary>
            Second Details
        </summary>
        <p>Some details</p>
    </details>
    
    <details>
        <summary>
            Third Details
        </summary>
        <p>Some details</p>
    </details>
    
    <details>
        <summary>
            Fourth Details
        </summary>
        <p>Some details</p>
    </details>
    
    <details>
        <summary>
            Fifth Details
        </summary>
        <p>Some details</p>
    </details>
</div>

Should I assign a class to the details-elements and target them differently? Or is there another method to achieve my desired effect?

javascripthtmlcssflexboxhtml-tag-details

Answer №1

I made some modifications that should give you the desired outcome. I included borders for clarity. Take a look at the code below.

The key is to assign all <details> elements to the same order group, in this case, 0. Then, change the clicked <details> element to have an order value of 1 (which just needs to be higher than the group number assigned to all <details>).

Another slightly tricky aspect is that to remove the 'open' attribute from an open <details> element, you'll need to use removeAttr() (jQuery) or .removeAttribute (vanilla JS).

For more detailed information, check out this resource on MDN.

$('details').click(function(event) {
  $('details').css({order: 0, width: "auto"}).removeAttr("open");
  $(this).css({order: 1, width: "100%"});
});
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 1px solid blue;
}

details {
  border: 1px solid red;
  padding: 1rem;
  order: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

  <details>
    <summary>
      first details
    </summary>
    <p>some details</p>
  </details>

  <details>
    <summary>
      second details
    </summary>
    <p>some details</p>
  </details>

  <details>
    <summary>
      third details
    </summary>
    <p>some details</p>
  </details>

  <details>
    <summary>
      fourth details
    </summary>
    <p>some details</p>
  </details>

  <details>
    <summary>
      fifth details
    </summary>
    <p>some details</p>
  </details>

</div>

Answer №2

To ensure that this applies to all subsequent details that are opened, you can assign a class to .container

$('details').click(function (event) {
   $('.container').addClass('details-below');
});

.container {
  display:flex;
  flex-wrap: wrap;
}

.container.details-below details {
  order: 2;
}

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

The Photoswipe default user interface cannot be located

While attempting to incorporate PhotoSwipe into my website, I encountered an uncaught reference error related to The PhotoswipeUI_Default is not defined at the openPhotoSwipe function Below is the code snippet that I have been working on: <!doctyp ...

javascriptphphtmlcssphotoswipe

Utilizing Kendo Grid for client-side data paging

I am looking to utilize an MVC helper for constructing a grid on the server side, with the ability to dynamically add and remove rows on the client side. To achieve this functionality, I have implemented the following wrapper: @(Html.Kendo().Grid<SIGE ...

javascriptkendo-uikendo-gridkendo-asp.net-mvckendo-datasource

Why does Node.js prompt an error when using document.querySelector? Is there an alternative method to document when utilizing express in my project?

An issue arose when attempting to select the form element using const weatherForm = document.querySelector('form') ^ Unfortunately, a ReferenceError was encountered: document is not defined at Object. (/Users/sheebadola/development/quadacademy/w ...

htmlnode.jsformsexpress

What could be the reason for the sudden lack of content from the Blogger API?

For weeks, I've been using the Google API to retrieve JSON data from my Blogger account and showcase and style blog posts on my personal website. Everything was functioning flawlessly until yesterday when, out of the blue, the content section stopped ...

javascriptjsongoogle-apiblogger

The Material UI autocomplete unexpectedly closes on click instead of displaying a popover as intended

I'm facing a challenge with adding a button to the Material UI autocomplete using the renderOption prop. I added a button to each row that was intended to display a PopOver component, but when clicking on the button, it automatically closes the autoco ...

javascriptreactjsmaterial-uiautocompleteblur

When incorporating a JS React component in TypeScript, an error may occur stating that the JSX element type 'MyComponent' is not a valid constructor function for JSX elements

Currently, I am dealing with a JavaScript legacy project that utilizes the React framework. Within this project, there are React components defined which I wish to reuse in a completely different TypeScript React project. The JavaScript React component is ...

javascriptnode.jsreactjstypescriptsingle-page-application

When adjusting styles using Chrome DevTools with Webpack HMR, the page layout can become distorted

Encountering a peculiar issue: Currently utilizing Webpack in conjunction with Vue-CLI and HMR. On attempting to modify styles via DevTools in the browser, the page itself undergoes unexpected changes - some styles are removed (screenshots provided below) ...

csswebpackvue.jsgoogle-chrome-devtoolswebpack-hmr

Tips for creating a script to calculate the population count of a 16-bit integer with either php or javascript

Looking to write a function that calculates the population count of a 16-bit integer in either php or javascript? Population count refers to the number of "turned on" bits, essentially counting the number of ones in the binary representation. For example, ...

phpjavascriptajax

Learn how to incorporate additional rows into a table by pressing the plus button within the table with the help of Angular

I require some assistance. I am looking to dynamically generate a row after clicking on the plus button using angular.js. The newly created row should contain an ID and model generated dynamically. Here is an overview of my code: <table class="table ta ...

javascriptangularjs

Exploring Best Practices for Coding in node.js

Method 1: Constructor and Prototype Objects function Database(url) { this.url = url; } Database.prototype.info = function (callback) { http.get(this.url + '/info', callback); }; Method 2: Closures Approach function Database(url) { ...

javascriptperformancenode.jssyntaxcoding-style

What methods can be used to initiate form error handling in React/Javascript?

I am currently utilizing Material-UI Google Autocomplete, which can be found at https://material-ui.com/components/autocomplete/#google-maps-place, in order to prompt users to provide their address. https://i.stack.imgur.com/nsBpE.png My primary inquiry ...

javascriptreactjsreduxmaterial-ui

Modify/Adjust/Move the image uploaded by the user in VueJS before transferring it to an aws s3 bucket

Can you resize images in vuejs using vanilla js? I've managed to upload an image and send it to my s3 bucket using vue, but I'm struggling to figure out how to transform an image within vuejs and display it. Document.querySelector doesn't se ...

javascripthtmlcssvue.js

Disable multiple buttons at once by clicking on them

What is the best way to disable all buttons in a menu when one of them is clicked? Here is my code: <div class="header-menu"> <button type="button"> <i class="fa fa-search" matTooltip="Filter"& ...

javascripthtmlangulartypescript

Is there a way to verify the phone number input field on my registration form along with the country code using geolocation

I'm currently working on a registration form that includes an input field for telephone number. I'd like to implement a feature where, upon filling out the form, the telephone input field automatically displays the country code by default. Would ...

javascriptphphtmljquery

Removing an item from JSON data using Node.js and Express

Currently, I am attempting to remove an entry from json data. In order to view the data, I utilize the following: app.route('/data/:id') .get((req:Request, res: Response) => { let id = req.params.id; res.status(200).send(projects ...

javascriptnode.jsexpress

I'm baffled as to why this code isn't functioning properly

My current script seems to be malfunctioning for some reason. I'm using a combination of express, socket.io, jade, and node.js in this setup. Below is the script I am working with: var socket = io.connect(); function addMessage(msg) { var currentDa ...

javascriptnode.jsexpresssocket.iopug

What is the preferred convention for defining AngularJS directives as "attributes" versus "elements"?

When creating Angular directives, I've noticed that some directives could also be defined as either an HTML element or an attribute. I'm curious to know what the community convention is for choosing between the two, and the reasons behind it. Fo ...

javascripthtmlangularjs

Calculate sums in ReactJS without the need for a button

Adding a few numbers might seem like an easy task, but I've been unable to do so without using an explicit button. // Using useState to handle state changes const [ totalCount, setTotalCount ] = useState(0) // Function to add numbers of differ ...

javascriptreactjsfunctionnext.jsaddition

JavaScript issues in FireFox and Internet Explorer when using JQuery

I have developed a PHP GD image for generating captcha images, saved as image.php. Each time it creates a unique captcha image. Inside the signup.php file: <img alt="" src="image.php"> <input type="button" id="btn" value="cannot read captcha"&g ...

phpjavascriptjqueryajax

Eliminate any height changes in the ul element during a CSS transition

Here is the code I've been using to style my side navigation, which has been working perfectly without any transitions. SCSS Code and a functional JSFiddle .side-nav{ position: fixed; z-index: 100; right: 0; margin-top: 15vh; ul { lis ...

htmlcsssass