Having trouble with the accordion close animation. It smoothly opens with animation but doesn't close as smoothly, without animation

As someone who is new to javascript, I have a query that may seem basic.

I've successfully implemented an open animation, but unfortunately, the close animation isn't functioning as expected. Even after trying to reverse the animation, it doesn't seem to work.
I must be overlooking something here. Is there a more effective approach to accomplish this?
I've been grappling with this issue all day long.

HTML

<div class="divTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">
        <button type="button" id="id" onclick="btnDetails_Click('id')">
          <p id="id-ButtonText">Details &#9660;</p>
        </button>
      </div>
      <div class="divTableCell">
        <p>Name</p>
      </div>
      <div class="divTableCell">
        <p>Details</p>
      </div>
    </div>
    <div class="divTableFoot" style="display:none" id="id-DetailsPanel">
      <div class="divTableCell" style="display:flex; height:0; overflow:hidden" id="id-DetailsPanel2">
        <div style="margin-right:20px">
          <img style="height:400px" src="http://via.placeholder.com/200x400" />
        </div>
        <div style="width:auto">
          <p>Description</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

/* DivTable.com */
.divTable {
  display: table;
  width: 100%;
}

.divTableRow {
  display: table-row;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}

.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}

.divTableFoot {
  width:100%;
}

.divTableBody {
  display: table-row-group;
}

JavaScript

function btnDetails_Click(id) {
  document.getElementById("id-DetailsPanel").style = "display:inherit";
  document.getElementById("id").setAttribute("onclick", "btnDismiss_Click('id')");
  document.getElementById("id-ButtonText").innerHTML = "Details &#9650;";
  expand(id)
}

function btnDismiss_Click(id) {
  contract(id)
  document.getElementById("id-ButtonText").innerHTML = "Details &#9660;";
  document.getElementById("id").setAttribute("onclick", "btnDetails_Click('id')");
  document.getElementById("id-DetailsPanel").style = "display:none";
}

function expand(id) {
  var detailsBox = document.getElementById("id-DetailsPanel2");
  var boxHeight = 0;

  var int = setInterval(animate, 8);

  function animate() {
    if (boxHeight == 425) {
      clearInterval(int);
    } else {
      boxHeight = boxHeight + 25;
      detailsBox.style.height = boxHeight + 'px';
    }
  }
}

function contract(id) {
  var detailsBox = document.getElementById("id-DetailsPanel2");
  var boxHeight = 425;

  var int = setInterval(animate, 8);

  function animate() {
    if (boxHeight == 0) {
      clearInterval(int);
    } else {
      boxHeight = boxHeight - 25;
      detailsBox.style.height = boxHeight + 'px';
    }
  }
}

For further reference, please see the JSFiddle link provided: https://jsfiddle.net/1zryo2Lp/

javascripthtmlcssanimation

Answer №1

Because the setInterval function was interrupted by the execution of 

document.getElementById("id-DetailsPanel").style = "display:none";
. To resolve this issue, simply move the line with display:none after clearInterval(int);

function btnDetails_Click(id) {
  document.getElementById("id-DetailsPanel").style = "display:inherit";
  document.getElementById("id").setAttribute("onclick", "btnDismiss_Click('id')");
  document.getElementById("id-ButtonText").innerHTML = "Details &#9650;";
  expand(id)
}

function btnDismiss_Click(id) {
  contract(id)
  document.getElementById("id-ButtonText").innerHTML = "Details &#9660;";
  document.getElementById("id").setAttribute("onclick", "btnDetails_Click('id')");
  // document.getElementById("id-DetailsPanel").style = "display:none";
}

function expand(id) {
  var detailsBox = document.getElementById("id-DetailsPanel2");
  var boxHeight = 0;

  var int = setInterval(animate, 8);

  function animate() {
    if (boxHeight == 425) {
      clearInterval(int);
    } else {
      boxHeight = boxHeight + 25;
      detailsBox.style.height = boxHeight + 'px';
    }
  }
}

function contract(id) {
  var detailsBox = document.getElementById("id-DetailsPanel2");
  var boxHeight = 425;

  var int = setInterval(animate, 8);

  function animate() {
    if (boxHeight == 0) {
      clearInterval(int);
      document.getElementById("id-DetailsPanel").style = "display:none";
    } else {
      boxHeight = boxHeight - 25;
      detailsBox.style.height = boxHeight + 'px';
    }
  }
}
.divTable {
  display: table;
  width: 100%;
}

.divTableRow {
  display: table-row;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}

.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}

.divTableFoot {
  width:100%;
}

.divTableBody {
  display: table-row-group;
}
<div class="divTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">
        <button type="button" id="id" onclick="btnDetails_Click('id')">
          <p id="id-ButtonText">Details &#9660;</p>
        </button>
      </div>
      <div class="divTableCell">
        <p>Name</p>
      </div>
      <div class="divTableCell">
        <p>Details</p>
      </div>
    </div>
    <div class="divTableFoot" style="display:none" id="id-DetailsPanel">
      <div class="divTableCell" style="display:flex; height:0; overflow:hidden" id="id-DetailsPanel2">
        <div style="margin-right:20px">
          <img style="height:400px" src="http://via.placeholder.com/200x400" />
        </div>
        <div style="width:auto">
          <p>Description</p>
        </div>
      </div>
    </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

Is it feasible to customize the appearance of native scrollbars in GWT without the need for custom scrollbar definitions or the use of ScrollPanel or CustomScrollPanel?

After encountering an issue with a page jumping due to the appearance of a vertical scroll bar, I have decided to always display the scroll bar by applying html { overflow-y: scroll !important; }, instead of using a script to monitor and adjust window/docu ...

javajavascriptjquerycssgwt

