organizations sidemenu toggling

app/assets/scripts/main.js

@@ -261,4 +261,20 @@
         });
     })($);
 
+    // isolate scope for easier moving and extension
+    (function ($) {
+        if ($('.organization-list__side-menu').length) {
+            var $menuItems = $('.organization-list__side-menu .organization-list__side-menu-item');
+            $menuItems.each(function () {
+                if ($(this).find('.organization-list__side-submenu').length) {
+                    var $arrow = $('<span class="organization-list__side-menu-item-arrow"></span>');
+                    $arrow.click(function () {
+                        $(this).parent().toggleClass('active');
+                    });
+                    $(this).append($arrow);
+                }
+            });
+        }
+    })($);
+
 })(window.document, window, window.jQuery);

app/assets/styles/blocks/organization-list.scss

@@ -134,19 +134,21 @@ $organization-list-selector: 'organization-list';
             border-bottom: 1px solid #ebebeb;
             position: relative;
 
-            &:after {
-                content: url(../img/icon_leftbar_title_arrow1.png);
-                transform: rotate(90deg);
+            $menuItem: &;
+
+            &-arrow {
+                background: url(../img/blockslide_sprite.png) 0 -9px no-repeat;
                 position: absolute;
                 right: 5px;
                 top: 10px;
                 display: block;
-                height: 20px;
                 width: 15px;
-            }
+                height: 9px;
+                cursor: pointer;
 
-            &.active:after {
-                transform: rotate(-90deg);
+                #{$menuItem}.active & {
+                    background-position: 0 0;
+                }
             }
 
             &.active ul {

app/www/css/all.css

@@ -387,12 +387,12 @@ body {
     margin: 0; }
 
 .grid-disrb-col-1 {
-    width: calc(33.333333% - 10px);
+  width: calc(33.333333% - 10px);
   max-width: 230px;
   margin: 0 10px 0 0; }
 
 .grid-disrb-col-2 {
-    width: calc(66.66666% - 10px);
+  width: calc(66.66666% - 10px);
   max-width: 470px;
   margin: 0 10px 0 0; }
 
@@ -678,23 +678,27 @@ body {
 .organization-list__side-menu {
   z-index: 2;
   position: relative;
-    background: #ffffff;
-    margin-top: 3px;
+  background: #ffffff;
+  margin-top: 3px;
 }
   .organization-list__side-menu-item {
     border-bottom: 1px solid #ebebeb;
     position: relative; }
-    .organization-list__side-menu-item:after {
-      content: url(../img/icon_leftbar_title_arrow1.png);
-      transform: rotate(90deg);
+
+.organization-list__side-menu-item-arrow {
+  background: url(../img/blockslide_sprite.png) 0 -9px no-repeat;
       position: absolute;
       right: 5px;
       top: 10px;
       display: block;
-      height: 20px;
-      width: 15px; }
-    .organization-list__side-menu-item.active:after {
-      transform: rotate(-90deg); }
+  width: 15px;
+  height: 9px;
+  cursor: pointer;
+}
+
+.organization-list__side-menu-item.active .organization-list__side-menu-item-arrow {
+  background-position: 0 0;
+}
     .organization-list__side-menu-item.active ul {
       display: block; }
   .organization-list__side-menu-link {
@@ -908,8 +912,8 @@ body {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
-    flex-direction: column;
-    z-index: 2;
+  flex-direction: column;
+  z-index: 2;
 }
   .leftbar__title {
     padding-left: 58px;
@@ -927,17 +931,17 @@ body {
     font-size: 20px;
     color: #004d7b;
     font-weight: bold;
-      flex-wrap: wrap;
-      position: relative;
+    flex-wrap: wrap;
+    position: relative;
   }
     .leftbar__title--popularservice {
       padding-left: 10px;
       border-radius: 0; }
 
 .leftbar__title--popular-specializations {
-    padding-left: 10px;
-    border-radius: 0;
-    font-size: 18px;
+  padding-left: 10px;
+  border-radius: 0;
+  font-size: 18px;
 }
   .leftbar__subtitle {
     background: #d7d7d7;
@@ -1162,8 +1166,8 @@ body {
     z-index: 5;
     height: 0;
     overflow: hidden;
-      transition: all .5s ease;
-      background: #ffffff;
+    transition: all .5s ease;
+    background: #ffffff;
   }
     .specialization__list.active {
       height: auto;
@@ -1279,8 +1283,8 @@ body {
     z-index: 5;
     height: 0;
     overflow: hidden;
-      transition: all .5s ease;
-      background: #ffffff;
+    transition: all .5s ease;
+    background: #ffffff;
   }
     .popularservice__list.active {
       height: auto;
@@ -1387,10 +1391,10 @@ body {
   display: -ms-flex;
   display: flex;
   flex-direction: column;
-    margin-bottom: 20px;
-    height: 100%;
-    width: calc(100% - 10px);
-    margin-left: 10px;
+  margin-bottom: 20px;
+  height: 100%;
+  width: calc(100% - 10px);
+  margin-left: 10px;
 }
 
 .personals__link {
@@ -1456,11 +1460,11 @@ body {
 
 .personals__details {
   border: 1px solid #ebebeb;
-    border-top: none;
-    height: calc(100% - 63px);
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
+  border-top: none;
+  height: calc(100% - 63px);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
 }
   .personals__details--wide {
     min-height: 23px; }
@@ -1547,12 +1551,12 @@ body {
       background: #5597d1; }
 
 .centerbar {
-    width: 78.2%;
-    z-index: 2;
+  width: 78.2%;
+  z-index: 2;
 }
   .centerbar--with-map {
     margin-top: 300px;
-      position: relative;
+    position: relative;
   }
   @media screen and (max-width: 1220px) {
     .centerbar {
@@ -3085,15 +3089,15 @@ body {
     background: url(../img/blockslide_sprite.png) no-repeat; }
 
 .organization-info__administration-content {
-    padding-left: 10px;
+  padding-left: 10px;
 }
 
 .organization-info__sub-organizations-header {
-    font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
-    font-size: 20px;
-    font-weight: bold;
-    color: #3b434d;
-    margin-bottom: 10px;
+  font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+  font-size: 20px;
+  font-weight: bold;
+  color: #3b434d;
+  margin-bottom: 10px;
 }
 
 .organization-media__container {
@@ -3104,7 +3108,7 @@ body {
 .organization-media__header {
   color: #3b434d;
   font-size: 17px;
-    font-weight: 600;
+  font-weight: 600;
   margin-bottom: 17px; }
 
 .organization-media__list {
@@ -3114,27 +3118,27 @@ body {
   display: block; }
   .organization-media__list-item {
     margin-bottom: 3px;
-      display: block;
-      text-decoration: none;
-      color: #000000;
+    display: block;
+    text-decoration: none;
+    color: #000000;
   }
 
 .organization-media__list-item:hover {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
 .organization-media__slider {
-    margin: 0 30px 13px;
-    width: calc(100% - 60px);
+  margin: 0 30px 13px;
+  width: calc(100% - 60px);
 }
 
 .organization-media__slider-slide {
-    text-align: center;
+  text-align: center;
 }
 
 .organization-media__slider-slide-content {
-    max-width: 200px;
-    margin: 0 auto;
+  max-width: 200px;
+  margin: 0 auto;
 }
 
 .organization-media__slider .slick-arrow {
@@ -3144,46 +3148,46 @@ body {
     top: 50%;
     margin-top: -23px;
     cursor: pointer;
-    background-image: url(../img/slider/slidersprite.png);
+  background-image: url(../img/slider/slidersprite.png);
 }
 
 .organization-media__slider .slick-arrow.slick-prev {
-    background-position: left top;
-    left: -27px;
+  background-position: left top;
+  left: -27px;
 }
 
 .organization-media__slider .slick-arrow.slick-prev:hover {
-    background-position: left bottom;
+  background-position: left bottom;
 }
 
 .organization-media__slider .slick-arrow.slick-next {
-    background-position: right top;
-    right: -27px;
+  background-position: right top;
+  right: -27px;
 }
 
 .organization-media__slider .slick-arrow.slick-next:hover {
-    background-position: right bottom;
+  background-position: right bottom;
 }
 
 .specialization-selection__container {
-    background: #ffffff;
-    box-sizing: border-box;
-    width: calc(100% - 26px);
-    padding: 10px;
-    display: block;
-    column-count: 3;
-    column-gap: 10px;
+  background: #ffffff;
+  box-sizing: border-box;
+  width: calc(100% - 26px);
+  padding: 10px;
+  display: block;
+  column-count: 3;
+  column-gap: 10px;
 }
 
 .specialization-selection__container:before, .specialization-selection__container:after {
     content: '';
     display: block;
-    clear: both;
+  clear: both;
 }
 
 .specialization-selection__group {
-    margin: 5px 5px 5px 5px;
-    display: block;
+  margin: 5px 5px 5px 5px;
+  display: block;
 }
 
 .specialization-selection__group:nth-child(3n) {
@@ -3192,75 +3196,75 @@ body {
 }
 
 .specialization-selection__list {
-    max-height: 125px;
-    overflow: hidden;
-    display: block;
+  max-height: 125px;
+  overflow: hidden;
+  display: block;
 }
 
 .specialization-selection__list-item {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    padding: 5px;
+  padding: 5px;
 }
 
 .specialization-selection__list-item label {
-    display: block;
-    font-size: 13px;
-    font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
+  display: block;
+  font-size: 13px;
+  font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
 }
 
 .specialization-selection__list-item--group-header {
-    background: #ebebeb;
-    padding: 7px 5px;
+  background: #ebebeb;
+  padding: 7px 5px;
 }
 
 .specialization-selection__list-item--group-header label {
-    display: block;
-    font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
-    font-size: 17px;
+  display: block;
+  font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+  font-size: 17px;
 }
 
 .specialization-selection__checkbox {
-    -webkit-appearance: checkbox;
-    -moz-appearance: checkbox;
-    appearance: checkbox;
-    display: block;
-    width: 13px !important;
+  -webkit-appearance: checkbox;
+  -moz-appearance: checkbox;
+  appearance: checkbox;
+  display: block;
+  width: 13px !important;
 }
 
 .specialization-selection__checkbox-label {
-    display: block;
-    width: calc(100% - 13px - 5px);
-    margin-left: 5px;
+  display: block;
+  width: calc(100% - 13px - 5px);
+  margin-left: 5px;
 }
 
 .specialization-selection__select-button {
-    display: block;
-    font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
-    font-size: 17px;
-    color: #fff;
-    background-color: #004D7B;
-    width: calc(100% - 26px);
-    padding: 10px;
-    cursor: pointer;
+  display: block;
+  font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+  font-size: 17px;
+  color: #fff;
+  background-color: #004D7B;
+  width: calc(100% - 26px);
+  padding: 10px;
+  cursor: pointer;
 }
 
 .specialization-selection__select-button:hover {
-    background-color: #006dae;
+  background-color: #006dae;
 }
 
 .specialization-filter__title {
-    margin-bottom: 20px;
-    margin-top: 30px;
+  margin-bottom: 20px;
+  margin-top: 30px;
 }
 
 .specialization-filter__title:first-child {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .specialization-filter__person-link {
-    margin: 15px 0;
+  margin: 15px 0;
 }
 
 .opinion__container {
@@ -4747,7 +4751,7 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
   height: 25px;
   border: 0;
   line-height: 25px;
-    padding: 0 0 0 10px;
+  padding: 0 0 0 10px;
   font-size: 12px;
   font-family: Arial, sans-serif;
   font-weight: bold;
@@ -4769,8 +4773,8 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
   max-height: 280px;
   overflow: hidden;
   margin-left: 170px;
-    box-sizing: border-box;
-    z-index: 2;
+  box-sizing: border-box;
+  z-index: 2;
 }
 
 .date-picker-wrapper.inline-wrapper {
@@ -4826,8 +4830,8 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
   vertical-align: middle;
   text-align: center;
   line-height: 30px;
-    margin: 0;
-    padding: 2px 0;
+  margin: 0;
+  padding: 2px 0;
 }
 
 .date-picker-wrapper .month-wrapper table .day {
@@ -4928,7 +4932,7 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
 .date-picker-wrapper .gap .gap-line .gap-2 {
   position: absolute;
   right: 0;
-    top: 0;
+  top: 0;
   z-index: 2;
   height: 0;
   border-left: 8px solid transparent;
@@ -4993,7 +4997,7 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
 
 .date-picker-wrapper .drp_top-bar .apply-btn {
   position: absolute;
-    right: 0;
+  right: 0;
   top: 6px;
   padding: 3px 5px;
   margin: 0;