I am facing an issue on my web page where I have a series of div elements styled with display: table and their child div elements styled with display: table-cell. I am looking to use slideToggle() on a specific cell to change its content. However, I have come across information suggesting that slideToggle() might not work as expected with elements set to table-cell.
Firstly, I would like to confirm if it is true that slideToggle() does not fully support Table-Cell objects?
Secondly, before making drastic changes to my design to avoid the use of Table-Cells, I am curious if there is a workaround that I can implement to achieve the desired functionality?
The provided code snippet showcases the undesired behavior I am experiencing. Instead of a smooth sliding transition, the cell abruptly appears next to the previous cell that is meant to disappear, failing to slide up vertically as intended.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.container {
display: table;
}
.cell {
display: table-cell;
}
</style>
</head>
<body>
<button onclick="$('.cell').slideToggle('slow'); return false;" >Click Me</button>
<div class="container">
<div class="cell">Here is a test</div>
<div class="cell" style="display: none">Test2</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="common/js/jquery-2.1.4.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="common/bootstrap/js/bootstrap.min.js"></script>
<!-- Other Scripts -->
<script src="common/bootstrap-select/js/bootstrap-select.min.js"></script>
</body>
</html>
Here's the link to the code on a fiddle for reference: https://jsfiddle.net/gdbjohnson/8x8e1gyx/