Adding / Deleting a Row in a sequence of floated divs

Question

Adding / Deleting a Row in a sequence of floated divs

I have a group of div elements arranged side by side with the float:left style as shown below:

<div id="container">

   <div id=0" style="float:left">> Stuff </div>
   <div id=1" style="float:left">> Stuff </div>
   <div id=2" style="float:left">> Stuff </div>
   ...
   <div id=n" style="float:left">> Stuff </div>

</div>

My goal is to create an effect where clicking on one div will move neighboring divs (those to its left up and those to its right down) and expand to fill its own row. Clicking again would return it to its original position.

Here are my strategies:

Insert a separating line using jQuery before and after the clicked div
Toggle the clear: both CSS property for the selected div

Despite trying these methods, I haven't found them to be entirely reliable. If you have any suggestions for achieving this functionality, please share!

Thank you for your assistance!

javascript jquery html css dom

Answer 1

Answer №1

It seems like your goal is to achieve this outcome, so feel free to review this Fiddle for reference.

 Let's retrieve the parent element's width: var parentWidth = $("#container").css("width");
Next, we'll store the original width of the first child element within the container: var originalWidth = $($("#container div")[0]).css("width");
Finally, on click event for any child element, we will toggle its width based on comparison with the parent element's width:
$("#container div").click(function(){
   if($(this).css("width") !== parentWidth) {
     $(this).css("width", parentWidth);
   }
   else {
     $(this).css("width", originalWidth);
   }
 });

Answer 2

It seems like your goal is to achieve this outcome, so feel free to review this Fiddle for reference.

 Let's retrieve the parent element's width: var parentWidth = $("#container").css("width");
Next, we'll store the original width of the first child element within the container: var originalWidth = $($("#container div")[0]).css("width");
Finally, on click event for any child element, we will toggle its width based on comparison with the parent element's width:
$("#container div").click(function(){
   if($(this).css("width") !== parentWidth) {
     $(this).css("width", parentWidth);
   }
   else {
     $(this).css("width", originalWidth);
   }
 });

Answer 3

Answer №2

        let boxWidth = 250;
        let numBoxes = 5; //defines number of inner boxes
        $(function(){
            $('#container div').each(function(index, element) {
                $(this).click(function(e) {
                    if($(this).width() == boxWidth)
                    {
                        let newWidth = boxWidth;
                        if(index != 0)
                        {
                            $(this).prev().hide();
                            newWidth += boxWidth;
                        }
                        else if(index < numBoxes)
                        {
                            $(this).next().hide();
                            newWidth += boxWidth;
                        }
                        $(this).width(newWidth);
                    }
                    else
                    {
                        $(this).width(boxWidth);
                        if(index != 0)
                        {
                            $(this).prev().show();
                        }
                        else if(index < numBoxes)
                        {
                            $(this).next().show();
                        }
                    }
                });
            });
        });

Answer 4

        let boxWidth = 250;
        let numBoxes = 5; //defines number of inner boxes
        $(function(){
            $('#container div').each(function(index, element) {
                $(this).click(function(e) {
                    if($(this).width() == boxWidth)
                    {
                        let newWidth = boxWidth;
                        if(index != 0)
                        {
                            $(this).prev().hide();
                            newWidth += boxWidth;
                        }
                        else if(index < numBoxes)
                        {
                            $(this).next().hide();
                            newWidth += boxWidth;
                        }
                        $(this).width(newWidth);
                    }
                    else
                    {
                        $(this).width(boxWidth);
                        if(index != 0)
                        {
                            $(this).prev().show();
                        }
                        else if(index < numBoxes)
                        {
                            $(this).next().show();
                        }
                    }
                });
            });
        });

Adding / Deleting a Row in a sequence of floated divs

Answer №1

Answer №2

Similar questions

IE 11 does not support the use of absolute positioning with a height of 100%, however, this functionality works perfectly on Microsoft Edge

How can I add a black-colored name and a red-colored star to the Placeholder Star as a required field?

Create an Oval-Shaped Image Cutout

Div positioned absolutely beneath the footer

What causes the inversion of height and width settings in react-webcam?

Adjust hover effects based on true conditions

A guide on invoking a servlet using a jQuery $.ajax() call

How come I am getting the desired section from my split string only after running the function twice?

What is the best way to retrieve multiple image file names using JavaScript?

When the phone locks, Socket.io experiences a disconnection

React TextField is not accommodating the new line character ' ' causing recognition issues

Unable to dismiss message in Django

Having issues with the forEach and map functions not iterating through every item in an async-await function in Vue.js?

How to enlarge the size of specific letters in HTML

Execute the component function located within one page using another page

Is it possible to make a div jump or bounce if it has a flex display?

JavaScript queries in Selenium WebDriver

Tips for displaying Ajax spinner on a particular page

I am unable to incorporate the RobotJS module into my ElectronJS project

What could be causing the TypeError I encounter when trying to import @wordpress/element?