Skip Navigation

[Gelöst] How to toggle div content on click, swap div content on click.

This support ticket is created vor 8 Jahre, 6 Monate. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)


This topic contains 2 Antworten, has 2 Stimmen.

Last updated by Marisa vor 8 Jahre, 6 Monate.

Assigned support staff: Luo Yang.


See onload.jpg - This is my page on load. See flipped.jpg, this is what I want to happen when a user clicks the orange box.

The orange box is the question of an FAQ and the flipped.jpg version is the answer. When answer is clicked it should switch back to question again.

I followed a detailed support ticket about click/show/hide js, but it was more about showing an additional layer rather than swapping. I just couldn't make it work for my needs. I got close but when I clicked the divs they all switched instead of one switching. I wish I would have saved the code up to that point but I deleted it because it didn't work.

hidden link

View Template code.

<div class="faq" style="background-color:[types field="the-background-color" output="raw"][/types];">
<h4 class="faq-heading">[wpv-post-title]</h4>
<p class="answer">[types field="answer" output="raw"][/types]</p>


.faq {
  padding:60px 40px;
  text-decoration: none;
  display: block;
  color: white;
  flex:0 1 auto;
  /*background-color:[types field="the-background-color" output="raw"][/types];*/

h4.faq-heading {
p.answer {

@media screen and (max-width:800px){
  .faq {
    margin:0 0 5px 0;

Please try create a custom Java-script for it, for example:


See the demo site:
hidden link
user/pass: xgren/111111


Perfect. Thanks! That's so simple. I don't know why I didn't think of using "children."