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


Tags: javascript,jquery,html,css3,css-transitions

Problem :

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



Solution :

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.


    CSS Howto..

    How do I select certain siblings via CSS?

    How to use a backslash in css content property?

    How should I crop the image at client side using jcrop and upload it?

    How to remove or hide element using jquery or css

    Tumblr: How to control CSS with post tagging (UPDATE: Working Method without JQuery!)

    Refactor link to show/hide a table row

    How to change scrollbar in textarea input?

    Colorbox's overlay not showing

    how to add a class to buttons attribute using css or jquery

    I can not load the CSS pages which can be accessed after a login carry with spring security. How can I fix it?

    How to alter css style from parent page inside an iframe using jquery

    how to define variable in less

    how to set background-image to pseudo element?

    How do you change the theme and colors of Site.Master in ASP.NET / C#?

    Links fade in when hovered - how to get them to stay opaque when their target is visible?

    How can I add to an image an HTML link using Google Chrome extension?

    background image not shown in div elements in mobile jquery

    How to code certain css shapes?

    How to add CSS AnimationEnd event handler to GWT widget?

    How to use javascript to trigger a css event for a collection of elements that have the same class/name

    Overlapping image in photoshop splice, how to float with CSS

    How to add multiple CSS classes to HTML node in Closure template (soy)?

    How do I make a line feed in a div tag?

    How to use cross domain dynamically generated CSS

    how to get this modal window to work correctly?

    Unicode down triangle doesn't show up in IE9

    Polymer 1.x: How to imperatively (using JS) obtain the value of a custom CSS property?

    How do i make my Jittery DropDown Menu stable?

    css how to align absolute positioned child element to the right of fluid width parent

    How to double an image size in HTML using only CSS?