I'm looking for a way to convert this jQuery code (which is used in responsive menu section) to pure JavaScript.
If it's hard to implement it's OK to use other JavaScript frameworks.
$('.btn-navbar').click(function()
{
$('.container-fluid:first').toggleClass('menu-hidden');
$('#menu').toggleClass('hidden-phone');
if (typeof masonryGallery != 'undefined')
masonryGallery();
});
This question is related to
javascript
dom
toggle
If you want to toggle a class to an element using native solution, you could try this suggestion. I have tasted it in different cases, with or without other classes onto the element, and I think it works pretty much:
(function(objSelector, objClass){
document.querySelectorAll(objSelector).forEach(function(o){
o.addEventListener('click', function(e){
var $this = e.target,
klass = $this.className,
findClass = new RegExp('\\b\\s*' + objClass + '\\S*\\s?', 'g');
if( !findClass.test( $this.className ) )
if( klass )
$this.className = klass + ' ' + objClass;
else
$this.setAttribute('class', objClass);
else
{
klass = klass.replace( findClass, '' );
if(klass) $this.className = klass;
else $this.removeAttribute('class');
}
});
});
})('.yourElemetnSelector', 'yourClass');
I know that I am late but, I happen to see this and I have a suggestion.. For those looking for cross-browser support, I wouldn't recommend class toggling via JS. It may be a little more work but it is more supported through all browsers.
document.getElementById("myButton").addEventListener('click', themeswitch);
function themeswitch() {
const Body = document.body
if (Body.style.backgroundColor === 'white') {
Body.style.backgroundColor = 'black';
} else {
Body.style.backgroundColor = 'white';
}
}
_x000D_
body {
background: white;
}
_x000D_
<button id="myButton">Switch</button>
_x000D_
Here is solution implemented with ES6
const toggleClass = (el, className) => el.classList.toggle(className);
usage example
toggleClass(document.querySelector('div.active'), 'active'); // The div container will not have the 'active' class anymore
Take a look at this example: JS Fiddle
function toggleClass(element, className){
if (!element || !className){
return;
}
var classString = element.className, nameIndex = classString.indexOf(className);
if (nameIndex == -1) {
classString += ' ' + className;
}
else {
classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length);
}
element.className = classString;
}
don't need regex just use classlist
var id=document.getElementById('myButton');
function toggle(el,classname){
if(el.classList.contains(classname)){
el.classList.remove(classname)
}
else{
el.classList.add(classname)
}
}
id.addEventListener('click',(e)=>{
toggle(e.target,'red')
})
_x000D_
.red{
background:red
}
_x000D_
<button id="myButton">Switch</button>
_x000D_
Simple Usage above Example
var id=document.getElementById('myButton');
function toggle(el,classname){
el.classList.toggle(classname)
}
id.addEventListener('click',(e)=>{
toggle(e.target,'red')
})
_x000D_
.red{
background:red
}
_x000D_
<button id="myButton">Switch</button>
_x000D_
2014 answer: classList.toggle()
is the standard and supported by most browsers.
Older browsers can use use classlist.js for classList.toggle():
var menu = document.querySelector('.menu') // Using a class instead, see note below.
menu.classList.toggle('hidden-phone');
As an aside, you shouldn't be using IDs (they leak globals into the JS window
object).
Here is a code for IE >= 9 by using split(" ") on the className :
function toggleClass(element, className) {
var arrayClass = element.className.split(" ");
var index = arrayClass.indexOf(className);
if (index === -1) {
if (element.className !== "") {
element.className += ' '
}
element.className += className;
} else {
arrayClass.splice(index, 1);
element.className = "";
for (var i = 0; i < arrayClass.length; i++) {
element.className += arrayClass[i];
if (i < arrayClass.length - 1) {
element.className += " ";
}
}
}
}
This is perhaps more succinct:
function toggle(element, klass) {
var classes = element.className.match(/\S+/g) || [],
index = classes.indexOf(klass);
index >= 0 ? classes.splice(index, 1) : classes.push(klass);
element.className = classes.join(' ');
}
This one works in earlier versions of IE also.
function toogleClass(ele, class1) {_x000D_
var classes = ele.className;_x000D_
var regex = new RegExp('\\b' + class1 + '\\b');_x000D_
var hasOne = classes.match(regex);_x000D_
class1 = class1.replace(/\s+/g, '');_x000D_
if (hasOne)_x000D_
ele.className = classes.replace(regex, '');_x000D_
else_x000D_
ele.className = classes + class1;_x000D_
}
_x000D_
.red {_x000D_
background-color: red_x000D_
}_x000D_
div {_x000D_
width: 100px;_x000D_
height: 100px;_x000D_
margin-bottom: 10px;_x000D_
border: 1px solid black;_x000D_
}
_x000D_
<div class="does red redAnother " onclick="toogleClass(this, 'red')"></div>_x000D_
_x000D_
<div class="does collapse navbar-collapse " onclick="toogleClass(this, 'red')"></div>
_x000D_
Try this (hopefully it will work):
// mixin (functionality) for toggle class
function hasClass(ele, clsName) {
var el = ele.className;
el = el.split(' ');
if(el.indexOf(clsName) > -1){
var cIndex = el.indexOf(clsName);
el.splice(cIndex, 1);
ele.className = " ";
el.forEach(function(item, index){
ele.className += " " + item;
})
}
else {
el.push(clsName);
ele.className = " ";
el.forEach(function(item, index){
ele.className += " " + item;
})
}
}
// get all DOM element that we need for interactivity.
var btnNavbar = document.getElementsByClassName('btn-navbar')[0];
var containerFluid = document.querySelector('.container-fluid:first');
var menu = document.getElementById('menu');
// on button click job
btnNavbar.addEventListener('click', function(){
hasClass(containerFluid, 'menu-hidden');
hasClass(menu, 'hidden-phone');
})`enter code here`
Source: Stackoverflow.com