diff --git a/README.md b/README.md
index e4de8de..8731833 100644
--- a/README.md
+++ b/README.md
@@ -10,10 +10,14 @@ A package (atleast the code) to toggle properties of tags.
## through Toggler.js CDN
Official CDN:
+
+For latest version
+
```html
```
jsDelivr:
+
```html
```
@@ -52,7 +56,7 @@ for example:
**Toggle Properties:**
-- Now toggle properties.
+- Now toggleClass() works for multiple classes.
**Syntax:**
@@ -96,19 +100,20 @@ toggler.toggleSlide('testElement2', 'vertical', 60);//toggles the slide vertical
**Note: To avoid problems use `left: 30px` or `top: 30px` instead of `margin-left: 30px` or `margin-top: 30px` because the code calculats the offset values.**
+# Improvements done
+
+- Improve toggleProperty() cause only changing when it is clicked second time at the beginning.
+
# Planned improvements
-- Upgrade Toggler so users can use class names too for toggling.
- Improve toggleSlide() for vertical toggles.
-- Improve toggleProperty() cause only changing when it is clicked second time at the beginning.
**Note: You can request some features by opening a PR or issuing a feature request through issue.**
# Optimizations:
-- Now Toggler is a class.
-- Removed `InteractionCount()` which sometimes doesn't work properly.
-- Added vertical slide support.
+- toggleClass() works even the element contains multiple classes.
+- Optimised code.
# How to download
diff --git a/Toggler.js b/Toggler.js
index 435618f..518be21 100644
--- a/Toggler.js
+++ b/Toggler.js
@@ -1,21 +1,30 @@
class Toggler {
+ //toggleClass() will toggle the provided class name and the current class name. Works for multiple classes too
toggleClass(elementId, preClass, aftClass) {
- var el = document.getElementById(`${elementId}`)
- if (el.className == `${preClass}`) {
- el.className = `${aftClass}`;
+ var el = document.getElementById(elementId)
+ const isCCGO = el.className.split(" ").length > 1 //isCCGO stands for isClassCountGreaterThanOne
+ if (el.className.includes(preClass) && !isCCGO) {
+ el.className = aftClass;
+ }
+ else if (el.className.includes(preClass) && isCCGO) {
+ var replaced = el.className.replace(preClass, '')
+ el.className = replaced + aftClass;
+ } else if (el.className.includes(aftClass) && !isCCGO) {
+ el.className = preClass;
}
- else if (el.className == `${aftClass}`) {
- el.className = `${preClass}`;
+ else if (el.className.includes(aftClass) && isCCGO) {
+ var replaced = el.className.replace(aftClass, '')
+ el.className = replaced + preClass;
}
}
+
+ //toggleImage() is the method which will toggle the src image of the image tag
toggleImage(elementId, fromImg, toImg) {
var el = document.getElementById(`${elementId}`)
- if (el.src == `${fromImg}`) {
- el.src = `${toImg}`
- console.log(`image source set to ${toImg}`)
- } else if (el.src == `${toImg}`) {
- el.src = `${fromImg}`
- console.log(`image source set to ${fromImg}`)
+ if (el.src.includes(fromImg)) {
+ el.src = toImg
+ } else if (el.src.includes(toImg)) {
+ el.src = fromImg
}
}
@@ -78,7 +87,11 @@ class Toggler {
//togglers the Property of the element with reference to the id of the element
toggleProperty(elementIdOrClass, property, fromValue, toValue) {
var el = document.getElementById(elementIdOrClass);
- if (el.style.getPropertyValue(`${property}`) == `${fromValue}`) el.style.setProperty(`${property}`, `${toValue}`)
- else el.style.setProperty(`${property}`, `${fromValue}`)
+ if (el.style.getPropertyValue(property) == null || el.style.getPropertyValue(property) == '') {
+ el.style.setProperty(property, toValue)
+ return
+ }
+ if (el.style.getPropertyValue(property) == fromValue) el.style.setProperty(property, toValue)
+ else el.style.setProperty(property, fromValue)
}
}
\ No newline at end of file