Show/hide buttons when clicking on a button on accordion header - jQuery

Question

I have a button on accordion header and when it is clicked I want to show another button in the div.

<div "accordion">
<h3>
     <input type="button" id="headerButton1" value="Random"/>
</h3>
<div>
     <input type="button" id="divButton1" value="Random1"/>
     <p>This is the first paragraph</p>
</div>

<h3>
     <input type="button" id="headerButton2" value="Random"/>
</h3>
<div>
     <input type="button" id="divButton2" value="Random2"/>
     <p>This is the second paragraph</p>
</div>

<h3>
     <input type="button" id="headerButton3" value="Random"/>
</h3>
<div>
     <input type="button" id="divButton3" value="Random3"/>
     <p>This is the third paragraph</p>
</div>
</div>

How could I show/hide #divButton when the respective section #headerButton is clicked?

Any help greatly appreciated!

Answer 1

This will toggle visibility of the button under the parent's next sibling:

$("h3 input[type='button']").click(function () {
    $(this).parent().next().find("input[type='button']").toggle();
});

jsFiddle Example

Answer 2

$(document).ready(function () {
    $('#headerButton1').click(function(event) {
        $('#divButton1').fadeIn('slow');
    });
});

Checkout this jsfiddle I did with your code

http://jsfiddle.net/aguilar1181/eayj75zz/1/

Answer 3

you can get the current #headerButton using the event property currentTarget . Then you can get the button, if it's hidden show it.

Don't forget to hide all button instances with css:

button{
    display: hidden;
}

for better practice, use the <button> instead.