CODEWITHSUNDEEP
jquerycss
Kenn
Kenn

Reputation: 11

Expanding divs with buttons, revealing more information hidden in the div

Hey I'm having a small problem regarding showing/hiding elements within a div.

I have a display image of a book nested inside a div with two buttons. One button called [subscription] and another button called [receipt].

When pressing the [subscription]-button, the div expands and will show additional infomations like the expiration date. When pressing the [receipt]-button, the div expands even more, and will now show a complete receipt including logo, text, prices etc.

THIS ALL WORKS VERY FINE, BUT ...

When I have more than one 'book' (each book in its own div called [.mybooks-container]), all the books divs are expanded, and not just the one I actually am clicking on. So for example when clicking the [receipt]-button, all books are showing the complete receipt including logo, text, prices etc. at the same time, and not just the one I clicked.

If anyone please could point me in the right direction, I would be very grateful …

$(document).ready(function(){
$('.subscription').css('display', 'none');
$('.button.red').click(function(){
$(".mybooks-container").height(135)
$('.receipt').css('display', 'none');
$('.subscription').toggle();
if($('.subscription').is(':visible')) {
    $(this).val('Abonnement');
    $(".mybooks-container").height(260)
} else {
    $(this).val('Abonnement');
}
});
$('.receipt').css('display', 'none');
$('.button.orange').click(function(){
    $(".mybooks-container").height(135)
    $('.subscription').css('display', 'none');
            $('.receipt').toggle();
                if($('.receipt').is(':visible')) {
    $(this).val('Luk kvitteringen');
    $(".mybooks-container").height(540)
} else {
    $(this).val('Kvittering');
}
});
});

Upvotes: 1

Views: 418

Answers (1)

csharpnumpty
csharpnumpty

Reputation: 3723

When the .button.orange click event is handled, you should use something like: $(this).parent(".mybooks-container").find(".receipt").toggle(); * - Since I can't see your HTML, I cannot guarantee this selector will work, but hopefully you will understand the principle

What you're doing at the moment is toggling all elements with a specific class - of which you have many, which is why they all hide.

If you find the specific div that contains the exact button you clicked, you can show and hide the correct items, rather than all of them.

You also have the option of restructuring your HTML to give the elements IDs, which makes writing specific jQuery selectors easier, but I have used your existing structure for the purposes of an immediate answer.

Upvotes: 2

Related Questions