{"id":286,"date":"2010-08-29T22:19:34","date_gmt":"2010-08-29T11:19:34","guid":{"rendered":"http:\/\/xhva.net\/log\/?p=286"},"modified":"2010-08-31T01:11:28","modified_gmt":"2010-08-30T14:11:28","slug":"jquery-article-expander-plugin-v1-0","status":"publish","type":"post","link":"https:\/\/xhva.net\/log\/2010\/08\/jquery-article-expander-plugin-v1-0\/","title":{"rendered":"jQuery Article Expander plugin v1.0"},"content":{"rendered":"<p><a href=\"http:\/\/xhva.net\/work\/jqae\/jqae_integrated_demo.html\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/xhva.net\/log\/wp-content\/uploads\/2010\/08\/Untitled-1.jpg\" alt title=\"jQuery Article Expander - Integrated demo\" width=\"200\" height=\"174\" class=\"right size-full wp-image-297\"><\/a>Ear\u00adli\u00ader this week a friend and I dis\u00adcussed using JavaScript to col\u00adlapse and expand news arti\u00adcles to reduce page loads, so I played with a snip\u00adpet of code over the week\u00adend and then turned it into a jQuery plu\u00adg\u00adin. It was fun get\u00adting my hands dirty with jQuery again \u2014 I\u2019d for\u00adgot\u00adten how con\u00adcise and beau\u00adti\u00adful the code can&nbsp;be.<\/p>\n<h4>See the&nbsp;demos<\/h4>\n<ul>\n<li><a href=\"http:\/\/xhva.net\/work\/jqae\/jqae_basic_demo.html\">Basic demo: get start\u00aded&nbsp;here<\/a><\/li>\n<li><a href=\"http:\/\/xhva.net\/work\/jqae\/jqae_options_demo.html\">Options demo: cus\u00adtomis\u00ading the plugin<\/a><\/li>\n<li><a href=\"http:\/\/xhva.net\/work\/jqae\/jqae_integrated_demo.html\">Inte\u00adgrat\u00aded demo: see it used in a real layout<\/a><\/li>\n<\/ul>\n<h4>Installing and basic&nbsp;usage<\/h4>\n<ol>\n<li>Down\u00adload <a href=\"http:\/\/jquery.com\/\">jQuery<\/a> and save it into the fold\u00ader con\u00adtain\u00ading your oth\u00ader web\u00adsite&nbsp;files.<\/li>\n<li>Down\u00adload <a href=\"http:\/\/xhva.net\/work\/jqae\/jquery.articleexpander.1.0.zip\">jquery.articleexpander.1.0.zip<\/a> and extract the JS &amp; CSS files into the fold\u00ader&nbsp;above.<\/li>\n<li>\n\t\tInsert the fol\u00adlow\u00ading lines into the &lt;head&gt; sec\u00adtion of your HTML&nbsp;file:\n<pre>\n&lt;script type=\"text\/javascript\" src=\"jquery.js\"&gt;&lt;\/script&gt;\n&lt;script type=\"text\/javascript\" src=\"jquery.articleexpander.1.0.minified.js\"&gt;&lt;\/script&gt;\n&lt;link type=\"text\/css\" rel=\"stylesheet\" href=\"jquery.articleexpander.1.0.css\"&gt;\n&lt;script type=\"text\/javascript\"&gt;\n    $(function() {\n        $(\".article\").articleExpander();\n    });\n&lt;\/script&gt;\n\t\t<\/pre>\n<\/li>\n<li>Change the <kbd>jquery.js<\/kbd> ref\u00ader\u00adence in the code above to match your jquery file\u2019s filename.<\/li>\n<li>\n\t\tWrite your news arti\u00adcles, blog posts or what\u00adev\u00ader to use this HTML structure:\n<pre>\n&lt;div class=\"article\"&gt;\n    &lt;h2&gt;Article Heading 1&lt;\/h2&gt;\n    &lt;div&gt;\n        &lt;p&gt;The first line of your article content.&lt;\/strong&gt;&lt;\/p&gt;\n        &lt;p&gt;The second line of your article content.&lt;\/strong&gt;&lt;\/p&gt;\n        &lt;p&gt;The nth line of your article content.&lt;\/strong&gt;&lt;\/p&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n\t\t<\/pre>\n<\/li>\n<li>See if it&nbsp;works&nbsp;:)<\/li>\n<\/ol>\n<h4>Changing options and using different HTML structures<\/h4>\n<p>Like most jQuery addons, this one lets you change options with a JS object passed to the plu\u00adg\u00adin. For exam\u00adple, the code below cus\u00adtomis\u00ades the expand and col\u00adlapse text while mak\u00ading the ani\u00adma\u00adtion a lit\u00adtle faster:<\/p>\n<pre>\n    &lt;script type=\"text\/javascript\"&gt;\n        $(function() {\n            $(\".article\").articleExpander({\n               expandText: \"See more\",\n               collapseText: \"See less\",\n               speedInMilliseconds: 1000\n            });\n        });\t\t\n    &lt;\/script&gt;\n<\/pre>\n<h4>The full list of the options<\/h4>\n<dl>\n<dt>expand\u00adText<\/dt>\n<dd>The text shown in the \u2018read more\u2019 but\u00adton when the arti\u00adcle is collapsed.<\/dd>\n<dt>col\u00adlapse\u00adText<\/dt>\n<dd>The text shown in the \u2018read more\u2019 but\u00adton when the arti\u00adcle is expanded.<\/dd>\n<dt>head\u00adingS\u00ade\u00adlec\u00adtor<\/dt>\n<dd>The CSS selec\u00adtor used to find the head\u00ading ele\u00adment inside the arti\u00adcle. The selec\u00adtor is rel\u00ada\u00adtive to the arti\u00adcle element.<\/dd>\n<dt>con\u00adtentS\u00ade\u00adlec\u00adtor<\/dt>\n<dd>The CSS selec\u00adtor used to find the con\u00adtent ele\u00adment inside the arti\u00adcle. Note the selec\u00adtor is rel\u00ada\u00adtive to the arti\u00adcle element.<\/dd>\n<dt>head\u00adingClick\u00adable<\/dt>\n<dd>If true, the arti\u00adcle head\u00ading can be clicked to trig\u00adger the expand\/collapse.<\/dd>\n<dt>con\u00adtentClick\u00adable<\/dt>\n<dd>If true, the arti\u00adcle con\u00adtent can be clicked to trig\u00adger the expand\/collapse. Note this will get in the way of copy\/paste oper\u00ada\u00adtions and pos\u00adsi\u00adbly&nbsp;links.<\/dd>\n<dt>speed\u00adIn\u00adMil\u00adlisec\u00adonds<\/dt>\n<dd>The length of time the ani\u00adma\u00adtion takes to exe\u00adcute. 1000 mil\u00adlisec\u00adonds = 1 second.<\/dd>\n<dt>cur\u00adsor<\/dt>\n<dd>The mouse cur\u00adsor shown when hov\u00ader\u00ading over click\u00adable head\u00adings and content.<\/dd>\n<\/dl>\n<h4>A full config example<\/h4>\n<pre>\n    &lt;script type=\"text\/javascript\"&gt;\n        $(function() {\n            $(\".article\").articleExpander({\n                expandText: \"&amp;raquo; Read more\",\n                collapseText: \"&amp;laquo; Collapse article\",\n                headingSelector: \"&gt; div gt; :first-child\",\n                contentSelector: \"&gt; div gt; div\",\n                headingClickable: true,\n                contentClickable: true,\n                speedInMilliseconds: 300,\n                cursor: 'pointer'\n            });\n        });\t\t\n    &lt;\/script&gt;\n<\/pre>\n<h4>Licensing, feedback and modifications<\/h4>\n<p>jQAE is dual licensed under the MIT or GPL Ver\u00adsion 2 licens\u00ades, like jQuery itself. This leaves your options for re-use pret\u00adty&nbsp;open.<\/p>\n<p>Feed\u00adback and com\u00adments are wel\u00adcome; patch\u00ades and improve\u00adments even more so! Thanks for your interest.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ear\u00adli\u00ader this week a friend and I dis\u00adcussed using JavaScript to col\u00adlapse and expand news arti\u00adcles to reduce page loads, so I played with a snip\u00adpet of code over the week\u00adend and then turned it into a jQuery plu\u00adg\u00adin. It was fun get\u00adting my hands dirty with jQuery again \u2014 I\u2019d for\u00adgot\u00adten how con\u00adcise&nbsp;and&nbsp;[\u2026]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wp_typography_post_enhancements_disabled":false,"ngg_post_thumbnail":0},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/xhva.net\/log\/wp-json\/wp\/v2\/posts\/286"}],"collection":[{"href":"https:\/\/xhva.net\/log\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xhva.net\/log\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xhva.net\/log\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xhva.net\/log\/wp-json\/wp\/v2\/comments?post=286"}],"version-history":[{"count":14,"href":"https:\/\/xhva.net\/log\/wp-json\/wp\/v2\/posts\/286\/revisions"}],"predecessor-version":[{"id":301,"href":"https:\/\/xhva.net\/log\/wp-json\/wp\/v2\/posts\/286\/revisions\/301"}],"wp:attachment":[{"href":"https:\/\/xhva.net\/log\/wp-json\/wp\/v2\/media?parent=286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xhva.net\/log\/wp-json\/wp\/v2\/categories?post=286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xhva.net\/log\/wp-json\/wp\/v2\/tags?post=286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}