How to toggle each div with toggle() function in a dynamic php file

Question

I'm minimizing the visual display of my list blocks, and I want to use toggle with a button to hide the content that I dont want to appear by default.

I nearly do it with the next() jquery property, but this forces me to put the button in the previous element of the content that I want hide (thats why it's called NEXT), but I want to hide the class content two or three class elements below. How can I do it? I tried with siblings() but didn't work.

        if ( tribe_get_cost() ) : 
            $event_cost='<!-- Event Cost -->
            <div class="ect-event-cost">
                <span>'.tribe_get_cost($event_id, true ).'</span>
            </div>';
            endif;

            $event_title='<a class="ect-event-url" href="'.esc_url( tribe_get_event_link()).'" rel="bookmark">'. get_the_title().'</a>';


            $event_content='<button class="btn1" class="button">More..</button><!-- Event Content --><div class="p1"><div class="ect-event-content">';
              $event_content.=tribe_events_get_the_excerpt($event_id, wp_kses_allowed_html( 'post' ) );

            $event_content.='<a href="'.esc_url( tribe_get_event_link($event_id) ).'" class="ect-events-read-more" rel="bookmark">'.esc_html__( 'Find out more', 'the-events-calendar' ).' &raquo;</a></div></div></div>';
    /*

$(document).ready(function () {
    $(".p1").hide();

    $(".btn1").click(function(){
        $(this).next(".p1").toggle()
    });

  });

Louys Patrice Bessette · Accepted Answer · 2019-02-18 23:45:59Z

1

Do you know why .next() doesn't work using $(this).next(".p1").toggle() ?

Because you have a comment in between: .

It would work instead. A comment tag is an element. Just remove it and try again.

Since you use PHP... Is suggest you to place that kind of comment in some PHP comment like this: <?php // Event Content ?>, so it does not show in the rendered page on the client side.

edited Feb 18, 2019 at 23:45

answered Feb 18, 2019 at 23:40

Louys Patrice Bessette

34k7 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Pedro Corchero Murga Over a year ago

Yeah, I inserted after the comment and it's work with next(), but i want that it searches and jumping the "comment" element and the other elements that may have, and search it for the nearest p1. I tried with children() but didn't work, with parents() it works but ascendant, I want it to make descendant too.

Louys Patrice Bessette Over a year ago

I'm not sure to get it... But if you really want to keep that HTML comment, try $(this).next().next(".p1").toggle() or $(this).parent().find(".p1").toggle()... something like.

Louys Patrice Bessette Over a year ago

Or $(this).siblings(".p1").toggle()... There is many options... ;) -- The key is to be logic in understanding the structure you are dealing with.

Pedro Corchero Murga Over a year ago

I used $(this).parent().find(".p1-img").toggle(); (another class that I want to toggle too) to find the nearest p1-img parent and toggle it but didn't work. If i use $(this).parents().find(".p1-img").toggle(); (see the "parents" difference), it work's but it's toggle all the parent's, not only the first one. The parent that i want is 5 levels above the <button> tag.

Pedro Corchero Murga Over a year ago

$(this).closest(".p1-img").toggle(); didn't work for me. Finally I used: $(this).parent().parent().parent().parent().find(".p1-img").show(); I dont know if is a smart way but it worked. Thanks.

|

Collectives™ on Stack Overflow

How to toggle each div with toggle() function in a dynamic php file

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related