Find input button within a selected class div

Question

How could I use jquery to find out this button within a div with class name "blueheaderbar accordionButton on" then change button value 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" isn't "a" single class name, but three. The CSS selector to select an element with all three classes is

.blueheaderbar.accordionButton.selected

(notice the lack of spaces!).

So to find an input inside there with jQuery is:

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

or

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

Answer 3

this 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 in 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');
});