Question

I have a basic function that when no answer is clicked it shows an error message in
the div id “error”. this works fine but when i have a background colour and image is shows the style on the div. i’m using jquery and moo tools,

Is there a way to hide this style until the answer is set.

    <style type="text/css>

    #error {

      border: 1px solid;
      margin: 10px 0px;
      padding:15px 10px 15px 50px;
      background-repeat: no-repeat;
      background-position: 10px center;
      color: #D8000C;
      background-color: #FFBABA;
      background-image: url('../images/error.png');

    }
    </style>

    <div id="error"></div>

    <script type="text/javascript>
    function showAnswerAlert() {
        $('error').set('html', '<strong>Please select an answer above.<strong>')


    }
    function clearErrorBox() {
        $('error').set('html','');


    }
    </script>

Answer 1

Hide the div initially and show in showAnswerAlert or where ever you need

<div id="error" style="display:none"></div>

function showAnswerAlert() {
    $('error').set('html', '<strong>Please select an answer above.<strong>');
    $('error').show();
}

or hide error div on document ready

$(function(){
    $('error').hide();
});