hiding elements using jquery button click

Question

I have four buttons and I want to show/hide elements on click.

 <input name="0rope" class= "css3button 0rope"type="button" value="0"  />
 <input name="1rope" class= "css3button 1rope"type="button" value="1"  />
 <input name="2rope" class= "css3button 2rope"type="button" value="2"  />
 <input name="3rope" class= "css3button 3rope"type="button" value="3"  />

I tried this code, but its not working, can you help

 $(".input.css3button.0rope").click(function(){
    $("#img3,#img4,#img5,.4,.5,.6,.4b,.5b,.6b").hide();
  });
   $(".input.css3button.1rope").click(function(){
    $("#img3,#img4,.4,.5,.4b,.5b").hide();
    $("#img5,.6,.6b").show();
  });
     $(".input.css3button.2rope").click(function(){
    $("#img3,.4,.4b").hide();
    $("#img4,#img5,.5,.5b,.6,.6b").show();
      });
      $(".input.css3button.3rope").click(function(){
    $("#img3,#img4,#img5,.4,.5,.6,.4b,.5b,.6b").show();
  });

Answer 1

There are a few formatting issues with your HTML, as well as an issue with the class names you're using. You need to add a space before type="button", and also class names starting with numbers cause issues with CSS selectors—they must start with letters (a-z), an underscore, or a hyphen in order to use the standard .classname or #classname selectors in your CSS files (see here), so I'd recommend changing 0rope to rope0, etc:

<input name="rope0" class="css3button rope0" type="button" value="0" />
<input name="rope1" class="css3button rope1" type="button" value="1" />
<input name="rope2" class="css3button rope2" type="button" value="2" />
<input name="rope3" class="css3button rope3" type="button" value="3" />

Also, in your jQuery selectors (the code inside the $('') call), you have .input at the beginning of the selector. This will make jQuery look for elements with an input class on them, eg class="css3button rope0 input". To make it look for <input> elements, simply remove the leading .:

$("input.css3button.rope0").click(function(){