Show a div when loading a page depending on a value

Question

I'm working with Joomla and PHP and I have the following problem:

I have this DIV:

<div id="buypdf" style="margin-left:0px; display:none;">
    <form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
        <input type="hidden" name="cmd" value="_xclick">
        <input type="hidden" name="business" value="prrrrfff@gmail.com">
        <input type="hidden" name="currency_code" value="EUR">
        <input type="hidden" name="item_name" value="<?php echo $item->name; ?>">
        <input type="hidden" name="amount" value="<?php echo $item->price; ?>">
        <button name="submit" id="buy_pdf" class="button" style="margin-left:5px;" type="submit">Buy pdf!</button>
    </form>
</div>

And it works pretty fine. I had that 'display:none;' in order to set it to 'block' or 'show' if the category of the item is > 38, for example.

But it is not working.

I've read answers from similar questions and I added this:

<script>
   $(window).load(function() {
       $("#buypdf").show();
   });
</script>

This:

<script>
   $(document).ready(function() {
       $("#buypdf").show();
   });
</script>

And even this:

$(function() {
   document.id('#buypdf').setStyle('display','block');
});

But nothing is working. I'm just trying this in order to see that it works but what I want to do is something like the following:

<script>
   $(window).load(function() {
       <?php
          if($item->cat_id > 38){
       ?>
             $("#buypdf").show();
       <?php
          }
       ?>
   });
</script>

Any tip or advice? Thank you.

Answer 1

Make sure you include the JQuery file. This should work:

$(function(){
   $("#buypdf").show();
});

JSFiddle

You can also do it with pure Javascript:

function showDiv(){
    document.getElementById("buypdf").style.display = "block";
};
showDiv();

Example 2