Toggle on CMS page not working

Question

I'm completely new to magento so probably a quite basic question. I've got some code for my cms page like this:

<div class="col2-Container"><div class="ResponsiveTest"><h3>Finder</h3>
<div class="ResponsiveTest2"><a href="http://www.somesite.co.uk”><img src=“…..” width="100%" style="margin-bottom:10px;"/></a>
<div class="button"><img src="{{media url=“….”}}” alt="" /></div>
</div>
</div>

Now I'm trying to get the functionality that when the user clicks on .ResponsiveTest the div class .ResponsiveTest2 is toggled.

To do that I've added this code to the bottom of the page

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

This worked for a static block, but doesn't seem to work here. I get the error:

Uncaught TypeError: Cannot read property 'observe' of null

Can anybody help me with this?

Answer 1

Try this

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

Prototype js $ refere to id and $$ refere to class

Answer 2

Use below code:

<script type="text/javascript">
    $$('.ResponsiveTest h3').each(function(element) {
        element.observe('click', function(element) {

            $$('.ResponsiveTest2').each(function(item) {
             item.toggle();
         });
        });

    });
</script>

Answer 3

You're trying to observe an element with an ID of ResponsiveTest and not a class.

You can either use:

$$('responsivetest').observe('click', function() { ... }

Or change your HTML like this:

<div class="responsivetest" id="responsivetest"> ... </div>

On a side note; I would highly recommend naming IDs and classes in lowecase - it'll make your life easier.