I recently updated my show/hide plugin so that the text changes dynamically upon clicking it. The main purpose of this plugin is to eliminate text/content that you might not want the user to see immediately. The other nice thing is that the content is only loaded when you choose to reveal it. For example, with the videos below, no bandwidth is being used loading the videos right away. The videos are only loaded once you choose to see them (when you click the “show” button). This reduces page load time, which is very nice.
Here’s the old stuff:
Show/hide
Here’s the new stuff:
Show
And here’s the code to put in your posts:
Show
(This is not php code, it’s html. It’s the only way I could get the semicolons in the code to stay.)
The cool thing about this newer version is you can still use the old code side by side with the new one. What I mean is if you really want to, you can choose not have the text dynamically change when you click on it. I don’t know why you’d want to do this but it’s still an option.
Here’s the download link.
Just leave a comment if there’s any problems or bugs. I was going to have the content slide up and down smoothly instead of just jumping, but some of the javascript files were conflicting with each other for some reason. I could only have the text change or the smooth scroll, not both. Maybe I’ll use it in a later version.
Thanks and I hope you like it!
Andrew
Note: Just so you know, if you were using the old version of this plugin, you have to deactivate it for the new one to work. Also, version 1.6 is now up!
Thank you, Andrew!
I’ll test it and see how it works. I believe there’s nothing wrong with it but I’ll let you know anyway.
By the way, do you know if there’s a way to create a new function, plugin, whatever, for the WordPress’ editor, TinyMCE? I was trying to edit it yesterday but it was useless. I’m going to try again tonight and see what I get.
Thank you.
Tiago.
I’ve actually never heard of this plugin before. What are you trying to use it for (or what’s it’s purpose)?
Well, it’s a bit hard to explain, but I’ll try.
In TinyMCE editor, when you click the “B” button, the selected text gets bold, right? So, basically, what it does is to add the prefix <strong> and the suffix </strong> to the HTML code for the selection you did.
Whenever you want to hide a content in your post, you have to create the div and the JavaScript for the link manually, which takes a bit of time but it’s not the end of the world, of course. :p
BUT, what I was thinking is to give that div a permanent ID, e.g. ‘hidden-content’, since I intend to use it once per post (this way I wouldn’t miss W3C’s code validation), and create a function like the “B” button in the editor for this code.
This way, you can type freely and just hide what you want with only one click.
By the way, I tested the plugin here but it didn’t work when I first tried. I don’t know why, but I had to change some few things in the HTML code:
<a onclick=”changeText(this,’Hide’)” href=”javascript:wp_showhide(‘customname’)”>Show</a>
The entire JavaScript code was just perfect. Thank you very much! I only had this little issue but it’s already fixed.
I hope you understood everything. It’s simple yet complex.
Thank you.
Tiago.
I think I understand what you’re saying. I’ll see what I can do.
You said the code didn’t work? What was the problem?
I actually don’t know. I tested it as plugin in my local server but nothing happened. Then I tested again using only HTML and the JavaScript alone but it didn’t work either.
This the test I did with the HTML code you provided: http://tiagosartor.com/test/test1.html
And this is the one that I had to change to work here: http://tiagosartor.com/test/test2.html
If you check both source codes you’ll notice a slight difference between them.
Thank you.
Tiago.
I see what the problem is. I have this cool little code box thing that I use to display the code. But for some reason the semicolons that should be there are not displayed. The code should be:
I know it’s not php (which is what it says in the code box) but that’s the only way I can get the semicolons to stay. Sorry about that. I’ll change it up top. It should work now.
Semicolons are always the problem, hahahaha.
Thank you, Andrew. It’s working now.
Version 1.6 is now available!
Fantastic plugin, I have been battling and looking at all sort of options from customising the more tag to expanding text boxes and collapsible text…none of these worked – this one works beautifully – thanks!!!