Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Posted by Craig Watson
Craig Watson
27,930 Points

Help with jQuery used inside a wordpress loop please :)

Hi everyone :)

Something simple if your code can have unique id's but im struggling with this using wordpress!

Here is my code for a dynamic panel post type in wordpress and I simply want to rotate the the chevron on the click event....

Maybe im having a dumb moment who knows but I can not get this to work correctly mainly because the way I do it is controlling all three chevrons at the same time ..... :P

            <!-- Drop Down Panel Custom Post Type -->
            <div class="col-md-5 col-md-offset-1">

                <div class="drop-group-title">

                      <?php if( !dynamic_sidebar( 'drop-group-title' ) ): ?>

                        <p>Please Add Widget Drop Group Title</p>

                      <?php endif; ?>

               </div>


                <!-- Declare Custom Post Type for Custom Query -->
                <?php 

                    $args = array(

                        'post_type' => 'info-dropdown'

                    );

                    $infoDropdown = new WP_Query( $args );

                ?>
                <!-- //Close Custom Query Declaration -->

                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

                    <div class="panel panel-info">

                        <!-- Custom Query Loop -->
                        <?php if ( have_posts() ) : while ( $infoDropdown->have_posts() ) : $infoDropdown->the_post(); ?>

                        <div class="panel-heading" role="tab" id="headingOne">

                                <!-- Get Info From Custom Post Type -->
                                <?php 

                                    //Get Custom Post Type By Slug and Declare as Variable
                                    $title = get_field('title');

                                    //Get Custom Post Type By Slug and Declare as Variable
                                    $info = get_field('description');

                                    $dropdownContols = array( 'One', 'Two', 'Three', 'Four', 'Five' );
                                    $i = $infoDropdown->current_post;


                                ?>

                            <h4 class="panel-title">

                                <a  class="panel-toggle-control"
                                    data-toggle="collapse"
                                    data-parent="#accordion"

                                    href="#collapse<?php echo $dropdownContols[$i]; ?>"

                                    aria-expanded="true"
                                    aria-controls="collapse<?php echo $dropdownContols[$i]; ?>">

                                    <?php the_title(); ?>
                                    <span class="panel-chevron glyphicon pull-right"></span>

                                </a>

                            </h4>

                        </div>

                        <div id="collapse<?php echo $dropdownContols[$i]; ?>"
                             class="panel-collapse collapse <?php if( $infoDropdown->current_post == 2 ) : ?>in<?php endif; ?>"
                             role="tabpanel"
                             aria-labelledby="headingOne">

                            <div class="panel-body">

                                <?php echo $info ?>

                            </div>

                        </div>



                        <?php endwhile; endif; ?>
                        <!-- //Close Custom Query Loop -->

                    </div>

                </div>

            </div>
            <!-- //Close Drop Down Panel Custom Post Type -->

I have been on and off this all day and It is bugging me that it is probably so simple when you know how....

Any help is much appreciated :)

Craig