CODEWITHSUNDEEP
jquerycssclick
Tankenka
Tankenka

Reputation: 11

Giving DIFFERENT attributes to multiple, different, IDs in CSS using jQuery with ONE click event

I have looked high and low. There are answers for one click changing a single property in a CSS element, or changing multiple properties in a single CSS element, or changing a class with a single change - but all of these have been linear.

I am trying to have a ONE CLICK event, where, for example, I click a button (or a link, etc) which I've set up. Let's call this id #myClickButton. This button then should change two separate id's css properties to two different values. We'll call these ids #myCssChange1 and #myCssChange2.

I click #myClickButton. then #myCssChange1 goes from display: block; --> display: none; at the same time #myCssChange2 goes from display: none; --> display: [novaluehere];

These must happen simultaneously (or as close as one can get given the step-by-step actions that a computer must take to execute code).

I'm sure this is exceedingly simple... I'm just looking to find the jquery for it (not the CSS or the HTML)

My code so far (and yes, I realize it's incorrect - it doesn't work, but it DOES hide the first CSS, so part of it functions):

    $(document).ready(function()
      {
        $("#myClickButton").click(function()
          {
            $("#myCssChange1").css('display', 'none');
            $("#myCssChange2").css('display', '');
          }
        );
      }
    );

Upvotes: 1

Views: 254

Answers (3)

Tankenka
Tankenka

Reputation: 11

First - thank you everyone for the replies. Knowing that my code was (mostly) functional was a BIG help (since I'm teaching myself, I often drive myself crazy). The external resources were similarly a big help.

I was not aware that I couldn't return a no-value to CSS. Lesson learned. However, this particular issue, to add some clarity, was that the first object that was initially visible (#myCssChange1) was a div with a block of text. The second object that initially hidden (#myCssChange2) was a div with a table contained inside. For whatever reason, having "display" set to anything other than "none" for the #myCssChange2 table resulted in a compacted DIV off to the side that refused to expand to show the table (basically, a closed bar with nothing in it).

I discovered quite by accident another option thanks to the mention of the .hide() and the .show() suggestion, and that was using "visibility" in the CSS rather than display. This solved the problem I was having with the resulting HTML output.

So I used:

    $(document).ready(function()
      {$("#myClickButton").click(function()
          {$("#myCssChange1").css('visibility', 'hidden');
           $("#myCssChange2").css('visibility', 'visible');
          });
      });

This appears to be a little more forgiving, while not quite as flexible as display, it handled the kinks nicely.

Thank you all again, very much, I'd have been at this at least a week longer without all your inputs.

Upvotes: 0

David Hayes
David Hayes

Reputation: 150

Your code is actually functional (assuming you're trying to discard a set display value like none). Here it is running as a JSFiddle. I'm guessing you're either not loading JQuery or have your ID in the HTML different than you describe above if it's not working for you.

Also, if you're just showing and hiding elements, jQuery has methods for that. They're quite usefully just show() and hide().

Upvotes: 1

Kevin B
Kevin B

Reputation: 95048

Close, you need to specify something other than '' to change the display to.

$(document).ready(function(){
    $("#myClickButton").click(function(){
        $("#myCssChange1").css('display', 'none');
        $("#myCssChange2").css('display', 'block'); // or inline, etc
    });
});

Upvotes: 1

Related Questions