David J. David J. - 2 months ago 5x
CSS Question

why isn't my jquery altering css attributes on button push?

I have an file "dashboard.html" that I am trying to manipulate with jQuery. The contents are such:

<div id="dashboard">

<span id="contracts">
<div id="make-offer">
<button onclick="getDetails()">add</button>
<div id="offer-type" style="visibility:hidden">
<form action="">
"Offer what for what???"
<button id="add-good" onclick="addGood()">good</button>
<button id="add-service" onclick="addService()">service</button>

I am trying to hide the "make-offer" div upon clicking the button and show the "offer-type". However, when I run the following js file, the divs do not change their visibility, though my test message is successful.

function getDetails(){
console.log("getting details.");


Can anyone spot what I'm doing wrong? thanks.


You're calling .css() improperly. Two choices:

$("#make-offer").css("visibility", "hidden");


$("#make-offer").css({ visibility: "hidden" });

The second way allows you to set more than one property at a time.

When you pass just one parameter, you're asking jQuery to give you the current value of that CSS property.