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>

Himelman

Answer 1

I think the answer is:

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

Forecastle

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");

Tryout

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

Naples

Answer 4

This should change the text

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

Bamford