diff options
| -rw-r--r-- | readmore.js | 17 |
1 files changed, 12 insertions, 5 deletions
diff --git a/readmore.js b/readmore.js index 33b2c61..b533c10 100644 --- a/readmore.js +++ b/readmore.js @@ -24,7 +24,8 @@ beforeToggle: function(){}, afterToggle: function(){} }, - cssEmbedded = {}; + cssEmbedded = {}, + uniqueIdCounter = 0; function debounce(func, wait, immediate) { var timeout; @@ -41,6 +42,11 @@ }; } + function uniqueId(prefix) { + var id = ++uniqueIdCounter; + return String(prefix == null ? 'readmore-js-' : prefix) + id; + } + function Readmore( element, options ) { this.element = element; @@ -107,11 +113,12 @@ return true; } else { + var id = current.attr('id') || uniqueId(), + useLink = $this.options.startOpen ? $this.options.lessLink : $this.options.moreLink; - var useLink = $this.options.startOpen ? $this.options.lessLink : $this.options.moreLink; - current.attr({'data-readmore-js-section': '', 'aria-expanded': false}).data('collapsedHeight', maxHeight); + current.attr({'data-readmore-js-section': '', 'aria-expanded': false, 'id': id}).data('collapsedHeight', maxHeight); - current.after($(useLink).on('click', function(event) { $this.toggleSlider(this, current, event) }).attr('data-readmore-js-toggle', '')); + current.after($(useLink).on('click', function(event) { $this.toggleSlider(this, current, event) }).attr({'data-readmore-js-toggle': '', 'aria-controls': id})); if(!$this.options.startOpen) { current.css({height: maxHeight}); @@ -158,7 +165,7 @@ $(this).attr('aria-expanded', expanded); }); - $trigger.replaceWith($($this.options[newLink]).on('click', function(event) { $this.toggleSlider(this, element, event) }).attr('data-readmore-js-toggle', '')); + $trigger.replaceWith($($this.options[newLink]).on('click', function(event) { $this.toggleSlider(this, element, event) }).attr({'data-readmore-js-toggle': '', 'aria-controls': $element.attr('id')})); }, setBoxHeight: function(element) { |