Updating parent component's scrollHeight of DOM element based on child component in Next.js

I recently encountered an issue with nested accordions. In my project, I have implemented accordions within other accordions, but ran into a problem when the inner accordion expanded and affected the size of the parent accordion. Here's what's happening:

In the first component, /components/loved_one.js, which is rendered by /pages/profile.js, I use a toggleAccordion function that sets the scrollheight of the inner accordion container based on its content. This works well because initially none of the elements within are expanded, allowing for accurate height calculation.

However, in another component, /components/event.js, the same mechanism is applied for the inner accordion. When it expands, it causes the parent accordion above to become too small, resulting in layout issues.

The solution was to collapse and expand the parent accordion to trigger a re-adjustment of its height based on the expanded inner elements. However, I'm looking for a more automatic way to handle this without manual intervention.

If anyone has any suggestions or solutions on how I can sync the heights of both the inner and parent accordions dynamically, I would greatly appreciate it.

Below is the code snippets related to these components:

/pages/profile.js

Your profile page code snippet...

/components/loved_one.js

Your loved_one component code snippet...

/components/events.js

Your events component code snippet...
javascriptdomnext.js

Answer №1

Discovered the solution. The key was to adjust the height to auto instead of using maxHeight

.item-content {
          overflow: hidden;
          height: 0px;
          transition: max-height 0.2s ease-out;
        }

