Skip Navigation

[Resolved] Collapse button for Repeatable Field Group

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to use jQuery Collapse for showing and hiding repeatable field groups (RFG) in a View, but the code isn't working when I have more than one RFG.

Solution: Use CSS classes instead of IDs as your jQuery targets.

 
<div>
    <fieldset class="majorpoints" >
    <legend class="majorpointslegend">Expand</legend>
    <div class="mylist" style="display:none" >
        <ul>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    </fieldset>
</div>
<div>
    <fieldset class="majorpoints" >
    <legend class="majorpointslegend">Expand</legend>
    <div class="mylist" style="display:none" >
        <ul>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    </fieldset>
</div>
<div>
    <fieldset class="majorpoints" >
    <legend class="majorpointslegend">Expand</legend>
    <div class="mylist" style="display:none" >
        <ul>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    </fieldset>
</div>
jQuery(document).ready(function($){
  $('.majorpointslegend').click(function(){
    
    if($(this).text()=='Expand'){
        $(this).next('.mylist').show();
        $(this).text('Collapse');
    }else{
        $(this).next('.mylist').hide();
        $(this).text('Expand');
    }
   
  });
});

Relevant Documentation:
https://jquery.com/
http://jsfiddle.net/w9kSU/981/

This support ticket is created 5 years, 4 months ago. 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.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 2 replies, has 2 voices.

Last updated by toolset-dave 5 years, 4 months ago.

Assisted by: Christian Cox.

Author
Posts
#1166423

Hello,

I am trying to use jQuery Collapse for hiding and showing Repeatable Field Group. I have found this solution hidden link, but it works only on the first Group as you can see on hidden link (just click on + button). There are two groups, but displaying only one. I have tried to give lists unique IDs by [wpv-post-id], but nothing happens.

#1167194

See an updated example here: http://jsfiddle.net/w9kSU/981/

#1167644

Thank you Christian so much. It works great!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.