Question

I have a problem with one script. I believe it’s something simple, unfortunately not that simple for me.
What I’m trying to do is to display a div (appearing after click). It should happen when you click on “Products”. What I have so far is this:

   <div id="header">

    <div id="headcont"> 

            <div id="main-menu">
                <a href="#" id="button-products">Products</a>
            </div>

            <div id="products-menu">
                <a href="#">Jackleg units</a>
                <a href="#">Antivandal units</a>
                <a href="#">Storage containers</a>
            </div>

    </div>
</div>

and css:

    body{

    background-color:#666;

}

#header{
    position:absolute;
    top:0px;
    background-color: rgba(0, 0, 0, .9);
    width:100%;
    height:70px;
    border-bottom:1px #999 solid;
    padding:15px 0;
    z-index:200;
}

#headcont{
    overflow:hidden;
    width: 480px;
    margin: 0 auto;
}

#main-menu{
    margin-top:55px;
    float:right;
}

#main-menu a{
    display:block;
    width: auto;
    font-size:1.7em;
    float:left;
    margin: 0 10px;
    color:#eee;
}

#products-menu{
    overflow:hidden;
    background-color: rgba(255, 255, 255, .8);
    width:980px;
    display: none;
}

#products-menu a{
    display:block;
    width: auto;
    background-color:rgba(0, 0, 0, .6);
    padding: 5px;
    margin: 2px 5px 2px 0;
    text-decoration:none;
    font-size:1.7em;
    float:left;
    color:#eee;
}

• the major thing – jquery:

  $(function() {
      $('#button-products').on('click', function() {
          $('#products-menu').css("display:","block");
      });
  });
  

It’s a bit long, so I used jsfiddle to help you understand what I’m trying to do: JSFIDDLE.
Thank you very much for your help.

Answer 1

Your code doesn’t work because of the colon at the end of the CSS property you are setting:

$('#products-menu').css("display:","block");
// remove this -----------------^

Remove it and it works: http://jsfiddle.net/7tbsR/4/

(Note that your fiddle didn’t have jQuery selected in the panel on the left, so that didn’t help either.)

Note also that jQuery offers some methods to display hidden elements, including the plain .show() and several animation methods that fade or slide the hidden item(s) into view. (For your menu .slideDown() is a nice effect: http://jsfiddle.net/7tbsR/7/)