Расширение div с помощью кнопок, раскрытие дополнительной информации, скрытой в div

Question

Эй, у меня небольшая проблема с отображением / скрытием элементов внутри div.

У меня есть изображение книги, вложенной в div с двумя кнопками. Одна кнопка называется [подписка], а другая кнопка называется [квитанция].

При нажатии кнопки [подписка] div расширяется и отображает дополнительную информацию, например дату истечения срока действия. При нажатии кнопки [квитанция] div расширяется еще больше и теперь будет отображать полную квитанцию, включая логотип, текст, цены и т. Д.

Это все работает очень хорошо, но ...

Когда у меня есть более одной «книги» (каждая книга в своем собственном div, называемом [.mybooks-container]), раскрываются все div книги, а не только та, на которую я нажимаю. Так, например, при нажатии кнопки [квитанция] все книги одновременно показывают полную квитанцию, включая логотип, текст, цены и т. Д., А не только ту, на которую я нажал.

Если бы кто-нибудь мог указать мне правильное направление, я был бы очень признателен ...

$(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');
}
});
});

Answer 1

Когда обрабатывается событие .button.orange, вы должны использовать что-то вроде: $(this).parent(".mybooks-container").find(".receipt").toggle(); * - поскольку я не вижу ваш HTML, я не могу гарантировать, что этот селектор будет работать, но, надеюсь, вы поймете принцип

В настоящий момент вы переключаете все элементы с определенным классом, которого у вас много, поэтому все они скрываются.

Если вы найдете определенный div, который содержит точную кнопку, которую вы нажали, вы можете показать и скрыть правильные элементы, а не все.

У вас также есть возможность реструктурировать ваш HTML, чтобы дать идентификаторы элементов, что облегчает написание конкретных селекторов jQuery, но я использовал вашу существующую структуру для целей немедленного ответа.