CODEWITHSUNDEEP
javascriptjqueryhtmlcsscss-transitions
Kyle_Figueroa
Kyle_Figueroa

Reputation: 319

How to hide a css transition behind another element both ways?

In the example below I will show you a sample of what I have right now and you will notice when you click on the black box another larger black box will pop out from underneath my sidebar! although in jsfiddle it is difficult to tell, it is very noticable in browsers, but with the help of the z-index I managed to get the window to properly slideout from underneath the sidebar, however when you click it again to send the box back, it goes overtop of the sidebar instead of back underneath. I have tried some simple things that did not do the job! Please help me out! :)

HTML

<div id="sidemenu">
    <div id="regionsContainer">
        <div id="regionsUnitedStates" class="not-open">
        <div id="regionsUnitedStatesTooltip"></div>
        </div>
    </div>
    <div id="regionsUnitedStatesChooseState"></div>
</div>

CSS

#sidemenu {
    width: 60px;
    height: 100%;
    min-width: 60px;
    height: 100vh;
    max-width: 60px;
    background-color: #383D3F;
    background-size: 100% 100%;
    background-attachment: fixed;
    position: absolute;
    left:-60px;
    transition: left ease-in-out 0.5s;
}
#sidemenu.show {
    left: 0;
}
#regionsContainer {
    width: 60px;
    height: 481px;
    min-height: 481px;
    min-width: 60px;
    max-width: 60px;
    max-height: 481px;
    background-color: #383D3F;
    position: relative;
    top: 25%;
    bottom: 25%;
}
#regionsUnitedStates {
    width: 60px;
    height: 60px;
    background: #000;
}
#regionsUnitedStatesTooltip {
    opacity:0;
    background: #555;
    height:60px;
    width:180px;
    left:100px;
    position:absolute;
    transition:all ease-in-out 0.25s;
    top:0;
    visibility:hidden;
}
#regionsUnitedStates.not-open:hover #regionsUnitedStatesTooltip{
    left: 60px;
    opacity:1;
    visibility:visible;
}
#regionsUnitedStatesChooseState{
    position:absolute;
    transition:all ease-in-out 0.25s;
    left: -250px;
    width: 250px;
    height: 100%;
    background: #000;
    top:0;
}
#regionsUnitedStatesChooseState.show {
    left: 60px;
    z-index:-1;
}

jQuery

$(function() {
    setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
$(function() {
    $("#regionsUnitedStates").on("click", function() {
        $("#regionsUnitedStatesChooseState").toggleClass("show");
        $("#regionsUnitedStates").toggleClass("not-open");
    });
});

Example:

JSFIDDLE

Upvotes: 2

Views: 3261

Answers (1)

Kamil Pawłowski
Kamil Pawłowski

Reputation: 176

I have updated your fiddle http://jsfiddle.net/z35LQ/1/

I have added z-index in CSS when the regionsUnitedStatesChooseState is hidden.

Your regionsUnitedStatesChooseState div was going over the side menu in both directions. If you add z-index for both state it will always go behind the side bar.

Upvotes: 1

Related Questions