Ttdfjt

I am trying to make this work in Magento, but Magento changes the html and my boss hates it when I want to change anything using cPanel. So I need an option using the dashboard in Magento

<table width="100%">
 <tbody>
 <tr>
 <td>Stock replacement: Bolt in press on bearing</td>
 </tr>
 <tr>
 <td><a href="#" onclick="document.getElementById('showme').style.display = 'table-row'; return false;"><li>How To Measure</li></a></td>
 </tr>
 <tr id="showme" style="display: none">
 <td><embed src="https://dutchmanaxles.com/images/ordering/SR_defined_POB.pdf" type="application/pdf" width="100%" height="600px" /></td>
 </tr>
 </tbody>
</table>

In case you are using Magento 2, I would suggest to use requireJs

<table width="100%">
<tbody>
 <tr>
 <td>Stock replacement: Bolt in press on bearing</td>
 </tr>
 <tr>
 <td><a href="#" id="showEmbed"><li>How To Measure</li></a></td>
 </tr>
 <tr id="showme" style="display: none">
 <td><embed src="https://dutchmanaxles.com/images/ordering/SR_defined_POB.pdf" type="application/pdf" width="100%" height="600px" /></td>
 </tr>
</tbody>
</table>
<script type="text/javascript">
 require(['jquery'],function($)
 $('#showEmbed').on('click',function(e)
 e.preventDefault();
 $('#showme').toggle();
 )
 )
</script>

Ideally I would move JS content to separate JS file and initialize whole functionality via x-magento-init script or directly bind JS functionality on element via data-mage-init ( both variants are described in Magento DevDocs: Calling and initializing JavaScript )

In case you want to just show embedded content, change jQuery toggle function to show

Try Below code:

<table width="100%">
 <tbody>
 <tr>
 <td>Stock replacement: Bolt in press on bearing</td>
 </tr>
 <tr>
 <td><button onclick="myFunction();">How To Measure</button></td>
 </tr>
 <tr id="showme" style="display: none">
 <td><embed src="https://www.gstatic.com/webp/gallery3/1.png" width="100%" height="600px" /></td>
 </tr>
 </tbody>
</table>
<script>
function myFunction() 
alert("Hello");
 var x = document.getElementById("showme");
 if (x.style.display === "none") 
 x.style.display = "block";
 else 
 x.style.display = "none";
 

</script>

Personnally, i prefer the data-mage-init way, like described in Core.

You can use it anywhere in Magento .phtml files :

/vendor/magento/module-gift-message/view/frontend/templates/inline.phtml around line 30 :

<button class="action action-gift"
 data-mage-init='"toggleAdvanced": "selectorsToggleClass":"hidden", "toggleContainers":"#allow-gift-messages-for-order-container"'>
 <span><?= /* @escapeNotVerified */ __('Gift Message') ?></span>
</button>
<div id="allow-gift-messages-for-order-container" class="gift-messages-order hidden">