From 249088f3cf331356e6c9a43d052f7188888835a9 Mon Sep 17 00:00:00 2001
From: Yves Gatesoupe <yves1.gatesoupe@orange.com>
Date: Tue, 14 Feb 2017 15:18:27 +0100
Subject: [PATCH] fix(component): megamenu

open one collapse closes others
---
 docs-orange/examples/orange-news/index.html | 13 ++++++++++++-
 js/src/o-megamenu.js                        |  9 +++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/docs-orange/examples/orange-news/index.html b/docs-orange/examples/orange-news/index.html
index 611cc009a8..2d56bd6618 100644
--- a/docs-orange/examples/orange-news/index.html
+++ b/docs-orange/examples/orange-news/index.html
@@ -157,7 +157,18 @@
                                 </div>
                             </div>
                         </li>
-                        <li class="nav-item"><a class="nav-link collapsed" href="" data-toggle="collapse">Discover</a></li>
+                        <li class="nav-item">
+                          <a class="nav-link collapsed" href="#mega_level_2_collapse" data-toggle="collapse">Discover</a>
+                            <div class="mega-menu-panel collapse" id="mega_level_2_collapse">
+                                <div class="container">
+                                    <ul class="navbar-nav">
+                                        <li class="nav-item">
+                                            <a class="nav-link" href="">Test 1</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
                         <li class="nav-item"><a class="nav-link collapsed" href="" data-toggle="collapse">My Orange</a></li>
                     </ul>
                 </div>
diff --git a/js/src/o-megamenu.js b/js/src/o-megamenu.js
index cecfdecdbd..f823769dfb 100644
--- a/js/src/o-megamenu.js
+++ b/js/src/o-megamenu.js
@@ -66,6 +66,7 @@ const MegaMenu = (($) => {
       this._$goForwardLinks = $(this._element).find(Selector.MEGAMENU_NAV).prev(Selector.NAV_LINK)
       this._$goBackLinks = $(this._element).find(Selector.NAV_LINK_BACK)
       this._$topCollapseMenus = $(this._element).find(Selector.MEGAMENU_PANEL)
+      this._$navLinkCollapses = $(this._element).find(Selector.NAV_LINK_COLLAPSE)
       this._addEventListeners()
       this._addAriaAttributes(this._element)
     }
@@ -85,6 +86,7 @@ const MegaMenu = (($) => {
       this._$goBackLinks.on('click', (event) => this._goBackward(event))
       this._$navLinks.on('keydown', (event) => this._manageKeyDown(event))
       this._$topCollapseMenus.on('shown.bs.collapse', this._collapseFocus)
+      this._$navLinkCollapses.on('click', (event) => this._handleCollapseToggle(event))
     }
 
     _addAriaAttributes(element) {
@@ -148,6 +150,13 @@ const MegaMenu = (($) => {
       $(this).find(Selector.NAV_LINK).not(Selector.NAV_LINK_BACK).first().trigger('focus')
     }
 
+    _handleCollapseToggle(e){
+      const $this = $(e.target)
+      const $thisCollapse = $($this.attr('href'))
+
+      this._$topCollapseMenus.not($thisCollapse).collapse('hide')
+    }
+
     _goForward(e) {
       e.preventDefault();
       const $this = $(e.target)