function toggleAccordion() {
    setActiveState(setActive === "" ? "active" : "");
    setHeightState(setActive === "active" ? "0px" : `auto`);
    setIconState(setActive === "active" ? "fas fa-plus" : "fas fa-minus");
  }

  return (
    <>
      <div className="item-container teal lighten-5">
        <div className="row item teal darken-1">
          <div className="col m1">
            <button className={`expand ${setActive}`} onClick={toggleAccordion}>
              <i className={`${setIcon} white-text small`}></i>
            </button>
          </div>
          <div className="col m4 item-title">
            <span className="teal-text text-darken-4">Loved One: </span>
            {props.firstname} {props.surname}
          </div>
          <div className="col m5 item-title">
            <span className="teal-text text-darken-4">Email: </span>
            {props.email}
          </div>
          <div className="col m1 offset-m1">
            <button className="btn-floating btn-small waves-effect waves-light">
              <i className="fas fa-trash-alt white-text small"></i>
            </button>
          </div>
        </div>
        <div
          className="item-content"
          ref={content}
          style={{ height: `${setHeight}` }}
        >

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

Is it possible to conduct brain.js training sessions multiple times?

Is there a way to specifically train my neural network with new information without having to retrain the entire model, considering the potential performance costs associated with it? The neural network was created using brain.js. ...

javascriptnode.jsbrain.js

What are some solutions for troubleshooting a rapid-moving Selenium web driver?

My code is not functioning correctly and I need a better solution. The fast speed of execution makes it difficult for me to detect where the issue lies. Below is my current code: public static void main(String[] args) { //**************************** ...

javascriptseleniumselenium-webdriver

Issue with Vue.js devtool not appearing in browser

Currently, I am integrating moment.js into a Vue component but I am facing an issue where certain changes are not being reflected in vue devtools. Here is an example of my code: export default { data() { return { moment: moment(), ...

javascriptvuejs2vue-componentvue.js

Reducing the amount of code within an if statement by utilizing JavaScript

I just finished coding a solution: if(!fs.existSync(path.join(data,file,path)){ fs.mkdirSync(path.join(data,file,path)); } if(!fs.existSync(path.join(another,file)){ fs.mkdirSync(path.join(another,file)); } if(!fs.existSync(path.join(new,file,temp,pa ...

javascriptnode.js

Discover the method to activate the back button feature on ajax pages

I am currently working on a website that is navigated in the following way: $(document).ready(function () { if (!$('#ajax').length) { // Checking if index.html has been loaded. If not, navigate to index.html and load the hash part with ajax. ...

javascriptjqueryajaxbrowser-historyhtml5-history

Is there a way to trigger a JavaScript function once AJAX finishes loading content?

I've been utilizing some code for implementing infinite scrolling on a Tumblr blog through AJAX, and it's been performing well except for the loading of specific Flash content. The script for the infinite scroll can be found here. To address the ...

javascriptjqueryajaxflashtumblr

Exploring the capabilities of the innovative Node's EventTarget class alongside ES6 modules

Exploring the new DOM-compatible EventTarget class introduced in Node.js 14.7.0 has caught my interest. I've noticed that I can only utilize it within a CommonJS module, and not an ES6 module. Here's an example: Executing node --expose-internal ...

javascriptnode.js

Combine going to an anchor, performing an AJAX request, and opening a jQuery-UI accordion tab all within a

My goal is to have the user click on the hyperlink below, which will (1) anchor to #suggestions, (2) navigate to the url suggestions.php?appid=70&commentid=25961, and (3) open the jquery-ui accordion #suggestions. However, I am facing an issue where c ...

javascriptphpjqueryhtmlajax

Creating an Ajax request in Angular using ES6 and Babel JS

I have been exploring a framework called angular-webpack-seed, which includes webpack and ES2016. I am trying to make a simple AJAX call using Angular in the traditional way, but for some reason, it is not working. export default class HomeController { ...

javascriptjqueryangularjsajaxwebpack

When scrolling the page, the Circle Mouse Follow feature will dynamically move with your cursor

Hey everyone! I'm currently working on implementing a mouse follow effect, but I'm facing an issue where the circle I've created moves along with the page when scrolling, instead of staying fixed to the mouse. Any suggestions or tips would b ...

javascriptjqueryhtmlcss

Translate a jQuery ajax request utilizing jQuery().serialize into plain JavaScript

Currently, I've been in the process of converting a jQuery script into vanilla JavaScript to completely eliminate the need for jQuery. The main functionality of the code includes: Upon clicking a button on the front end, an ajax request is sent, upda ...

javascriptjqueryajax

``I am experiencing issues with the Ajax Loader Gif not functioning properly in both IE

I am brand new to using ajax and attempting to display a loading gif while my page loads. Interestingly, it works perfectly in Firefox, but I cannot get it to show up in Chrome or IE. I have a feeling that I am missing something simple. The code I am using ...

javascriptjqueryhtmlcssajax

Implementing validation for multiple email addresses in JavaScript: A step-by-step guide

Currently, I am utilizing Javascript to perform validation on my webpage. Specifically, I have successfully implemented email validation according to standard email format rules. However, I am now seeking assistance in enhancing the validation to allow for ...

javascripthtmlvalidationemail

Implementing the loading of a Struts 2 action with jquery in javascript

Looking to refresh a specific div using JavaScript with jQuery to target the div and a Struts action that loads the content. Can anyone offer advice on how to achieve this? The challenge lies in utilizing JavaScript and jQuery for this task. Best regards ...

javascriptjquerystruts2

How can we set up Node JS to automatically trigger events when a specific future date and time from the database is reached?

I have taken on the challenge of providing users with a feature where they can select a date and time in the near future while placing an order. This chosen time and date will be saved in the database. How can I set up a function to automatically execute ...

javascriptnode.jsreactjsmongodbtriggers

Next.js pages do not respond to event listeners

Something strange is happening in my Next.js project. I've implemented a header that changes color as the page scrolls using the useEffect hook: The hook in the Header component looks like this: React.useEffect(() => { window.addEventListener(&a ...

javascriptreactjsnext.js

Sending MVC3 model information as JSON to a JavaScript block

My challenge is to correctly pass my MVC3 model into a script block on the client side. This is the approach I'm taking in my Razor view: <script type="text/javascript"> var items = @( Json.Encode(Model) ); </script> The "Model" in t ...

javascriptasp.net-mvcjsonasp.net-mvc-3

What is the proper way to place a newly added element using absolute positioning?

Currently, I am in the process of developing a tooltip feature. This function involves adding a div with tooltip text inside it to the element that is clicked. However, I am facing a challenge in positioning this element above the clicked element every tim ...

javascripthtmlcss

Unable to locate the specified view within AngularJS framework

<!doctype html> <html lang="en" ng-app="phonecatApp"> <head> <script src="/js/angular-1.5.2/angular.js"></script> <script src="/js/angular-1.5.2/angular-route.js"></script> <script src="/js/app.js">< ...

javascriptangularjsnode.js

Utilizing Angular: Filtering Views Based on JSON Data Values

I am struggling to figure out why a basic Angular filter is not working for me in this example. Despite following the recommended format I found online, it does not seem to be functioning properly. Essentially, I just need to display information from the a ...

javascriptangularjsjsonfilter