Hi ,I having two tables , production,dispatch ,I want button when I click production button only appear production details,when ever click dispatch button only appear dispatch details .how to create mashup code please help me for reference attachment screen shoots.
<!-- Buttons to toggle details --> <button onclick="showDetails('production')">Production</button> <button onclick="showDetails('dispatch')">Dispatch</button>
<!-- Production Details --> <div id="production-details" class="details"> <h2>Production Details</h2> <p>Here are the production details:</p> <ul> <li>Item 1: 100 units</li> <li>Item 2: 150 units</li> <li>Item 3: 200 units</li> </ul> </div>
<!-- Dispatch Details --> <div id="dispatch-details" class="details"> <h2>Dispatch Details</h2> <p>Here are the dispatch details:</p> <ul> <li>Item 1: 50 units dispatched</li> <li>Item 2: 75 units dispatched</li> <li>Item 3: 100 units dispatched</li> </ul> </div>
<script> // JavaScript function to toggle visibility of details function showDetails(detailType) { // Hide all details first document.querySelectorAll('.details').forEach(function(detail) { detail.classList.remove('active'); });
// Show the selected details if (detailType === 'production') { document.getElementById('production-details').classList.add('active'); } else if (detailType === 'dispatch') { document.getElementById('dispatch-details').classList.add('active'); } } </script>
</body> </html>
Regards
Mark the solution as accepted that solved your problem and if you found it useful, press the like button! Check out my YouTube Channel | Follow me on LinkedIn
Mark the solution as accepted that solved your problem and if you found it useful, press the like button! Check out my YouTube Channel | Follow me on LinkedIn
