Find enter button in selected div class

Question

How can I use jquery to recognize this button in a div with the class name "blueheaderbar accordionButton on" and then change the value of the button to "hide it"

<div class="blueheaderbar accordionButton selected" style="margin-top:20px"> <div class="floatleft">abc</div> <div class="floatright"><input class="showhidebtn" type="button" value="Show Outlet" style="margin:6px 16px 0 0; width:86px" /></div> <div class="clear"></div> </div> <div class="blueheaderbar accordionButton" style="margin-top:20px"> <div class="floatleft">abc</div> <div class="floatright"><input class="showhidebtn" type="button" value="Show Outlet" style="margin:6px 16px 0 0; width:86px" /></div> <div class="clear"></div> </div> 

Answer 1

I think the answer is:

 $("div.blueheaderbar.selected").find("input").val("hide it"); 

Answer 2

"blueheaderbar accordionButton selected" not a "one" class name, but three. CSS selector to select an element with all three classes -

 .blueheaderbar.accordionButton.selected 

(note the absence of spaces!).

So, to find the input inside with jQuery, follow these steps:

 var $input = jQuery(".blueheaderbar.accordionButton.selected input"); 

or

 var $input = jQuery(".blueheaderbar.accordionButton.selected").find("input"); 

Answer 3

it will do the trick -

 jQuery(".blueheaderbar.accordionButton.selected").find(".showhidebtn").hide(); 

and for secon div try this

 jQuery(".blueheaderbar.accordionButton").find(".showhidebtn").hide(); 

you can try this way also -

 jQuery(".blueheaderbar.accordionButton.selected > .showhidebtn").hide(); 

Working demo

Answer 4

This should change the text.

 $('.showhidebtn').click(function() { $(this).val('hide it'); });