CODEWITHSUNDEEP
phpjqueryhtmlcss
Pedro Corchero Murga
Pedro Corchero Murga

Reputation: 505

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

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()
    });

  });

Upvotes: 0

Views: 342

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

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

Because you have a comment in between: <!-- Event Content -->.

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.

Upvotes: 1

Related Questions