There are so-called step by step transitions. The problem is that, because of the transparent background, the tabs overlap each other to form a mess. (the transparent background is conceived from the very beginning, changing the background color does not fit) I would like to get help if it can be done so that after opening the next tab, the previous tabs were hidden. In javascript'e not at all strong.

Tabs themselves - codepen.io/bulsix/pen/oExpeX/

    1 answer 1

    Instead of your js

     $('#myBtn').on('click', function() { $('#myModal') .show(0) .find('.modal-bodies > .modal-body') .eq(0) .addClass('is-showing'); }); $('.close').on('click', function() { $('#myModal') .hide(0) .find('.modal-bodies > .modal-body') .removeClass('is-showing'); }); $('#myModal .button').on('click', function() { var parent = $(this).parents('.modal-body'); if( parent.is(':last-child') ) { // Код, который сработает после клика Verify Now return false; } parent .removeClass('is-showing') .next('.modal-body') .addClass('is-showing'); });