Skip to content

Commit fa89438

Browse files
committed
now will close open accordions when you click a different nav menu which closes #104
1 parent d5c7f19 commit fa89438

File tree

2 files changed

+31
-2
lines changed

2 files changed

+31
-2
lines changed

CHANGELOG

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
THIS CHANGELOG IS AN ATTEMPT TO DOCUMENT CHANGES TO THIS PROJECT.
22

3+
PL-node-v0.8.2
4+
- FIX: Added grunt-contrib-copy args to copy all found source/css/*.css
5+
- ADD: Added upgrade instructions to README
6+
- FIX: Fix issue with styleguide accordions not closing upon click of a sibling menu.
7+
- THX: @getsetbro for reporting more issues :)
8+
39
PL-node-v0.8.1
410
- FIX: v8 is not pulling in values from global data.json
511
- FIX: MQ list breaks if media queries don't have spaces

public/styleguide/js/styleguide.js

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,40 @@
1919
$(w).resize(function(){ //Update dimensions on resize
2020
sw = document.body.clientWidth;
2121
sh = document.body.clientHeight;
22+
23+
setAccordionHeight();
2224
});
2325

2426
/* Pattern Lab accordion dropdown */
27+
// Accordion dropdown
2528
$('.sg-acc-handle').on("click", function(e){
26-
var $this = $(this),
27-
$panel = $this.next('.sg-acc-panel');
2829
e.preventDefault();
30+
31+
var $this = $(this),
32+
$panel = $this.next('.sg-acc-panel'),
33+
subnav = $this.parent().parent().hasClass('sg-acc-panel');
34+
35+
//Close other panels if link isn't a subnavigation item
36+
if (!subnav) {
37+
$('.sg-acc-handle').not($this).removeClass('active');
38+
$('.sg-acc-panel').not($panel).removeClass('active');
39+
}
40+
41+
//Activate selected panel
2942
$this.toggleClass('active');
3043
$panel.toggleClass('active');
44+
setAccordionHeight();
3145
});
3246

47+
//Accordion Height
48+
function setAccordionHeight() {
49+
var $activeAccordion = $('.sg-acc-panel.active').first(),
50+
accordionHeight = $activeAccordion.height(),
51+
availableHeight = sh-$headerHeight; //Screen height minus the height of the header
52+
53+
$activeAccordion.height(availableHeight); //Set height of accordion to the available height
54+
}
55+
3356
$('.sg-nav-toggle').on("click", function(e){
3457
e.preventDefault();
3558
$('.sg-nav-container').toggleClass('active');

0 commit comments

Comments
 (0)