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.1   Updated Thursday, October 9th, 2008 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

  • 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.

<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 style sheet. Here is an example:

.ddet_div {
  margin: 8px 0 0 12px;
  padding: 8px;
  background: #F4F4F4;
  border: 1px solid #DDDDDD;
}
  1. 55
    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

  2. 54
    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!

  3. 53
    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!

  4. 52
    JAY
    1-3-09 9:40AM

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

    thanks

  5. 51
    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

  6. 50
    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!)

  7. 49
    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..

  8. 48
    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?

  9. 47
    Trace
    12-17-08 8:06PM

    Love this plugin but unfortunately can’t use it because the code disappears when switching between code and visual views in wordpress write screen…

  10. 46
    Angela
    12-6-08 12:06PM

    I’d like to echo the concern that the code snippets disappear when the Visual tab is clicked. If the Visual tab is used on other pages, and you click to a page containing the expanding text, the Visual tab is selected by default and immediately all of the code disappears. A lot of other plugins use [] that aren’t deleted by the Visual editor. Perhaps there is a different way to call out the code (using [] for example), so that the Visual Editor doesn’t delete it, since the only way to prevent this from happening is to completely disable the Visual editor for the entire site.

  11. 45
    Niket Kale
    12-5-08 9:00AM

    I love this plugin. You can do more. Create a beautiful background with a image to the expanded text. Or change the color of the h2 tag on your expanded text. Also you can give a h2 to the Click to expand text. A complete example with all the css changes and post is below:

    <DDET Click to expand!
    Here are some links to some of Freeware website resources
    More Freeware Download
    You can Customize the h2 tag to your “Click to expand text” and also add a h2 tag to your Heading on the exapanded text. For that you need to add

    a little text to your style sheet like given below
    .ddet_div {
    margin: 8px 0 0 12px;
    padding: 8px;
    background: #F4F4F4;
    border: 1px solid #DDDDDD;
    background-image: url(images/bg-blue-dot.gif);
    background-position: center 100%;
    background-color:#F4F4F4;

    }

    .ddet_div h2{
    color: White;
    }

    You can change the background image file or path to your own and also change the h2 font color inside the expanded text by editing the color: white tag

    Niket Kale
    http://www.trustMeher.net

  12. 44
    Willow
    11-30-08 9:18PM

    PS should have said, thanks! I love this plug in!

  13. 43
    Willow
    11-30-08 9:17PM

    Does this plugin not work on Wp 2.6.5? I have 2 blogs on the same server (different subdomains) using the same theme, and the only difference is that one is on WP 2.6.3 and the other on 2.6.5. Expanding text doesn’t work on the latter. Is it just me?

  14. 42
    Learning Chinese Online
    11-27-08 3:36AM

    Nice plugin, i am using it now.

  15. 41
    Axeile
    11-24-08 6:40AM

    Hi there, is there a way to change the window status message on mouseover? I tried adding onMouseover=”window.status=’click me’;return true;” into the php under $new_string but it returns a fatal error. I’ve also tried adding the onmouseover directly into the post but it didn’t work either. Currently javascript:expand(document.getElementByID(’blahblah’)) appears in the status bar upon mouseover on the “click to expand” link.

  16. 40
    tarot readers
    11-19-08 9:27PM

    Nice plugin!! Thank you for sharing

  17. 39
    Ed
    11-17-08 1:24PM

    Love it, but please please answer the question that’s been posted twice: how to avoid loosing the tags, including ones own text, when you swap between html and visual modes. Can we hack the visual editor?! I don’t mind adding the tags in html, but would like to still be able to edit the page in visual mode. Thanks;)

  18. 38
    Web 3 Graphics
    11-13-08 8:00PM

    Do you think this would work well built into a theme?

    Cheers!

  19. 37
    The Moderator
    11-7-08 5:00PM

    Allow me to rephrase…

    
<ddet &#11024; Expand &#9585; Collapse &#11023;>
</ddet>

    <ddet ⬐ Expand ╱ Collapse ⬏>
    <╱ddet>

  20. 36
    The Moderator
    11-7-08 4:59PM

    I love this! I have been wondering about this for some time. And I am hooked, baby!

    Now, if we could only use little buttons instead of text ….

    
