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

Latest Release (For WordPress 2.0 through 2.8+)

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:

Click to expand!

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;
}

Topic: WordPress Plugins and Mods | RSS Feed

102 Comments on “Expanding Text plugin for WordPress”

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

45

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…
44

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

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
42

Willow

11-30-08 9:18PM

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

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

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

Web 3 Graphics

11-13-08 8:00PM

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

Cheers!
37

The Moderator

11-7-08 5:00PM
Allow me to rephrase…
```
<ddet &#11024; Expand &#9585; Collapse &#11023;>
</ddet>
```
<ddet ⬐ Expand ╱ Collapse ⬏>
<╱ddet>
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;
```
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.
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?
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.
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.
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

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