Hi San,
thanks for your question.
That functionality is not actually a plugin, but something I developed directly for the site. It is very similar to the “Accordion” effect that you can see on the plugin site (http://tobias.baethge.com/wordpress-plugins/wp-table-reloaded-english/) itself.
The good news: I explained that functionality in a blog post a while ago, so that others can also use it on their sites:
http://tobias.baethge.com/2009/07/expandhide-accordion-feature-explained/
Best wishes,
Tobias
Tobias,
Thank you very much for your prompt answer. The only problem is that I have no idea about wirtting codes! =( Is there any other way? Is is possible/easy for you to create a plugin? It will definitively be the best FAQ/Spoiler plugin ever… I have been checking plugins and there is no accordion plugin as nice as yours!
Thanks again,
San
Hi San,
sorry, unfortunately, I don’t have the time to create a plugin out of this right now.
Using the feature is quite easy though, trust me! All you need is to copy the code from my description blog post into a new file, upload that into the correct location, adjust the references to that file in your post and create the HTML code for the content, according to that description.
Regards,
Tobias
I can´t make ir work =(
At the end of what page should I put this?:
<script type=’text/javascript’ src=’/wp-includes/js/jquery/jquery.js?ver=1.3.2′></script>
<script type=’text/javascript’ src=’/wp-content/themes/YOUR-THEME/page.js’></script>
And, in which part of the style.css should I put this?:
h3 {padding-top:10px; border-top:dashed gray 1px; cursor:pointer;}
h3 span {display:none;position: absolute; right: 10px; font-size: 12px; color: gray;}
h3.slidehidden .expand {display:inline;}
h3.slidehidden .hide {display:none;}
h3.slidevisible .expand {display:none;}
h3.slidevisible .hide {display:inline;}
Sorry, I´m sure this is very basic for you but I have no clue about what I´m doing!
Hi,
that first part of code needs to go into the page or post where you want to use this feature, i.e. into the regular WordPress editor textfield of your page.
(Don’t forget to adjust the paths to the files.)
The CSS part goes into the stlye.css, yes. Right at the end is fine, there’s no real need to use a certain position in the file.
Regards,
Tobias
Hi Tobias,
Thanks again for your help. I dont know what I`m doing wrong but I still can´t make it work.
1) I’m putting this into a post:
<h3>Heading 1</h3>
<div class=”slide”>
Content of Section 1
</div>
<h3>Heading 2</h3>
<div class=”slide”>
Content of Section 2
</div>
<script type=’text/javascript’ src=’/wp-includes/js/jquery/jquery.js?ver=1.3.2′></script>
<script type=’text/javascript’ src=’/wp-content/themes/TribuneMagazine/page.js’></script>
2) I prepared the page.js file with the content you suggested.
3) I added the code mentioned in my last message to the end of the sytle.css file.
Any ideas?? Thank you!
Hi,
that looks good so far.
Can you provide a link to the page where you are trying this, so that I can take a direct look?
Thanks!
Tobias
Thanks Tobias! Could you send me an email so I can send you the link? Or is there any other way in which I can send you the link without publishing here? My site didn’t go live yet, and I don’t want people to have a look at it.
Hi,
sure, just contact me by mail (the address is in the main plugin file “wp-table-reloaded.php”).
Regards,
Tobias
Hi Tobias, sorry to bother you again, I wanted to ask you two more questions:
1. Could you please share with us which is the code for adding the “expand all questions” or “hide all answers” that you have in the FAQ section of your blog?
2. In the same way the cursor changes to a “pointer” when you put the cursor over the question for clicking and seeing the answer, is it possible to add color to that function? Example: the several questions are in black, when you place the cursor over a question, not only the pointer appears but also the question changes its color to (lets say) green, and once you click on the question to expand it, the question remains green until you click to hide the content.
I have no idea if this is possible and if its easy. If so, could you also share the code?
Thank you very much again!
San
Hi San,
the code for the first question can be found in http://tobias.baethge.com/wp-content/plugins/faq/assets/javascript/faq-frontend-scripts.js
That won’t have work directly on the existing code for the accordion, as that uses a different approach and code base.
Unfortunately, I don’t have the time right now to rewrite the code to work with that, and this would also not be that helpful to you, as you would not really learn that much from it.
Instead, I suggest that you take a look at some tutorial for the jQuery JavaScript library and its documention, so that you can understand what the code tries to do, to get a better understanding of it.
Before, you might however want to try finding some explanations on basic CSS code. That will not only help with the jQuery (especially with selectors), but you will also be able to make adjustments to the layout on your site more easily.
And even better: That’s exactly the knowledge that you can the use to also solve the second question, which is (you guessed it) possible with CSS and jQuery as well.
Explaining it here would not do good though, as I really believe that all of those existing tutorial explain these things much better than I ever good.
Thanks for your understanding.
Best wishes,
Tobias
