CODEWITHSUNDEEP
javascriptjqueryaccordionjquery-ui-accordion
inspiringmyself
inspiringmyself

Reputation: 590

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

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!

Upvotes: 0

Views: 1627

Answers (3)

Raul Cruz
Raul Cruz

Reputation: 33

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

Checkout this jsfiddle I did with your code

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

Upvotes: 1

Slippery Pete
Slippery Pete

Reputation: 3110

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

Upvotes: 1

Be0wulf
Be0wulf

Reputation: 173

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.

Upvotes: 0

Related Questions