CODEWITHSUNDEEP
jquerycss
Eleanor Zimmermann
Eleanor Zimmermann

Reputation: 432

Slide toggle when click action is switching the class between 'closed' and 'open'

I've inherited some code which displays a sidebar in one of two css states, as either 

class = 'closed';

or,

class = 'open';

The logic being that it is flipping on and off

display: none;

I am now tasked with having a slide effect, rather than just a straight display on/off;

I'm trying to think of how I can rewire it such that there is some sort of slide toggle associated with that click, given that the prior logic was a simple change of class names.

Any ideas on how to implement this, given that there is a prior infrastructure built around those class states, that I'd like to avoid trashing altogether.

edit: I should clarify, I am generally familiar with JQuery and its animation functions, but I am wondering if they can live in the same space with a customized on/off switch and whether have 2 functions affecting visibility is bad practice

Upvotes: 0

Views: 179

Answers (2)

Iman Mohamadi
Iman Mohamadi

Reputation: 6829

You can use jQuery to do that for you. There is slideDown slideUp and slideToggle available. You can also use css3 properties and just switch classes.

jQuery approach http://jsfiddle.net/zapcfd0k/

$('#sidebar').slideToggle();

CSS3 and pure JavaScript http://jsfiddle.net/9q5beqh8/

#sidebar {
    background-color: #4679BD;
    height: 500px;
}
.open {
    width: 200px;
    transition: width 500ms;
}
.closed {
    width: 0;
    transition: width 500ms;
}

setInterval(function () {
  toggleSideMenu();
}, 3000);

function toggleSideMenu() {
    var sideBar = document.querySelector('#sidebar');
    var className = sideBar.className || 'open';
    if (className === 'open') 
        sideBar.className = 'closed';
    else 
        sideBar.className = 'open';
}

Upvotes: 0

BReal14
BReal14

Reputation: 1584

jQuery has a slidetoggle method that does exactly this.

http://api.jquery.com/slidetoggle/

Upvotes: 2

Related Questions