WP loop is not displaying properly

  • I have created an accordion using checkbox inputs. When I display the post it is only retreiving the forst posts info for every post that it lists.

    <h2 class=”faq-h2″><?php the_title(); ?></h2>

    <?php $args = array (‘post_type’ => ‘faq’); $the_query = new WP_Query($args); ?>
    <?php if ($the_query->have_posts() ) :
    while ($the_query->have_posts() ) :
    $the_query->the_post(); ?>

    <div class=”half”>
    <div class=”tab”>
    <input id=”tab” type=”checkbox” name=”tabs”>
    <label for=”tab”><?php the_field(‘question’); ?></label>
    <div class=”tab-content”><p><?php the_field(‘answer’); ?></p>
    </div> <!—- end tab-content—->
    </div> <!—- end tab—->
    </div> <!—- end half—->
    <?php endwhile; endif; ?> `

    This code displays all the posts but when I click on the relevant checkbox it will only action the first one. I have done the styling in CSS and am having problems with the Loop. Any Help out there.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator bcworkz

    (@bcworkz)

    What is the checkbox supposed to do? It sounds like faulty JS that is picking up the first element instead of the clicked element. How does the script determine what checkbox is clicked?

    Thread Starter struanmuirhead

    (@struanmuirhead)

    I have made a FAQ custom post type, with custom fields for question and answer. Each checkbox is coded to appear as a button and when “checked” the answer drops down below the button. It works when it is not in the WP loop. When i put it in the loop there seems to be an issue with this. Regardless of which checkbox I select the animation and answer are always applied to the first/latest one.

    .tab-content {
    background: #1abc9c;
    overflow: hidden;
    max-height: 0;
    transition: max-height .35s;

    }

    .tab-content p {
    margin: 1em;
    }

    input:checked ~ .tab-content {
    max-height: 10em;
    }

    label::after {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 3em;
    height: 3em;
    text-align: center;
    transition: all .35s;
    }

    input[type=checkbox] + label::after {
    content: “+”;

    }

    in what file is your posted code?

    have you tried to add a 'posts_per_page' parameter into the query?

    Moderator bcworkz

    (@bcworkz)

    I think it’s this part of your loop: <input id="tab" type="checkbox" name="tabs">

    You end up with a bunch of checkboxes with the same ID attribute, so any changes are attributed to the first occurrence. All IDs must be unique on the page, duplicates will fail to validate. I suggest you create a counter that increments in each iteration of the loop. Include the counter value as part of the ID. tab-01, tab-02, tab-03 etc.

    So this is a CSS only accordion, no scripts involved, yes? Very cool! (once it works ?? )

    Thread Starter struanmuirhead

    (@struanmuirhead)

    That worked, I had a suspicion it may have been due to that.

    <input id="faqID<?php echo $faq_ID;?>" type="checkbox" name="tabs" class="faq-input">
						<label for="faqID<?php echo $faq_ID++;?>" class="faq-label"><?php the_field('question'); ?></label>

    I cannot take the creddit for the CSS though. FOund it on line, but I have been battling to get it integrated into WP for a while now.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘WP loop is not displaying properly’ is closed to new replies.

Tags