4

I am using the below bit of jQuery to toggle hidden divs. Working in all but Firefox and I know the error is (ReferenceError: event is not defined) but I'm not sure where to define the event so if anyone is able to help that would be great. Thanks in advance!

Each button is written as:

<div class="btn_view"><a href="#" onclick="toggle_visibility('all-avon',this);">VIEW TYRES</a></div>

jQuery:

function toggle_visibility (id,el) {
    $('.btn_view a').html('VIEW PRODUCTS’);
    event.preventDefault();
    $('.price-text').show();
    $('.model-price-sm').show();
    var e = document.getElementById(id);
    if (e.style.display == 'block') 
    {
        e.style.display = 'none';
        $(el).html('VIEW ALL');
    }
    else 
    {
        e.style.display = 'block';
        $(el).html('HIDE PRODUCTS’);
        $(el).parent().parent().find('.price-text').hide();
        $(el).parent().parent().find('.model-price-sm').hide();
        //$(el).parent().prev('.price-text').hide();
    }

    hideAllBut(id);
}

function hideAllBut(id) {
    var lists = document.querySelectorAll('.reveal');
    for (var i = lists.length; i--; ) {
        if (lists[i].id != id) {
            lists[i].style.display = 'none';
        }
    }
}

3 Answers 3

4

In FireFox, you can pass the event object in as a parameter e.g.:

<div class="btn_view"><a href="#" onclick="toggle_visibility('all-avon',this, event);">VIEW TYRES</a></div>

function toggle_visibility (id,el, e) (then use e.preventDefault, just to make it separate to window.event in IE etc)

Although, as you are using jQuery, I would suggest doing what Sergio mentioned above/below.

1
3

Instead of using "event.preventDefault()" you could use "return false". It probably will solve your problem in Firefox.

Cheers

0
2

You have a typo:

.html('VIEW PRODUCTS’); 
                    ^

and also same typo here .html('HIDE PRODUCTS’);

Apart from that its better to avoid inline script, so you could use:

$('.btn_view a').click(function(event){
    event.preventDefault();
    toggle_visibility (id,el)
});
3
  • Thanks for the quick reply. I need each button to open a different hidden div so not sure this works?
    – fsylothian
    Dec 13, 2013 at 13:06
  • @fsylothian can you post your whole html?
    – Sergio
    Dec 13, 2013 at 13:07
  • @fsylothian, you can always add a data attribute to the anchors. Such as data-target-id="targetId". Then in the click function above you would do toggle_visibility($(this).attr('data-target-id'), this);
    – darkrat
    Mar 20, 2014 at 16:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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