Adding jQuery to static block

Question

I'm a complete newbie to magento so excuse me if this is a silly question. I need to add some code for a toggle function so something like this :

<script type="text/javascript">
    $("#Category1").click(function(){
        $(".moreCategory1").toggle();
    });
</script>

I need to add this to a static block so I tried adding it just at the end of the static block as usually I'd add it to the end of the body or the footer, but it doesn't work. So where would I need to put the jquery code for a static block?

Answer 1

Likely you are having a conflict with prototype.js. You can do as Marius pointed out and use prototype which is already used throughout Magento, or if you'd like to use jquery, you can use a noconflict. You could also just replace you '$' with 'jQuery' to avoid conflict.

<script type="text/javascript">
    jQuery("#Category1").click(function(){
        jQuery(".moreCategory1").toggle();
    });
</script>

Answer 2

Why do you need jquery for simple tasks. Use prototype and it should work nicely:

<script type="text/javascript">
    $('Category1').observe('click', function() {
         $$('.moreCategory1').each(function(item) {
             $(item).toggle();
         })
    })
</script>