The delete function does not appear to be functioning properly for JavaScript objects within a Node.js

I'm currently working with an event object retrieved from MongoDB using Mongoose plug-in. After performing some operations on this object, I need to save it in another collection with the same structure. In order to do this, I have to remove all prop ...

javascriptnode.jsmongodbmongoose

What is the method for providing external parameters to a JOI extension?

Perhaps JOI may not be the ideal tool for this particular task, but I am interested in utilizing it if feasible. Essentially, I have a scenario where a user is sending a request to an API to store specific metric data. Certain metrics are restricted based ...

javascriptnode.jsjoi

Tips for saving JavaScript results to a form

Hey there! I'm looking to figure out how to save a JavaScript calculation within a form instead of just displaying an alert or outputting it on another page. Below is the JavaScript code I have for calculating prices. <script type="text/javascript ...

javascripthtmlforms

There are various buttons available for users to choose from on a page. How can I retrieve this selection data in JSON format?

I am designing a quiz with HTML buttons as options. How can I capture the user-selected button data before they click 'next' and format it into JSON? As there are multiple pages of questions, the data needs to be dynamically added to the JSON unt ...

javascripthtmljsonalpine.js

"Encountered a problem while setting up the Mailgun webhook to handle both multipart and URL encoded

I have been working on creating a web hook listener for Mailgun, and I encountered an issue when I realized that Mailgun can post webhooks using either multipart or x-www-form-urlencoded content-types. Currently, my code uses Multer to handle multipart b ...

javascriptexpress

moving a simulated element to a new location

Looking for some help with my html/CSS code that creates a unique element at the bottom of a div with an image background. The shape I've created is positioned at the bottom of the div... Below is the HTML: <div style="background-image:url(&apos ...

javascriptjqueryhtmlcss

What is the best way to transfer values from an AJAX script to the rest of the Javascript code?

Currently, I am diving into the world of a django 2.0 template along with a third-party jQuery script used for tagging photos and my own JavaScript code that acts as the "glue." Despite being new to JavaScript and JQuery, I managed to make a successful aja ...

javascriptjqueryajaxdjango

`I am experiencing issues with the HTTP Post functionality`

Whenever I click on the button displayed in the index.html code, an error occurs when the "$http.post" call is made. The web page then displays an alert saying 'Error!', preventing me from saving the new JSON file due to this issue. I need help ...

javascriptjqueryangularjs

Can you identify the variances in the React codes provided? Is one more optimized or impactful than the other, or do they essentially perform the same function?

Currently working on a project where I have two different sets of code and I'm curious about the differences between them. Using ReactJS (latest version) Set 1: columns.map(v => v.aggregate = (values) => values[0]); Set 2: columns = columns ...

javascriptarraysreactjsobjectecmascript-6

How are resolve and reject utilized within JavaScript Promises?

Initially, I believed that resolve simply passes the parameter to the function in then, so I conducted this experiment: const promise = new Promise((resolve, reject) => { resolve(new Promise(resolve => resolve(2333))) }) // promise.then(innerPromi ...

javascriptnode.jsasynchronouspromise

Exploring the (*ngFor) Directive to Iterate Through an [object Object]

Attempting to iterate through the array using *ngFor as shown below. let geographicalArea = [{ "_id": "5e77f43e48348935b4571fa7", "name": "Latin America", "employee": { "_id": "5e77c50c4476e734d8b30dc6", "name": "Thomas", ...

javascriptarraysjsonangular

Ways to eliminate line breaks in CSS

I'm currently working on a project and I'm facing an issue with text auto-entering without using any breaks. I'm not sure what the exact problem is. I implemented a code snippet from Overstack to display a div on hover. Perhaps the positioni ...

c#htmlcssasp.net

The positioning and floating of two divs are set to fixed without using percentage width, however, the functionality is not

Apologies for my poor English writing :) I am attempting to float two divs side by side in a fixed position, without using percentages. This code works well on most browsers but is not compatible with IE 6. HTML <div class="right"></div> < ...

cssinternet-explorer-6

What is the best way to ensure that a task is performed only once the DOM has finished loading following an AJAX request

<div id="mydiv"> ... <a id="my-ajax-link"> ... </a> ... ... <select id="my-selectmenu"> ... </select> ... </div> Upon clicking the 'my-ajax-link' link, it triggers an AJ ...

javascriptjqueryajax

Variety of color palettes within a single style sheet

My theme features various styles, including different color schemes. Currently, I load the default CSS first and then an additional stylesheet with specific colors based on the chosen color scheme. However, this process is causing a delay in my site' ...

css

The logo on my header is being covered by the menu due to the CSS code

Check out my website at bee-barcelona.herokuapp.com I'm facing an issue where the menu overlaps with the logo when I resize the browser or view the webpage on a tablet. I want to fix this using CSS. What changes do I need to make to ensure that the e ...

htmlcss

Creating a grid pattern of boxes within a rectangle using CSS

I'm attempting to design a rectangle filled with colorful boxes Here is the code I'm using: <div class="col-md-3" > <div id="myViewport" style="height: 700px; width: 50px; padding: 10px; border: 5px solid gray; margin: 0;"> ...

htmlcss

Issues encountered when trying to implement helperText in mui date picker

Can someone assist with this issue? The helper text is not displaying as expected in the following code snippet: <div className={classes.container}> <LocalizationProvider dateAdapter={AdapterDateFns}> <Des ...

javascriptreactjsmaterial-uifrontend

As you hover over the chosen image, the selected image will appear

I have a simple HTML code with some JavaScript where I display sets of images. All I want is for the images to pop up when hovered over, appearing in a larger size. Below is the example HTML Code: <div class="content-box-left-bootomgrid lastgrid"> ...

jqueryhtmlimage