Question

I am using Drupal CMS. In Drupal there is a messages DIV that has a class of .message
When an error appears, the class "error" is added to the message DIV.

On my page, I have a DIV that has a class of "instruction"
I want this DIV to be hidden and only appear when the error class is visible.

Here is my code:

 (function ($) {
    $(document).ready(function () {
        $(".instruction").hide;
    });

    if ($('.messages').hasClass('error')) {
    $('.instruction').show;
    }

})(jQuery);

However, it doesn’t seem to work. How can I make it work? Thanks for any help!

Answer 1

It’s a function call, you’ll need to add () like this:

$.ready(function() {
    $(".instruction").hide();

    if ($(".messages").hasClass("error")) {
        $(".instruction").show();
    }

});

Here’s the Fiddle (Remove the “error” from the HTML to see it work).