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. 75
    Rolando
    7-4-09 1:33PM

    FABIEN: I paste the same

    
[DDET Price in Dollars ]
250 dollars
[/DDET]

[DDET Prices in Euro]
price in Euros
[/DDET]

    is working fine in my website, I’m check in ff3.5, and ie8 and safari4. and looks fine in all .

    the only weird stuff that I saw in ur site (view source mode) was that the id is the same in both links.. 

    
<p><a style="display:none;" id="ddetlink1711057188" href="javascript:expand(document.getElementById('ddet1711057188'))">Price in Dollars </a>
<div class="ddet_div" id="ddet1711057188" onclick="expand(document.getElementById('ddet1711057188'))"><script language="JavaScript" type="text/javascript">expand(document.getElementById('ddet1711057188'));expand(document.getElementById('ddetlink1711057188'))</script>
250 dollars<br />
</div></p>
<p><a style="display:none;" id="ddetlink1711057188" href="javascript:expand(document.getElementById('ddet1711057188'))">Prices in Euro</a>
<div class="ddet_div" id="ddet1711057188" onclick="expand(document.getElementById('ddet1711057188'))"><script language="JavaScript" type="text/javascript">expand(document.getElementById('ddet1711057188'));expand(document.getElementById('ddetlink1711057188'))</script>

price in Euros<br />
</div></p>

did u comment or delete this lines in ur copy of the plugin?
<code>
L47:                mt_srand((double)microtime()*1000000);
L48                $rnum = mt_rand();

    in my source looks like this: (yes I add some “\n” in the plugin just to make it look pretty)

    

<p><a style="display:none;" id="ddetlink575082508" href="javascript:expand(document.getElementById('ddet575082508'))">Price in Dollars </a>
<div class="ddet_div" id="ddet575082508" onclick="expand(document.getElementById('ddet575082508'))">
<script language="JavaScript" type="text/javascript">expand(document.getElementById('ddet575082508'));expand(document.getElementById('ddetlink575082508'))</script>

250 dollars<br />
</div></p>
<p><a style="display:none;" id="ddetlink1711943988" href="javascript:expand(document.getElementById('ddet1711943988'))">Prices in Euro</a>
<div class="ddet_div" id="ddet1711943988" onclick="expand(document.getElementById('ddet1711943988'))">
<script language="JavaScript" type="text/javascript">expand(document.getElementById('ddet1711943988'));expand(document.getElementById('ddetlink1711943988'))</script>

  2. 74
    eheuristic
    7-4-09 4:55AM

    Hi
    This really nice.
    now I just search this is only one site
    because this site is really cool….

  3. 73
    fabien
    7-4-09 1:54AM

    Thank you Rolando. unfortunately, it’s still not working.
    See what happens : http://www.isi-asia.net/expand.html
    password: test

  4. 72
    Rolando
    7-3-09 8:30PM

    thank you for this. keep it simple. works awesome. I just add the option to click and expand again in the div. ..
    before:

    
Line 53:
$new_string .= '<div class="ddet_div" id="ddet' . $rnum . '">';
Now
Line 53:
$new_string .= '<div class="ddet_div" id="ddet' . $rnum . '" onclick="expand(document.getElementById(\'ddet' . $rnum . '\'))">';

    it works for me. ;)

  5. 71
    Rolando
    7-3-09 8:29PM

    thank you for this. keep it simple. works awesome. I just add the option to click and expand again in the div. ..
    before:
    Line 53:
    $new_string .= ”;
    Now
    Line 53:
    $new_string .= ”;

    it works for me. ;)

  6. 70
    fabien
    6-26-09 4:48AM

    Hi again, you said : “Now works properly when the exact same expanding text is used more than once on the page” with the 1.1 version… I have only the 1.2 version, ad it’s not working. I’ve never tested the 1.1 version… Is ther any special tags to write to get multiple expandable link text???

  7. 69
    fabien
    6-26-09 4:03AM

    Hi. It’s working great. But I would like to ad more than 1 click to expand.

    When I ad the only one tag, it’s working, but when I want to ad more expanded link, the function is not working anymore:

    [DDET Price in Dollars ]
    250 dollars
    [/DDET]

    [DDET Prices in Euro]
    price in Euros
    [/DDET]

    What can I do to make it works?

  8. 68
    zonabi
    6-1-09 8:59AM

    Nice plug-in. If we may add two questions: How could we make the (click to expand) text toggle to (click to close) text when expanded? Secondly, how could we modify the script so that the post displays fully expanded when viewed on a individual post page (as opposed to the index page) ? Thanks!

  9. 67
    Marco
    5-27-09 7:50AM

    Hi, I’have a problem: probably I’m stupid but I really don’t understand how it works..
    in html mode I put:

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

    but the only thing that is displayed is “here is you text!”, there is no link to expand or collapse.
    If I put the code in template (footer or header..) it works.
    I’m not a wordpress guru and I’m going crazy.. please..

  10. 66
    Fredric
    4-18-09 5:53PM

    Really good function, but is it possible to have as the Lightbox 2 function for opening and closing. And also to expand and collapse… This doesn’t work today.

    Thanks!

    Fredric

  11. 65
    Kirk Ward
    4-8-09 1:09PM

    Can the plugin be used to open with expanded text and then reduced when clicked?

  12. 64
    Andrea
    3-29-09 5:28PM

    Hello,
    Thanks for your work on this.

    It is possible to include this in a template, so multiple posts show up as the title, and then the user can show/hide each post’s content?

  13. 63
    Antonio
    3-26-09 11:15AM

    Hi, I’m having a strange behaviour with this plugin.
    I’m using WPMU and users are registered to the main blog able to post as contributor. As soon as I activate the plugin users who try to post a new post receive an error which says “there was an error, try again later”

  14. 62
    Gabriele
    3-9-09 8:13AM

    How can I give the link a different property/look? I am not able to give the expanding link a differnet look than the one used in my theme.
    Thanhks!
    Gabriele

  15. 61
    Alice
    3-8-09 12:46PM

    Is it possible to use this in the sidebar?

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.