[Resolved] Toggle button in Group of Repeating Fields

[Author]

Posts

[toolset-dave]

Hi, I have a view where is inserted another view with Group of Repeating Fields (as a child post). The view with child post has this code inside:

<h2>[wpv-post-title]</h2> <button id="tlacitko-vice" class="btn btn-info" type="button" data-toggle="collapse" data-target="#zobrazit-vice" aria-expanded="true" aria-controls="zobrazit-vice">VÍCE</button>
	  </div>
	  <div id="zobrazit-vice" class="collapse out">
		[wpv-post-body view_template="None"]
      </div>

If I click on the button nothing happens. If I place code for button into view for parent, it works. And after, how to secure that only the related post-body will show, not all of them?

[Luo Yang]

Dear Dave,

If you put the custom JS codes into the parent view, the custom JS codes will be triggered only once, if you put it into child views, since there will be multiple child view be rendered, the custom JS codes will be triggered multiple times.

For the question:
how to secure that only the related post-body will show, not all of them?

Please elaborate the question with more details, what kind of post-body is the related post-body?
If you need to display the child posts which are assigned with current parent post, please setup a post relationship filter in the child view:
Select posts that are a children of the current post in the loop.
see our document:
https://toolset.com/documentation/user-guides/querying-and-displaying-child-posts/

[toolset-dave]

Hi Luo,

each child CPT has [wpv-post-body], but I want to have it available only if you click the button "VÍCE". The problem is that all the buttons (Loop item in View) will collapse only the first post body text (in example "Lorem ipsum..."), not the related text.

[Luo Yang]

This needs custom Javascript, for example hidden link
if you need assistance for it, please provide a test site with same problem, fill below private detail box with login details, point out the problem page URL and where I can edit your custom JS codes, I need a live website to test and debug, thanks

[Luo Yang]

Thanks for the details, I have done below modification in your website:
Edit the view
hidden link

in section "Loop item in Zobrazení variant zážitků", change the codes from:

  <button data-toggle="collapse" data-target="#obsah">VÍCE</button>
  <div id="obsah" class="collapse">

To:

  <button data-toggle="collapse" data-target="#obsah-[wpv-post-id]">VÍCE</button>
  <div id="obsah-[wpv-post-id]" class="collapse">

You will need to assign a unique HTML ID attribute for each div tag, please test it again.

[toolset-dave]

Thank you, it nicely solved the problem.

[Luo Yang]

You are welcome.