Hide an element using jquery/css

Question

I'm trying to hide the sidebar to a negative right (-205px) so I can get an effect where the content wrapper and sidebar move at the same time.

The problem is that the sidebar is still being shown on the right? I though I could hide it sending it "outside" the web page. I can't simply use display block none and block on the sidebar because it will not make a smooth animation

 var rightSidebarOpen = false;
    $('#toggle-right-sidebar').click(function () {
        if(rightSidebarOpen) {
            $('#sidebar-right').css('right', '-205px');
            $('.content-wrapper').css('margin-right', "0");
            $('.full-page-wrapper').css('margin-right', "0");
        }
        else {
            $('#sidebar-right').css('right', '0');
            $('.content-wrapper').css('margin-right', "205px");
            $('.full-page-wrapper').css('margin-right', "205px");
        }
        rightSidebarOpen = !rightSidebarOpen;
    });

.content-wrapper {
    background: #fff;
    min-height: 100vh;
    padding: 1rem 1.5rem 4rem;
    transition: all .7s ease;
    position: relative;
    background: black;
}

#sidebar-right {
    background: #fafafa;
    border-left: 1px solid #e5e5e5;
    width: 200px;
    height: 100%;
    position: absolute;
    top: 0;
    right: -205px;
    overflow-x: hidden;
    transition: left 1s ease;
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar-right" class="visible">
    <ul class="sidebarList">
        <li>
            
        </li>   
    </ul>
</div>


<div class="content-wrapper">
<button id="toggle-right-sidebar">CLICK ME</button>
</div>

@bowl0stu that seems to be the solution. I added to the body — user9729328
– user9729328, Commented May 2, 2018 at 15:44

bowl0stu · Accepted Answer · 2018-05-02 16:03:30Z

1

add overflow-x:hidden to your outer container

answered May 2, 2018 at 16:03

bowl0stu

3501 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ben West · Accepted Answer · 2018-05-02 15:42:15Z

1

You need to transition the right CSS property on the sidebar, because that's the one you're changing.

#sidebar-right {
    transition: right 1s ease;
}

answered May 2, 2018 at 15:42

Ben West

4,5861 gold badge19 silver badges17 bronze badges

Comments

Aryan Twanju · Accepted Answer · 2018-05-02 15:50:04Z

1

Adding correct type of transition with equal time for both #sidebar-right and .content-wrapper would solve your issue. Try this code.

.content-wrapper {
    background: #fff;
    min-height: 100vh;
    padding: 1rem 1.5rem 4rem;
    transition: all .7s ease;
    position: relative;
    background: black;
}

#sidebar-right {
    background: #fafafa;
    border-left: 1px solid #e5e5e5;
    width: 200px;
    height: 100%;
    position: absolute;
    top: 0;
    right: -205px;
    overflow-x: hidden;
    background: red;
    transition: all 0.7s ease;
}

answered May 2, 2018 at 15:50

Aryan Twanju

2,5161 gold badge13 silver badges12 bronze badges

Comments

Syneria Fana · Accepted Answer · 2018-05-02 15:53:00Z

1

#sidebar-right {
    transition: all 1s ease;
}

'all' enable to use transition on all property

answered May 2, 2018 at 15:53

Syneria Fana

15312 bronze badges

Collectives™ on Stack Overflow

Hide an element using jquery/css

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related