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

[Author]

Artikel

[Marisa]

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.
HTML:

<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>
</div>

CSS:

.faq {
  overflow:hidden;
  padding:60px 40px;
  margin: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 {
  color:#fff;
}
p.answer {
  display:none;
}

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

[Luo Yang]

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

jQuery(document).ready(function($){
    $('div.faq').click(function(e){
        $(this).children().toggle();
    });
});

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

[Marisa]

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