sample template

<table border="1" width="100%">
<thead>
<tr>
<th>Date</th>
<th>Milestone</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>20-Jul-25</td>
<td>Sandeza added Sentiment Analysis & Virtual Agent Features</td>
<td><button class="toggle-btn">Show Details</button>
<div class="details">
                    Sandeza introduces Sentiment Analysis and Virtual Agent features in its Amazon Connect Custom App. 
                    This enhances automated customer interactions with AI-driven insights and improves operational efficiency.
</div>
</td>
</tr>
<tr>
<td>12-Dec-24</td>
<td>Sandeza partners with PBS Network Seattle for AI Analytics</td>
<td><button class="toggle-btn">Show Details</button>
<div class="details">
                    Sandeza partners with PBS Network Seattle to leverage AI-driven data analytics, improving business intelligence and customer insights.
</div>
</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
 
<script>
    document.querySelectorAll('.toggle-btn').forEach(button => {
        button.addEventListener('click', function() {
            const details = this.nextElementSibling;
            if (details.style.display === "none" || details.style.display === "") {
                details.style.display = "block";
                this.textContent = "Hide Details";
            } else {
                details.style.display = "none";
                this.textContent = "Show Details";
            }
        });
    });
</script>
 
<style>
    .details {
        display: none;
        padding: 10px;
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        margin-top: 5px;
    }
    .toggle-btn {
        background-color: #0073aa;
        color: white;
        border: none;
        padding: 5px 10px;
        cursor: pointer;
        border-radius: 5px;
    }
    .toggle-btn:hover {
        background-color: #005a87;
    }
</style>