Welcome to Dagon Design. In addition to free scripts, WordPress plugins, and articles, we offer a variety of services including custom theme design, plugin creation, and PHP scripting. Contact me for more information.

Version 1.2   Updated Thursday, February 19th, 2009 at 7:19pm

Expanding Text plugin for WordPress

This WordPress plugin allows you to create sections of text in your post or page which expand/collapse when clicked on. You simply wrap the special tags around your text, and set the ‘expand link’ (the link visitors click on to show the text). If your visitors do not have javascript enabled, the ‘expand link’ is not shown, and the text is displayed normally.

Download

  If you have found this page useful, please consider donating. Thanks!

Change Log

  • 02-19-09 Version 1.2 – Changed wrapper tags *must change existing links when updating!* Fixed validation errors, and issues switching between code and html view
  • 10-09-08 Version 1.1 – Now works properly when the exact same expanding text is used more than once on the page
  • 08-14-08 Version 1.0 – First release

Installing

  • Download the above file, rename it from .txt to .php, and upload it to your plugins directory.
  • Enable the plugin.
  • Optional: Add the CSS to your theme’s style sheet to make it look nice (see the customization section below).

Usage

To make your text expand/collapse, use the following format in your post or page:

Important: Make sure you add this using the html/code editor in WordPress, not the visual editor. In new versions of WordPress, just click the ‘html’ button above the edit box. If you use the visual editor it will not work, as the actual code you entered will be seen on the page, instead of being processed by the script.

Notice: If upgrading from version 1.1, make sure you change your existing code to match the examples below. The tags have been changed to cause less issues.

[DDET (expand link text)]
(Text to expand)
[/DDET]

Example:

[DDET Click to expand!]
Here is your text!
[/DDET]

You can add as many sections of expanding text as you like.

Demo

Here you can see the plugin in action:

Here is your text! Here is your text! Here is your text! Here is your text! Here is your text! Here is your text! Here is your text! Here is your text! Here is your text! Here is your text! Here is your text! Here is your text! Here is your text! Here is your text! Here is your text! Here is your text! Here is your text! Here is your text! Here is your text! Here is your text!

Customization

To style the expanding text boxes, you must add the .ddet_div class to your theme’s css file. Here is an example:

.ddet_div {
  margin: 8px 0 0 12px;
  padding: 8px;
  background: #F4F4F4;
  border: 1px solid #DDDDDD;
}

