{"id":77969,"date":"2012-05-15T12:00:37","date_gmt":"2012-05-15T16:00:37","guid":{"rendered":"http:\/\/wpmu.org\/?p=77969"},"modified":"2013-08-05T19:46:36","modified_gmt":"2013-08-05T23:46:36","slug":"embed-text-within-your-posts-with-a-showhide-link","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/embed-text-within-your-posts-with-a-showhide-link\/","title":{"rendered":"WP-ShowHide: Embed Text Within Your Posts With A Show\/Hide Link"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-77977\" title=\"WP-ShowHide: Embed Text Within Your Posts With A Show\/Hide Link\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/05\/wp-showhide-tn1.png\" alt=\"WP-ShowHide: Embed Text Within Your Posts With A Show\/Hide Link\" width=\"356\" height=\"243\" \/>If you&#8217;re an experienced WordPress user, you may have heard of <a title=\"Lester Chan\" href=\"http:\/\/www.lesterchan.net\/\" rel=\"noopener\" target=\"_blank\">Lester Chan<\/a> (otherwise known as &#8220;gamerz&#8221;). Lester is the author of no less than 19 plugins, of which 4 feature on the <a title=\"WPMU Top 100 Plugins\" href=\"https:\/\/wpmudev.com\/blog\/top-100-wordpress-plugins\/\" target=\"_blank\" rel=\"noopener\">WPMU Top 100 Plugins<\/a> list.<\/p>\n<p>That&#8217;s more than the likes of <a title=\"Yoast\" href=\"http:\/\/www.yoast.com\/\" rel=\"noopener\" target=\"_blank\">Joost de Valk<\/a>, <a title=\"Automattic\" href=\"http:\/\/www.automattic.com\/\" rel=\"noopener\" target=\"_blank\">Automattic<\/a>, or anyone else for that matter.<\/p>\n<p>I recently <a title=\"7 Million Downloads and Counting \u2013 an Interview with Lester Chan\" href=\"http:\/\/managewp.com\/plugin-developer-showcase\" rel=\"noopener\" target=\"_blank\">interviewed Lester for ManageWP<\/a>, and so had the opportunity to take a closer look at all of his plugins. One that caught my attention in particular was <a title=\"WP-ShowHide\" href=\"http:\/\/wordpress.org\/extend\/plugins\/wp-showhide\/\" rel=\"noopener\" target=\"_blank\">WP-ShowHide<\/a>. It is very simple, but what it does, it does well.<\/p>\n<p>The idea for WP-ShowHide came from the way in which <a title=\"Engadget\" href=\"http:\/\/www.engadget.com\/\" rel=\"noopener\" target=\"_blank\">Engadget<\/a> embeds press releases within posts (<a title=\"T-Mobile expands HSPA+ 42, picks LTE vendors and notches 1 million VoIP users\" href=\"http:\/\/www.engadget.com\/2012\/05\/07\/t-mobile-4g-lte-hspa-42-bobsled\/\" rel=\"noopener\" target=\"_blank\">here&#8217;s an example<\/a>). And whilst the plugin certainly <em>can<\/em> be used to present press releases in that manner, it can also be used to embed and show\/hide any form of text.<\/p>\n\n<h2>How Does It Work?<\/h2>\n<p>Using WP-ShowHide couldn&#8217;t be any simpler &#8211; just wrap the text you want to embed in [showhide][\/showhide] tags, and readers will see the following:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-77971\" title=\"WP-ShowHide\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/05\/wp-showhide.png\" alt=\"WP-ShowHide\" width=\"618\" height=\"206\" \/><\/p>\n<p>If a visitor clicks on the link, the text appears seamlessly, and the link text changes accordingly:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-77972\" title=\"WP-ShowHide\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/05\/wp-showhide-2.png\" alt=\"WP-ShowHide\" width=\"609\" height=\"330\" \/><\/p>\n<p>As you can see, I am using the trusty <a title=\"T'Lipsum Generator\" href=\"https:\/\/github.com\/tonyblundell\/tlipsum\" rel=\"noopener\" target=\"_blank\">T&#8217;Lipsum Generator<\/a>\u00a0for my dummy text (I&#8217;ll take any excuse to plug it).<\/p>\n<p>By default, the shortcode assumes that you are embedding a press release. However, you can define a few different variables from within the shortcode to control settings:<\/p>\n<ul>\n<li><strong>type<\/strong> &#8211; if you want to include more than one block of embedded text within a post, you need to name each one using this variable.<\/li>\n<li><strong>more_text<\/strong> &#8211; use this variable to define the text that is displayed when the embedded content is hidden. Include &#8220;%s&#8221; to display a word count.<\/li>\n<li><strong>less_text<\/strong>\u00a0&#8211; conversely, use this variable to define the text that is displayed when the embedded content is displayed.<\/li>\n<li><strong>hidden<\/strong>\u00a0&#8211; define as yes\/no to determine whether the embedded content is displayed or hidden (by default, it is hidden).<\/li>\n<\/ul>\n<p>Here&#8217;s an example using all of the above variables:<\/p>\n<p>{code type=&#8221;html&#8221;}<\/p>\n<p>[showhide type=&#8221;podcast&#8221; more_text=&#8221;Show Podcast Transcript (%s words)&#8221; less_text=&#8221;Hide Podcast Transcript&#8221; hidden=&#8221;yes&#8221;](Podcast Transcript)[\/showhide]<\/p>\n<p>&nbsp;<\/p>\n<p>And here is the end result:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-77973\" title=\"WP-ShowHide\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/05\/wp-showhide-3.png\" alt=\"WP-ShowHide\" width=\"583\" height=\"201\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-77974\" title=\"WP-ShowHide\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/05\/wp-showhide-4.png\" alt=\"WP-ShowHide\" width=\"612\" height=\"413\" \/><\/p>\n<p>That&#8217;s it! There are multiple potential applications for WP-ShowHide &#8211; how will you use it?<\/p>\n<p><a title=\"WP-ShowHide\" href=\"http:\/\/wordpress.org\/extend\/plugins\/wp-showhide\/\" rel=\"noopener\" target=\"_blank\">Download WP-ShowHide here<\/a>.<\/p>\n<p style=\"text-align: right;\"><em>Creative Commons image courtesy of\u00a0<a href=\"http:\/\/www.flickr.com\/photos\/iboy\/\" target=\"_blank\">Ernst Vikne<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you want to include a block of text within a post but give the user the option to hide or display it, WP-ShowHide is the perfect solution!<\/p>\n","protected":false},"author":84405,"featured_media":77977,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[4],"tags":[],"tutorials_categories":[],"class_list":["post-77969","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/77969","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/84405"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=77969"}],"version-history":[{"count":2,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/77969\/revisions"}],"predecessor-version":[{"id":198931,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/77969\/revisions\/198931"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/77977"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=77969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=77969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=77969"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=77969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}