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: « 15 … 11 10 9 8 7 6 5 4 3 [2] 1 » Show All

  1. 30
    Kjetil
    10-15-08 5:24PM

    For the question B) what I need a beginner’s tip on is how to set the style selector in my style sheet.
    I’d like eg the h2 tag to appear so and so when inside the .ddet_div – as you’ve described for styling.
    My guess would be something like 

    .ddet_div h2{
	color: #00FF00;
}

    Thanks – believe this could be useful for others too :o )

  2. 29
    Kjetil
    10-15-08 4:57PM

    Hi
    Thanks for making this plugin – for a simple, nice functionality.
    I A) wonder how it is best to format the eg “Click to expand!” text, and B) also if its possible to include images here – somewhat like down left here.
    I’ve tried and (strangly enough) this works:

    <h2><DDET Click to expand!</h2>
Here is your text!
</DDET>

    Note the missing bracket after “expand!”.
    For the image/ other styling, I guess it can all be done using css, right?
    Thanks,
    Kjetil

  3. 28
    Spookeend
    10-12-08 1:21AM

    Nice plugin, and i have the need for for sure.

    But, it is only working to a point.

    Use html editor, and put in following :

    <DDET Click to expand!>
Here is your text!
</DDET>

    Press save, the page works like it should.
    But after it is saved, and looking at the backend of the page, the code looks like this :

    <ddet>
Text to expand
</ddet>

    And the script is not working anymore after i save it again (ie after editing the page)

    As you can see, the capital code letters are no longer capitals and the “link” text has dissapeared.

    How come? Because it is very irritating repairing everything before you save again after editing the page

  4. 27
    tsquez
    10-10-08 11:55PM

    Hey now this seems like a pretty cool plugin. Definately something I could use. Thanks.

  5. 26
    Admin
    10-9-08 8:27PM

    Version 1.1 has been released. If fixes a bug in which multiple groups of expanding text did not work if you used the exact same text in each block.

  6. 25
    Denis
    10-8-08 1:28AM

    Thanks, that’s exactly what I need. Will be implementing it soon. Keep it up!

  7. 24
    eivind
    10-5-08 10:28PM

    Well, it is a very interesting function. Neat and easy to use.
    But unfortunately not quite 100% working. When having used it in several posts the first post works fine, the second (with pictures) includes the pictures inside the tag, although I did NOT do it myself! The third post works somewhat ok, but shows 5 words from the text that WAS put inside the tags. I use WP 2.6.2.
    When will this be fixed?

  8. 23
    Admin
    10-2-08 9:19PM

    I am currently trying to figure out why some people are not able to use multiple sections of expanding text.

    Patrick: Yes, as the text is shown normally in the html.

  9. 22
    Patrick
    10-2-08 8:46PM

    Great plugin. It works so smoothly.
    1 question though. Will Google treat text within the collapsible section the same as it normally would without the plugin?

  10. 21
    Evi
    9-29-08 2:06PM

    Is there a way to insert this into the php file of a page? Please email me and I can explain.

    Thank you!

  11. 20
    maksi
    9-23-08 5:48AM

    Is it possible to use it in the comments, too?

  12. 19
    Maxine
    9-8-08 1:38PM

    Hi,
    This is a really great idea for a plugin but there’s just one problem: you state that the plugin allows you to have as many sections of expanding text on a page as you like. For me it only works with one…try to put in more than one section of text and the page just shows up in its entirety.

  13. 18
    Daniel Tyack
    9-5-08 11:55AM

    I really dig this plugin but I’m having one problem. I’m using WP 2.6 and it works fine if I just use the html mode. However if I switch back to visual mode it strips the DDET tag. How do I remedy this or is there a way to use the shortcode tags [DDET] like other plugins.

  14. 17
    Artur
    9-4-08 6:06PM

    That´s just what I was looking for! :)
    Just one simple and dumb question: the search engines like google can “read” the text inside the “hidden box”??

    Tks!

  15. 16
    Admin
    8-30-08 6:04PM

    As mentioned below, I uploaded a new copy that does not use the str_ireplace function, which is only included in newer PHP versions. It now just uses str_replace.

    This is a PHP version issue, not a WordPress problem. Download the new copy and try it out.

Pages: « 15 … 11 10 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.