I am currently working on a page that displays orders dynamically generated by Flask when a customer places an order.
https://i.sstatic.net/W8f1s.png
When clicking to expand an order, everything works smoothly if the order is on the left side. However, strange behavior occurs when expanding an order located on the right side. https://i.sstatic.net/C9Saz.png
I'm trying to figure out why this happens and if there is a solution to resolve it. Here is the code snippet:
<!-- An Order -->
<div class="an-order">
<img src="./delivery-truck.png">
<div>
<h5 class="">#232451</h5>
</div>
<h6>total: $000.00</h6>
<div class="order-footer">
<span>expand me</span>
<span>!</span>
<hr class="line">
<!-- Additional Information -->
<div class="additional-info">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua...
(long lorem text)
</div><!-- /.Additional Information -->
</div>
</div><!-- /.An Order -->
<script src="./jquery-3.3.1.min.js"></script>
<script>
$( document ).ready(function() {
// All orders' additional information must be toggled at first
$(".additional-info").slideToggle(0);
// Each order's additional information will show on click based on its
// $this value!
$(".an-order").on("click", function () {
var additionalInfo = $(this)["0"].children[3].childNodes[9]
$(additionalInfo).slideToggle(1000);
});
});
</script>
Here is the CSS styling used:
.an-order {
padding:10px;
margin:10px;
width: 286px;
float: left;
background:#f1f1f1;
color:#666;
border: 2px solid black;
}
.order-footer {
padding: 0.75rem .75rem;
display: inline-block;
width: 90%;
background-color: rgba(0, 0, 0, 0.05);
border-top: 1px solid rgba(0, 0, 0, 0.125);
}