0

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?

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

0

Use below code:

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

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

    });
</script>
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.