In need of some SERIOUS HELP!!! PLEASE

[mrclark219]

OK so I created this table pulling data from my mysql database. But since the database is very large it pulls a bunch of data making an already cluttered page even worse.  My question is, is there a way using php or any other languages that would work well together that I can create a show/hide button that would hide this table until someone needed it! Please someone help me out! Thanks for the time ...I am told that you can only do this with JavaScript and Im far from being an expert in either of the languages here , but I really need to get this knocked out any suggestions, examples would be great be im stomped....and here is the coding for the table

 

$xmlDoc->addTable($stock->addRelation('purchaseOrders')->getData(array('purchaseOrders.dbPurchaseOrderNumber', 'purchaseOrders.dbPurchaseDate', 'purchaseOrders.dbReceived', 'purchaseOrderParts.dbQuantity'), NO_PRIMARY_KEY,'purchaseOrderParts.dbPartNumber="' . $partNumber . '" ORDER BY purchaseOrders.dbPurchaseDate DESC LIMIT 10'), CONTENT_NODE, array('TABLE'=>array('SHOW_HEADER'=>'1', 'LABEL'=>'Purchase Orders')));

      if(!$stock->addRelation('purchaseOrders')->numRows)

        $xmlDoc->addData('No results found', $dataTag);

             

      $xmlDoc->addTag('HR', $hrTag);

 

[Adam]

With JavaScript you could just hide the table at the page 'onload' event. To do that you just simply switch the CSS display property to 'none' which would effectively hide the content from the user. Note not straight from within the CSS though as this would render the content useless for those with JS disabled.

 

Then to make the content viewable again, just create a custom JS function that would switch the CSS display property back to block, table, or whatever.. as you click a button / link.

 

Take a look at 'definition and usage' section of this page for a quick example on how to modify the CSS display property with JS.

 

 

Does that help? Just read it back to myself but not sure if I was quite clear enough.

[mrclark219]

I appreciate the advice but I am a complete and utter newb at this, so I need it broken down just a little more. Im sorrry if this is causing any problems but I need to get this handled, rather quickly!

[KevinM1]

Rough sketch of what MrAdam described:

 

<script type="text/javascript">
   window.onload = function(){
      var oTable = document.getElementById('purchaseOrders');
      oTable.style.display = 'none';

      var oToggle = document.getElementById('toggle');

      oToggle.onclick = function(){
         oTable.style.display = (oTable.style.display = 'none') ? 'block' : 'none';
      }
   }
</script>

<!-- elsewhere in your HTML -->

<table id="purchaseOrders">
   <--! data -->
</table>

<button id="toggle">Click to show/hide purchase orders</button>

 

That's more or less the skeleton of what you need to do.