CODEWITHSUNDEEP
javascriptjqueryfadein
Albz
Albz

Reputation: 2030

How to fade in multiple hidden divs when clicking the corresponding button using jQuery?

I have a series of web buttons that are generated by a PHP script. Whenever the user clicks one of these buttons I'd like the corresponding hidden to fade in using jQuery.

This is my HTML code 

<div id="confirmation-apple" style="display:none;">
    Do you really want to delete this apple?
</div>
<input type="button" id="confirmdelete-pear" value="Delete" />
<div id="confirmation-pear" style="display:none;">
    Do you really want to delete this pear?
</div>

And this is my javscript code

$(document).ready(
    function() {
        $("#confirmdelete-apple").click(function() {
            $("#confirmation-apple").fadeToggle();
        });
    });
$(document).ready(
    function() {
        $("#confirmdelete-pear").click(function() {
            $("#confirmation-pear").fadeToggle();
        });
    });

They work perfectly as shown in the Fiddle I created, however since the buttons are generated automatically by a PHP script (i.e. I can have an undefined number of buttons) I'm looking for a way to automatize the javascript code so that each button id="confirmation-aCertainString" triggers the fade in of the corresponding div id= "confirmdelete-aCertainString".

Thank you in advance for your help

Upvotes: 0

Views: 449

Answers (4)

Gavin Bruce
Gavin Bruce

Reputation: 1809

Another way to do it without any ids could be to use a container class such as div.fruit-container

html

<div class="fruit-container">
    <div>Do you really want to delete this apple?</div>
    <button>Delete</button>
</div>

<div class="fruit-container">
    <div>Do you really want to delete this orange?</div>
    <button>Delete</button>
</div>

<div class="fruit-container">
    <div>Do you really want to delete this pear?</div>
    <button>Delete</button>
</div>

jquery

$('div.fruit-container').find('button').on('click', function() {
   $(this).parent().find('div').fadeToggle();
});

http://jsfiddle.net/gavinbruce/CWsu7/

Upvotes: 0

Mohamed AbdElRazek
Mohamed AbdElRazek

Reputation: 1684

I think you need something like this in jsfiddle first to select any id start with "confirmdelete-" then after add click event we can cut the required name from its id attribute like "apple" then add it to "confirmation-" to fade it :

$(document).ready(
    function() {
        $('[id^="confirmdelete-"]').click(function() {
            $('#confirmation-'+$(this).attr('id').replace('confirmdelete-','')).fadeToggle();
        });
});

Upvotes: 2

Logar314159
Logar314159

Reputation: 503

Use a FAKE class in your buttons, 

<input id="btnDelete1" type="button" class="btnDelete" value="Delete">

Select the buttons by the fake class, then for each one of them set the click event and fade divs, but your div's id must be like this SomeName + ButtonId.

<input type="button" id="confirmdelete-pear" value="Delete" class="btnDelete"/>
<div id="confirmation-confirmdelete-pear" style="display:none;">
    Do you really want to delete this pear?
</div>

and the way to show the divs is something like this:

$(document).ready(function(){
    $(".btnDelete").each(function(){}).click(function(){
        $("#confirmation-" + this.id.toString()).fadeToggle();
        });
    });
});

Upvotes: 0

Marcel Gwerder
Marcel Gwerder

Reputation: 8520

You could select the button with input[type="button"] or input[value="Delete"](to be more specific). Or assign a class to the buttons for example delete and use $('.delete') For the click event.

Then use next to get the corresponding div. So you don't even need the aCertainString part. 

$(document).ready( function() {
        $('input[type="button"]').click(function() {
            $(this).next().fadeToggle();
        });
});

Have a look at the fiddle.

Upvotes: 1

Related Questions