Skip Navigation

[Resolved] After Ajax filtering or pagination div's are open and not toggled close anymore

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

Problem:
On AJAX paginated Views JS "breaks" on 1+ pages (the toggle does not work anymore)

Solution:
This is because the click event isn't delegated, to solve this, use this HTML Mockup inside a Views Loop:

<h3> [wpv-post-title] </h3>
                    <div class="item-[wpv-post-id] show-hide">
                        <span class="plusminus">
                          <strong>Your title</strong>
                        </span>
                        <div class="item-content" style="display:none;">
                        //Your content
                        </div>
                    </div>
          
The JS:
[php]
jQuery(document).ready(function($){
//NOTE: I use "on", instead of "clic". this delegates the event
    $(document).on('click','div.show-hide',function(){
        $(this).find('div.item-excerpt').toggle();
        $(this).find('div.item-content').toggle();
        $(this).children('span.plusminus').toggleClass('open');
    });
});

Also a Bootstrap Accordeon might be used, see in post.

This support ticket is created 8 years, 8 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
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

Tagged: 

This topic contains 2 replies, has 2 voices.

Last updated by andriuI 8 years, 8 months ago.

Assisted by: Beda.

Author
Posts
#311372

After Ajax filtering or pagination all div's are open and not toggled to closed anymore:

<url removed by forum moderator>

I use a java script that closes all the divs after loading the page.

But once the results are filtered all divs are open, and also it is not possible to close them by clicking on the icon.

How do I need to implement js so that this works again even after filtering or pagination?

Thanks

#311623

Thank you for contacting us here in the Support Forum

This is most probably because your JS is not properly delegated
hidden link

I will illustrate below a JS Toggle function that keeps the Toggle closed on page load (and also after AJAX pagination), and properly delegates the events on AJAX calls

I put a goodie into the HTML markup, it's a second, nested Toggle, inside the first Toggle.

This second toggle is using default Bootstrap Toggle HTML (noteAcc) while the first toggle uses a JS Toggle (plusminus)

The JS Code is also illustrated below.

Note how I used the Post ID ShortCode to give unique identifiers to the relative Toggle "links"

HTML Markup (in this example, used in a Views Loop)

<wpv-loop>
 			<h3> [wpv-post-title] </h3>
                  	<div class="item-[wpv-post-id] show-hide">
                        <span class="plusminus">
                          <strong>Your title</strong>
                        </span>
                        <div class="item-content" style="display:none;">
                        //Your content
                        </div>
              		</div>
          
                  	<div class="noteAcc">
      					<div class="accordion" id="accordion[wpv-post-id]">
        					<div class="accordion-group">
          						<div class="accordion-heading">
            						<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion[wpv-post-id]" href="#collapse[wpv-post-id]">Your Second (nested) Title</a>
          						</div><!--.accordion-heading-->
                                <div id="collapse[wpv-post-id]" class="accordion-body collapse">
                                    <div class="accordion-inner">
                                        //Your second, nested content
                                    </div><!--.accordion-inner-->
                                </div><!--.accordion-body-->
      						</div><!--.accordion-group-->
     					</div><!--.accordion-->
   					</div><!--.noteAcc-->  
          
				
		</wpv-loop>

JS for JS Toggle "plusminus" (noteAcc Toggle does not need custom JS)
In this example, it's added to the Views JS editor:

jQuery(document).ready(function($){
//NOTE: I use "on", instead of "clic". this delegates the event
    $(document).on('click','div.show-hide',function(){
        $(this).find('div.item-excerpt').toggle();
        $(this).find('div.item-content').toggle();
        $(this).children('span.plusminus').toggleClass('open');
    });
});

I hope this helps to adapt your current Toggle system?

Please don't hesitate to inform me in case the issue persists and let me know if the above solution works for you, I look forward to your reply!

Thank you

#312050

Hi

The first toggle does work - the noteAcc toggle does not work for me, but I dont use bootstrap.

Because I have one working solution this is resolved.

Thanks!

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