Transition in jquery when clicking on button

Question

So I tried to get a transition when clicking on the button. It should pop up slowly right next to the main div, but the problem is when its to fadeIn again after clicking the button again, it doesnt fadeIn with a delay. Its only getting back without a delay.

I tried it with opacity and it didnt also work, also I tested a few things but could figure it out.

Sry for the unclean code. Started not long ago with coding and been testing out some things. Thx for every reply. Its also my first question here, so sry if I made some mistakes.

Here is a code snippet what i tried to do.

If the codesnippets are not enough here is the link to the whole thing on Codepen: https://codepen.io/ViteZ/pen/abzrjKJ

HTML

<div id="wrapper">
        <div id="weatherLayout">
            <button id="detailsButton1" class="button">
                <img id="imgRotate" src="/icon_doppeltRunter.png">
            </button>
        </div>

        <div id="detailsLayout">
            <button id="detailsButton2" class="button">
                <img id="imgRotate2" src="/icon_doppeltRunter.png">
            </button>
            <p>dsfdsfdsf

            </p>
        </div>
    </div>

CSS

#weatherLayout {
    height: 400px;
    width: 300px;
    background-image: linear-gradient(to bottom, #82C7F2, #AE8FDD);
    float: left;
    border-radius: 8%;
}

#detailsButton1 {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    float: right;
    margin-top: 330px;

}

.button {

    background-color: #A37AD0;
    border: none;
    width: 50px;
    height: 30px;
}

#detailsButton2 {
    opacity: 1 !important;
    float: left;
    margin-top: 290px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

#detailsLayout {
    visibility: hidden;
    background-image: linear-gradient(to bottom, #B5DFEF, #C5B2E7);
    width: 0px;
    height: 320px;
    margin-left: 300px;
    margin-top: 40px;
    border-top-right-radius: 8%;
    border-bottom-right-radius: 8%;
}

JS

$("#detailsButton1").click(function () {

    $("#detailsLayout").css("transition", "width 1s");
    $("#detailsLayout").css("transition-timing-function", "ease-in");
    $("#detailsLayout").css("visibility", "visible");
    $("#detailsLayout").css("width", "250px");
    $(this).css("display", "none");
    $("#detailsButton2").css("display", "block");
});


$("#detailsButton2").click(function () {
    $("#detailsLayout").css("transition", "opacity 1s");
    $("#detailsLayout").css("transition-timing-function", "ease-out");
    $("#detailsLayout").css("width", "0px");
    $(this).css("display", "none");
    $("#detailsButton1").css("display", "block");
    $("#detailsLayout").css("visibility", "hidden");

});

Answer 1

I make it more simplier, but I hope you understand it.

html:

<div id="wrapper">
        <div id="weatherLayout">
            <button id="detailsButton1"class="button"><span>Button<span></button>
        </div>

        <div id="detailsLayout">
            <p>test</p>
        </div>
    </div>

css:

#wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


#weatherLayout {
    height: 400px;
    width: 300px;
    background-image: linear-gradient(to bottom, #82C7F2, #AE8FDD);
    float: left;
    border-radius: 8%;
}

#detailsButton1 {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    float: right;
    margin-top: 330px;
}

.button {
    background-color: #A37AD0;
    border: none;
    width: 50px;
    height: 30px;
}

#detailsLayout {
    background-image: linear-gradient(to bottom, #B5DFEF, #C5B2E7);
    width: 0px;
    height: 320px;
    margin-left: 300px;
    margin-top: 40px;
    border-top-right-radius: 8%;
    border-bottom-right-radius: 8%;
    transition: width .5s ease;
}

#detailsLayout.open {
  width: 250px;
}

#detailsButton1.active {
  transform: translateX(100%);
  border-radius: 0 8% 8% 0;
}

jQuery:

$('#detailsButton1').click(function(){
  if(!$(this).hasClass('active')) {
    $('#detailsLayout').addClass('open');
    $(this).addClass('active'); 
  } else {
    $('#detailsLayout').removeClass('open');
    $(this).removeClass('active');
  }
});