Insert a new div directly underneath the specific div that was clicked within a series of divs

https://i.sstatic.net/gSj3D.png

I am facing a situation where I have a list and need to render a box below a specific row when it is clicked. The challenge is to ensure that the other rows are shifted down accordingly. Is there any plugin that can help with this functionality?

Here is the render method of the InvestmentList component:

render() {
return (
  <div>
    <ul className="panel-list list-inline">
      {this.state.list.length > 0 ?
        this.state.list.map((item,index)=>{
            return (
              <li key={index}>
                <div className="layout layout-1 fade-transition clearfix">
                  <div className="layout-header">
                    <div className="layout-img-ls">
                        <img src='https://s3.ap-south-1.amazonaws.com/waccal/static+icons/layout_50.png' />
                    </div>
                    <div className="layout-img-text pull-right">
                      <p >asas</p>
                    </div>
                  </div>
                  <div className="layout-content">
                      <h5>asasas</h5>
                      <a href="#">@adsd</a>
                  </div>
                  <div className="layout-footer">
                    <div className="dropdown">
                        <div className="wbtn-connected fade-transition"></div>
                        <i className="material-icons md-18 pull-right dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">more_vert</i>
                        <ul className="dropdown-menu wcl-sub-dropdown" aria-labelledby="dropdownMenu1">
                          <li><a href="#">Sold</a></li>
                          <li><a href="#">Remove</a></li>
                        </ul>
                    </div>
                  </div>
                </div>
                <div className=''>
                </div>
              </li>
            )
          })
      : <div> No Search Results. <img src="img/noresult.emoji.png" className="emoji-img"/></div>}
    </ul>

  </div>
);  

This is the parent div

        <h5 className="wcl-main-heading">INVESTMENTS</h5>
        <div className="wcl-panel">
          <div className="wcl-panel-head">
            <span className="text-left heading-wcpanel">CURRENT</span>
             <button className="wcl-icon wcl-icon-gray popup-btn pull-right wcl-tooltip" data-toggle="modal" data-target="#add_investor"  data-placement="bottom" title="ADD" onClick={()=>{
                this.setState({
                  showAddInvestor:true
                })
             }}>
                <i className="material-icons md-18" >add_circle_outline</i>
            </button>
          </div>
          <InvestmentList list = {this.props.investors} setInvestor={this.setInvestor} showInvestor={this.showInvestor}/>
          <AddInvestor markSold = {false} showAddInvestor={this.state.showAddInvestor} closeModal={this.closeModal}/>
      </div>

      {this.state.showInvestor?
        <InvestmentInDetail showInvestor={this.showInvestor} investor={this.state.investor}/>
      :null}
    </div>

InvestmentList is the component which gets rendered after all the rows

https://i.sstatic.net/5AlnQ.png

Answer №1

For those familiar with jQuery, implementing this solution is straightforward. Here are some inline comments to explain the code:

JavaScript

/* Populating ul with li */
for(var i = 0; i < 30; i++)
{
    $('ul').append('<li>' + (i+1) + '</li>');
}
/* Calculating the number of li that fit on a single line */
var numLiInRows = $('ul').width() / $('ul').find('li').outerWidth(true);

/* Using 'on' as the li were dynamically added after the DOM was loaded */
$('ul').on('click','li', function(){
    $('ul').find('.info').remove(); // Removing previous info boxes
    var newElementToInsert = '<div class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>'; // Defining the info box content
  var liIndex = $('ul').find('li').index($(this));
  var numLi = $('ul').find('li').length;
  var row = Math.ceil((liIndex+1)/numLiInRows);

  if(row*numLiInRows >= numLi){
    $('ul').find('li').eq(numLi-1).after(newElementToInsert);
  } else {             
    $('ul').find('li').eq(row*numLiInRows-1).after(newElementToInsert);
   }
});

CSS

ul{
  width: 480px;
  list-style: none;
}
li{
  float: left;
  width: 40px;
  height: 70px;
  border: 1px solid black;
  box-sizing: border-box;
  margin: 10px;
  cursor: pointer;
  font-size: 36px;
  line-height: 70px;
  text-align: center;
}
.info{
  float: left;
  clear: both;
  width: 100%;
  margin: 10px 0;
  border: 1px solid red;
  box-sizing: border-box;
  height: 100px;
  padding: 5px;
}

Check out the JsFiddle

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

Div containing a centered span with a background

<div> <span style= "background: red; text-align: center;"> There seems to be an issue here </span> </div> The text alignment is not functioning as expected. I need the text to be centered along with the background. https://jsfiddl ...

Implementing the insertion of a <div> element within an input field using jQuery

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></scr ...

Dropdown in Bootstrap partially obscured by content on page

I have made some adjustments to my Bootstrap dropdown menu: The dropdown now appears when hovering, rather than clicking The li that triggers the dropdown is still clickable Although the dropdown is functioning correctly, there is an issue where it disa ...

Getting the Value from a Promise into a Variable in a React Component

I am currently immersed in a React project where I am utilizing the Axios library to retrieve data from an API and store it in a variable. After scouring the internet, it seems that the only method available is through Promise.then(), but this approach si ...

Guide on making a persistent sidebar using CSS and JavaScript

I'm in the process of developing a website that features a main content area and a sidebar, similar to what you see on Stack Overflow. The challenge I am facing is figuring out how to make the sidebar remain visible as a user scrolls down the page. T ...

Generating image alt tags based on the page title in real-time using PHP

Is there a way to automatically generate image alt text using the current page title in PHP? I am working on a website called and there are too many images to manually fill in alt text for each one. Thank you, Ricky ...

Challenges regarding placement and z-index are causing issues

Currently, I am attempting to make the menu overlap the content on my webpage. However, I am facing an issue where it moves the content box instead of overlapping it. I have already experimented with the position: relative concept, but unfortunately, the ...

Save picture in localStorage

Hello, I am currently working on a page where I need to retrieve an image from a JSON file and store it locally. Below is the code I have been using: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min. ...

Components in array not displaying in React

I've been struggling to generate a table from an array in React. Typically, I retrieve data from a database, but for testing purposes, I manually created the array to ensure the data is correct. Despite following examples by enclosing my map code with ...

I could use some help understanding how to identify the parent file so I can elevate a state

I'm facing a challenge in lifting up a state so that I can utilize it across various pages. The confusion lies in determining where to reference the states, given the uncertainty regarding the parent location. Since this is my first attempt at designi ...

Enhancing the appearance of text by applying a background color solely to its length

After conducting thorough research on the issue, I have come across various solutions that could potentially address it. However, despite my best efforts, I am unable to implement these solutions successfully. The problem at hand involves providing a colo ...

How to make a div in Javascript smoothly slide out when it appears

Looking to add some smooth sliding animation to this basic JS code instead of the glitchy appearance it currently has. I've experimented with different options but haven't had any success, any suggestions? Here's the code snippet along with ...

Content creator: Enhancing HTML search functionality using parameters

Hey there, I'm facing an issue. I created a template on my Blogger site and I need to search for text with a specific label using this URL: www.my_blog.blogspot.com/search?q=label:Printers+SearchText This is the code I have: <form action=&ap ...

Is it possible to apply a specific CSS color to a row in Angular 9 mat-tables without having to individually set it in multiple locations?

I am working on a mat-table in Angular 9 where I need to implement a function that determines the CSS class for each row... getRowClass(item: Item): string { let class_ = ""; if (...condition1...) { ... } else { class_ ...

Why Does React Material-UI Switch Styling Keep Changing Sporadically?

Currently, I am trying to integrate a switch component from MUI into my code. Strangely enough, upon the initial page load, the switch appears exactly as it should - identical to the one displayed on the MUI site. However, upon reloading the page, it under ...

Optimizing CSS for printing by eliminating unnecessary white space with media queries

Appreciate your assistance! I'm currently working on a solution to print a specific div using CSS Media queries. When the user clicks on print, I want to hide all other elements except for the body div they chose. However, I'm facing an issue whe ...

Encountering a client component error with the app router in Next.js version 13.4.9

Encountering an error in Nextjs that persists until the 'use client' directive is removed. Warning: Rendering <Context.Consumer.Consumer> is not supported and will be removed in a future major release. Did you mean to render <Context.Con ...

Changing Scroll-bar Colors in JavaFX TableView Using Java

I modified the style of my TableViews programmatically with the following code- tableView.setStyle("-fx-base : #333333; -fx-background-color : gray"); Now I am looking to change the color of the scroll bar using the same method. I prefer not to add a ...

Next.js app experiencing issues with Chakra UI not transitioning to dark mode

After attempting to incorporate Chakra UI into my Next.js application, I carefully followed every step outlined in their documentation: Despite setting the initialColorMode to "dark" for the ColorModeScript prop, it seems that the dark mode is not being a ...

Adding Information to a Material Design Card

Currently, I am delving into frontend development and honing my CSS skills. In my latest project, I have incorporated a mat card which can be viewed in the linked image https://i.sstatic.net/TEDcg.png. Below is an excerpt of my code: <div class=&quo ...