Skip Navigation

[Resolved] How to toggle div content on click, swap div content on click.

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.

Tagged: 

This topic contains 2 replies, has 2 voices.

Last updated by Marisa 6 years, 6 months ago.

Assigned support staff: Luo Yang.

Author
Posts
#289783
onload.jpg
flipped.jpg

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

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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

#290035

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