diff --git a/dev/js/spec/panelSpec.js b/dev/js/spec/panelSpec.js
index 007b43c..fb2008f 100644
--- a/dev/js/spec/panelSpec.js
+++ b/dev/js/spec/panelSpec.js
@@ -195,5 +195,44 @@
       expect(result.element().querySelector('#koralquery')).toBeFalsy();
       expect(show["kq"]).toBeFalsy();
     });
+
+    it('should open toggler', function () {
+      const show = {};
+
+      const div = document.body.addE("div");
+      div.setAttribute("id","search");
+      const ol = div.addE("ol");
+      ol.classList.add("align-left");
+
+      const result = resultClass.create(show);
+
+      result.addAlignAction();
+
+      const b = result.element().lastChild.firstChild;
+
+      expect(b.textContent).toEqual("toggle alignment");
+      expect(b.classList.contains('right')).toBeTruthy();
+      expect(ol.classList.contains('align-left')).toBeTruthy();
+
+      b.click();
+
+      expect(b.textContent).toEqual("toggle alignment");
+      expect(b.classList.contains('center')).toBeTruthy();
+      expect(ol.classList.contains('align-right')).toBeTruthy();
+
+      b.click();
+
+      expect(b.textContent).toEqual("toggle alignment");
+      expect(b.classList.contains('left')).toBeTruthy();
+      expect(ol.classList.contains('align-center')).toBeTruthy();
+
+      b.click();
+
+      expect(b.textContent).toEqual("toggle alignment");
+      expect(b.classList.contains('right')).toBeTruthy();
+      expect(ol.classList.contains('align-left')).toBeTruthy();
+
+      document.body.removeChild(div);
+    });
   });
 });
diff --git a/dev/js/src/panel/result.js b/dev/js/src/panel/result.js
index 2bb647a..1626a95 100644
--- a/dev/js/src/panel/result.js
+++ b/dev/js/src/panel/result.js
@@ -16,6 +16,8 @@
   const loc = KorAP.Locale;
   loc.TOGGLE_ALIGN = loc.TOGGLE_ALIGN || 'toggle alignment';
   loc.SHOW_KQ      = loc.SHOW_KQ      || 'show KoralQuery';
+
+  const aRoll = ['left', 'right','center'];
   
   return {
     create : function (opened) {
@@ -88,23 +90,19 @@
        * Toggle the alignment (left <=> right)
        */
       this.actions.add(loc.TOGGLE_ALIGN, {'cls':['align','right','button-icon']}, function (e) {
-        const olCl = d.querySelector('#search > ol').classList;
-        if (olCl.contains('align-left')) {
-          olCl.remove('align-left');
-          olCl.add('align-right');
-          this.button.toggleClass("right", "center");
-        }
-        else if (olCl.contains('align-right')) {
-          olCl.remove('align-right');
-          olCl.add('align-center');
-          this.button.toggleClass("center", "left");
-        }
-        else if (olCl.contains('align-center')) {
-          olCl.remove('align-center');
-          olCl.add('align-left');
-          this.button.toggleClass("left", "right");
-        };        
-      });
+        var olCl = d.querySelector('#search > ol').classList;
+
+        aRoll.find(function(align, i) {
+          if (olCl.contains('align-' + align)) {
+            const n  = i >= 2 ? 0 : i+1;
+            const nn = n >= 2 ? 0 : n+1;
+            olCl.remove('align-' + align);
+            olCl.add('align-' + aRoll[n]);
+            this.button.toggleClass(aRoll[n], aRoll[nn]);
+            return true;
+          };
+        }, this);
+      });    
     }
   }
 });