Pages: « 9 8 7 6 5 [4] 3 2 1 » Show All

  1. 60
    Nick Bostic
    2-21-09 8:48PM

    Is there a way to make it so the link to make the text expand doesn’t show in RSS feeds, but the hidden text itself does? Otherwise, an awesome plugin, thank you.

  2. 59
    Admin
    2-19-09 9:23PM

    Version 1.2 Released

    The tags to use this plugin have been updated to ensure html validity. This means that if you upgrade from 1.1, you must change any existing tags for this plugin to work. Brackets are now used instead of greater than/less than signs.

    This should also fix the issue when switching between code and html views, although you should still use the code view to enter the tags.

    This version has been tested in the latest version of WordPress (2.7.1)

    Enjoy!

  3. 58
    Yousef
    2-16-09 10:07AM

    Will there be a version for Wordpress 2.7?

  4. 57
    Magnus
    2-13-09 3:56AM

    Thanks for a great plugin! Just what I was looking for. However, I have a problem with Firefox and Camino (based on Firefox). In those browsers, the page is distorted when using this plugin. The “hidden” text is shown and my menu is “destroyed” so that the page is unusable. The plugin works fine in Internet Explorer and Safari with the same page.

    I read that you’ve tried it in Firefox, but have you tried it in the newest version? I guess it has something to do with how Firefox handles JavaScript. Any ideas? A solution to this would be great! Thanks!

  5. 56
    shalako
    1-16-09 2:35PM

    One more issue:

    When I have multiple expanding text blocks, one after the other, the first one adds a large margin before the second. This behavior persists after changing the order, playing with spacing, carriage returns, etc.

    Example:

    Linked Text 1

    Linked Text 2
    Linked Text 3
    Linked Text 4
    Linked Text 5

  6. 55
    shalako
    1-16-09 2:32PM

    I was looking for a simple plugin that would enable expand/collapse text blocks with the simple use of quicktags in posts, but this plugin is a bit limiting.

    Requests:
    1. Because the linked text is inside the markup tag, it isn’t clear how to add styling to the linked text. Plugin ought to be compatible with standard text markup, possibly by moving linked text out of the brackets and into it’s own tag?
    2. Would be great to have an admin screen for setting the text (+/-), images, and/or styling for the linked text and how they change upon expand/collapse.

  7. 54
    Copernicus
    1-9-09 9:35PM

    Hi there,

    First off, to Dagon Design, thanks for the great plugin!

    Second, to those experiencing the “code stripping” issue…

    I’ve been working with this plugin and have been frustrated by the WYSIWYG editor stripping out the required DDET tags.

    So, I edited the plugin file itself and resolved this issue by changing the normal tag brackets (the “greater than” and “less than” symbols) to be “[" and "]” in the following manner:

    Line 27:
    I changed $stag = '<DDET '; to read
    $stag = '[DDET ';

    Line 28:
    I changed $etag = '</DDET>'; to read
    $etag = '[/DDET]';

    Line 36:
    I changed $ds = stripos($content, '>', $s) + 1;
    to read
    $ds = stripos($content, ']', $s) + 1;

    In case any of the above text & code got messed up in this comment submission, I’ve pasted a modified version of the code at
    http://pastebin.com/f23bbf348 (NOTE: I made the version 1.1b to differentiate from the v1.1 code)

    Good luck everyone!

  8. 53
    The Moderator
    1-4-09 3:43PM

    In fact, now that I think about it, maybe the text to be displayed in the tag could be moved to the Settings page in the admin screens?

    Text to include: ______________
    Then tie that into the $sdesc in the plugin …

    Hmmm

  9. 52
    The Moderator
    1-4-09 3:38PM

    Try this again …

    BTW, to include an image, or to make all of your links say the same thing, edit the plugin.

    Look for this line:
    $new_string .= $sdesc . '</a>' . "\n";
    and add your text or image link before the </a>. But keep the single quotes ‘{your text here}</a>‘
    Then you’ll need to leave a space in the ddet tag: <ddet >
    There you go!

  10. 51
    The Moderator
    1-4-09 3:36PM

    The answer to the disappearing tag is really quite simple:
    Don’t use the visual editor. Nyuk nyuk nyuk.

    It’s like going into the doctor and saying, “Hey doc, it hurts when I do THIS.”
    The doctor will tell you, “Then don’t do THAT.”

    What I’m looking for is a way to change an image depending on whether the expanded text is being displayed or it is hidden.

    I have the images loaded already, but I can’t figure out where the check state is for the displayed text. I’m no js whiz (in case you couldn’t tell).

    BTW, to include an image, or to make all of your links say the same thing, edit the plugin.

    Look for this line:
    $new_string .= $sdesc . ‘‘ . “\n”;
    and add your text or image link before the . But keep the single quotes ‘{your text here}‘
    Then you’ll need to leave a space in the ddet tag:
    There you go!

  11. 50
    JAY
    1-3-09 9:40AM

    is it possible to expanding the text and as well opening a website when clicking on it?

    thanks

  12. 49
    JAY
    1-3-09 9:32AM

    Is it possible if someone click on it and it will show the text and also in the same time, open a website?

    please tell me how. i tried like

    Here is your text!

    above code is not working. anyone have any idea? I really need this help.

    thanks

  13. 48
    Casey
    12-31-08 3:09PM

    Will you be changing this plugin to use shortcodes? (like mentioned in a previous comment above)… I don’t use visual mode but some authors do…

    PS. Would love to see you develop a newletter type plugin. There’s only one (really) out there and it is not supported by its author, even though it is a commercial plugin. I bet you could do a bang up job! (I’ll volunteer to beta test for you!)

  14. 47
    Sumit
    12-29-08 2:59PM

    Nice to find out this plugin i would like to ask if we can use in visual editor too its disappers but
    really thanks for this even..

  15. 46
    Liz
    12-26-08 9:45PM

    Hi, This will be a wonderful plugin if it can get up and running. A few people have also had the problem of the code disappearing between visual and html mode. Is there a solution to this?

Pages: « 9 8 7 6 5 [4] 3 2 1 » Show All

Leave a Comment

Before you comment: If you are having an issue with a script, please make sure you have read the entire article. Also, please read through the comments because most common issues have already been discussed many times. Thanks.


Be sure to wrap all code in <code></code> tags.