&lt;ddet &#11024; Expand &#9585; Collapse &#11023;&gt;
&lt;&#9585;ddet&gt;

  21. 35
    Pete Lingo
    10-27-08 4:10PM

    This is almost a superb plugin. I’m using it on WP2.6.2 and it works fine, except for a small problem. In the Write Post screen, if you switch from HTML mode to Visual Mode to check the content and then switch back, the snippets have all disappeared. Infuriating. :-(

  22. 34
    Mark
    10-22-08 2:18PM

    I would also like to insert this code into a php template file to show/hide comments. Is there a way that this can be done with your plugin?

  23. 33
    Yoram
    10-21-08 6:09PM

    Hmm, first I was more than happy to find that plugin — but after running W3C Markup Validation I changed to “I should wait until it is 100% valid” state. Maybe you should have a look at the validation errors and try to fix them. I would be very sorry not to use your very useful plugin.

  24. 32
    Admin
    10-20-08 10:49PM

    Pierre: To use this plugin, you just add that text directly into your post or page (make sure you are using the code, not visual, editor in WordPress) - not the template files.

  25. 31
    Pierre K.
    10-20-08 8:55AM

    Hello. Very nice plugin.
    I’m trying to put it directly in a template, for showing the excerpt of the post in collapsed mode, and the whole content in plain mode.
    But the code above seems not to be recognized :

    
<?php the_excerpt(); ?>
	<DDET Click to expand!>
<?php the_content(); ?>
</DDET>

    Got an idea ? Thanks

  26. 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)

  27. 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

  28. 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

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

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

  30. 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.

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

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

  32. 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?

  33. 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.

  34. 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?

  35. 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!

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

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

  37. 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.

  38. 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.

  39. 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!

  40. 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.

  41. 15
    sproke
    8-30-08 1:15PM

    “it does not work, even in a newly installed Wordpress.

    “Fatal error: Call to undefined function: str_ireplace() in /www/htdocs/(myserverver)/blog/wp-content/plugins/dd-expanding-text.php on line 46?

    - I’m getting the same error. Any suggestions?

  42. 14
    Bryson
    8-27-08 6:04AM

    I wonder, is there any way at all to retain the functionality of this plugin, and be able to put a link to another page or site in the (Click to expand) portion of the tag?

  43. 13
    Mike
    8-26-08 9:05AM

    Great plugin!
    Is there any way to have “expand all” and “collapse all” links on a page that would expand/collapse all instances of text wrapped in the DDET tags?

  44. 12
    Fabricio
    8-26-08 12:44AM

    Hi there!

    Very usefull plugin, but there is an annoying limitation: I can not use it to broke sentences. In other words: I’d like to use it just in the middle of a sentence and then the close link should be placed elsewhere, like in the end of the post.

  45. 11
    Bryson
    8-25-08 12:55AM

    It works great on my computer, but on my other computer, which is basically identical aside from having SP2 of XP instead of SP3, the links don’t expand the text, instead they open new windows, and nothing pulls up.

    I checked js and it’s all working good, fully updated, and works on the rest of my site from that computer, just not DDET. Any ideas?

    This plugin also doesn’t work very well with AWP, causes all kinds of erratic behavior, though I worked around it just fine.

  46. 10
    Admin
    8-24-08 10:38PM

    jay: Just as a test, you might want to try using another theme. One of the default ones perhaps.

  47. 9
    Bryson
    8-24-08 4:17AM

    Very nice plugin. Allow me to post new content even on days when I don’t feel like writing out a long or even slightly detailed post. Love it!

  48. 8
    Lior Iluz
    8-22-08 10:16AM

    exactly what I was looking for, many thanks!

  49. 7
    jay
    8-21-08 8:32PM

    hi thanks for trying but that still didnt work. I am using wordpress 2.6 using the WP Remix 2 theme if that helps at all. It just doesnt seem to work on anything except safari, i dont understand.

  50. 6
    jay
    8-21-08 10:03AM

    ok will give it a try when i get home, thanks and will let you know :)

  51. 5
    Admin
    8-20-08 9:24PM

    I have tested in IE and Firefox - a few different versions - without any problems.

    Do you have Javascript disabled?

    Val: That means you are using a version of PHP before 5.0, and the str_ireplace function does not exist. This has nothing to do with WordPress, but rather PHP. I just made a small modification to the file so it uses the standard str_replace function though. Try it again if you like.

  52. 4
    jay
    8-19-08 12:38PM

    i just cant get this to work properly, it seems to work on safari but not IE or FF? Maybe im doing something wrong?

  53. 3
    jay
    8-19-08 12:14PM

    This doesnt seem to work in firefox?

  54. 2
    Val
    8-18-08 8:17AM

    it does not work, even in a newly installed Wordpress.

    “Fatal error: Call to undefined function: str_ireplace() in /www/htdocs/(myserverver)/blog/wp-content/plugins/dd-expanding-text.php on line 46″

  55. 1
    Susan
    8-15-08 12:19AM

    Wow…I love it! This is great! Now, I just need to find a use for it!

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.