diff options
| -rw-r--r-- | README.md | 8 | ||||
| -rw-r--r-- | demo.html | 12 | ||||
| -rw-r--r-- | readmore.js | 10 |
3 files changed, 16 insertions, 14 deletions
@@ -35,11 +35,11 @@ If the element has a `max-height` CSS property, Readmore.js will use that value ### The callbacks: -The callback functions, `beforeToggle()` and `afterToggle`, both receive the same arguments: `trigger`, `element`, and `more`. +The callback functions, `beforeToggle()` and `afterToggle`, both receive the same arguments: `trigger`, `element`, and `expanded`. * `trigger`: the "Read more" or "Close" element that was clicked * `element`: the block that is being collapsed or expanded -* `more`: Boolean; `true` means the block is expanded +* `expanded`: Boolean; `true` means the block is expanded #### Callback example: @@ -47,8 +47,8 @@ Here's an example of how you could use the `afterToggle` callback to scroll back ```javascript $('article').readmore({ - afterToggle: function(trigger, element, more) { - if(! more) { // The "Close" link was clicked + afterToggle: function(trigger, element, expanded) { + if(! expanded) { // The "Close" link was clicked $('html, body').animate( { scrollTop: element.offset().top }, {duration: 100 } ); } } @@ -69,12 +69,12 @@ <h3 id="thecallbacks">The callbacks:</h3> - <p>The callback functions, <code>beforeToggle()</code> and <code>afterToggle</code>, both receive the same arguments: <code>trigger</code>, <code>element</code>, and <code>more</code>.</p> + <p>The callback functions, <code>beforeToggle()</code> and <code>afterToggle</code>, both receive the same arguments: <code>trigger</code>, <code>element</code>, and <code>expanded</code>.</p> <ul> <li><code>trigger</code>: the "Read more" or "Close" element that was clicked</li> <li><code>element</code>: the block that is being collapsed or expanded</li> - <li><code>more</code>: Boolean; <code>true</code> means the block is expanded</li> + <li><code>expanded</code>: Boolean; <code>true</code> means the block is expanded</li> </ul> <h4 id="callbackexample">Callback example:</h4> @@ -82,8 +82,8 @@ <p>Here's an example of how you could use the <code>afterToggle</code> callback to scroll back to the top of a block when the "Close" link is clicked.</p> <pre><code class="javascript">$('article').readmore({ - afterToggle: function(trigger, element, more) { - if(! more) { // The "Close" link was clicked + afterToggle: function(trigger, element, expanded) { + if(! expanded) { // The "Close" link was clicked $('html, body').animate( { scrollTop: element.offset().top }, {duration: 100 } ); } } @@ -167,8 +167,8 @@ $('#info').readmore({ moreLink: '<a href="#">More examples and options</a>', maxHeight: 390, - afterToggle: function(trigger, element, more) { - if(! more) { // The "Close" link was clicked + afterToggle: function(trigger, element, expanded) { + if(! expanded) { // The "Close" link was clicked $('html, body').animate( { scrollTop: element.offset().top }, {duration: 100 } ); } } diff --git a/readmore.js b/readmore.js index 651cb52..191fa20 100644 --- a/readmore.js +++ b/readmore.js @@ -17,6 +17,8 @@ embedCSS: true, sectionCSS: 'display: block; width: 100%;', startOpen: false, + expandedClass: 'readmore-js-expanded', + collapsedClass: 'readmore-js-collapsed', // callbacks beforeToggle: function(){}, @@ -99,13 +101,13 @@ var $this = this, newHeight = newLink = '', - more = false, + expanded = false, sliderHeight = $(element).data('sliderHeight'); if ($(element).height() == sliderHeight) { newHeight = $(element).data().boxHeight + 'px'; newLink = 'lessLink'; - more = true; + expanded = true; } else { @@ -114,11 +116,11 @@ } // Fire beforeToggle callback - $this.options.beforeToggle(trigger, element, more); + $this.options.beforeToggle(trigger, element, expanded); $(element).animate({'height': newHeight}, {duration: $this.options.speed, complete: function() { // Fire afterToggle callback - $this.options.afterToggle(trigger, element, more); + $this.options.afterToggle(trigger, element, expanded); $(trigger).replaceWith($($this.options[newLink]).on('click', function(event) { $this.toggleSlider(this, element, event) }).addClass('readmore-js-toggle')); } |