JQuery toggle without inline CSS (slide left)

Question

I have a sidebar on my website which I hide on a click with.

$('#sidebar').toggle('slide', 'left', 300)

I also have a CSS style which hides this sidebar mobiles.

#sidebar {
    display: none;
}

/* if screen size gets wider than 768 */
@media screen and (min-width:768px) {
    #sidebar {
        display: block;
    }
}

However these 2 don't work together very well because .toggle() uses inline CSS. Is there any way to make .toggle() use an inline style? Or would there be a better solution to this.

Thanks! Thomas

Yes, but this always shows the sidebar even when I use .toggle() to hide it. Unless I'm missing something? — Schoof
– Schoof, Commented Jul 27, 2016 at 7:10
When do you want it to show, and when do you want it hidden? — kevmc
– kevmc, Commented Jul 27, 2016 at 7:44
Default it's shown (so the #sidebar has a display: block). When you click on a link it's hidden, when you click on it again it's shown etc. — Schoof
– Schoof, Commented Jul 27, 2016 at 7:48
There's no real problem there (though you might want to change it to 767px for max-width), some purists would tell you that it breaks the 'mobile first' principle, but unless you fancy rewriting jQuery.toggle() you do what you gotta. — kevmc
– kevmc, Commented Jul 27, 2016 at 8:05

SteinB · Accepted Answer · 2016-07-27 08:02:16Z

1

Do it with classes and toggle that class. Now it will work together because it doesnt matter if the sidebar is open.

CSS:

#sidebar {
    display: none;
    -webkit-transform: translate(-300px, 0px);
    -ms-transform: translate(-300px, 0px);
    transform: translate(-300px, 0px);
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    transition: all 1s;
}
#sidebar.open {
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}

/* if screen size gets wider than 768 */
@media screen and (min-width:768px) {
    #sidebar {
        display: block;
    }
}

Also when using animations to open something. Use transform for browser optimization.

jQuery:

$('#sidebar').toggleClass('open')

answered Jul 27, 2016 at 8:02

SteinB

1521 silver badge11 bronze badges

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

10 Comments

Schoof Over a year ago

Thanks! This seems to have nearly gotten it working but the sidebar stays hidden when I put display: none on it. When this isn't on there it works but the div is not removed from the DOM.

SteinB Over a year ago

Can you try display: block !important; ?

Schoof Over a year ago

It works, but then the div isn't removed from the DOM (which I need). I realise this is a harder matter it seems.

SteinB Over a year ago

If you mean removed, like delete the html. You cant do that with css. thats only possible with javascript/jquery. $('#sidebar').remove();

SteinB Over a year ago

You can detect it the screensize by jquery and then delete it if that is what you want

|

Collectives™ on Stack Overflow

JQuery toggle without inline CSS (slide left)

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related