Your issue is that you're providing the onclick a function call instead of a function reference. Your browser expects the latter.
Proper way
// Javascript
function foo(e) {
// do stuff, like set the CSS on some elements. Note
// that the 'e' argument is going to be a browser event,
// not the element you're changing.
}
// HTML
<div onclick=foo>
// This passes a reference to a function. Your browser then
// calls foo with an argument of the browser event that was triggered.
Wrong way
// Javascript
function bar(element) {
// do stuff on the *element* argument.
}
// HTML
<div onclick=bar(someDiv)>
// This is wrong because *bar(someDiv)* isn't a reference to
// the function, it's a call to run the function with an argument
// of *someDiv*. onclick isn't expecting this, so the behavior
// you'll get will be not what you expect.
The specifics of your usage is that $('.action').css('display', 'block'); is a function call, not a reference. Your browser is trying to then do ($('.action').css('display', 'block'))(clickEvent), and that's not right at all. So you can wrap your $('.action').css('display', 'block'); in an anonymous function to make it work the way your browser expects:
<div onclick="function(e) {$('.action').css('display', 'block');}">
Also note $().show(), which may be a handy function for your usage, instead of manually setting CSS properties. Also also consider adding an ID to your HTML element, then use JQuery to attach an onclick handler for that ID (i.e. $().click()).
onclickattribute..show()to make it visible. No need to touch CSS in your JavaScript code.