PHP acccordion CSS class per rij

Status
Niet open voor verdere reacties.
damnsharp

damnsharp

Terugkerende gebruiker
Lid geworden
6 jan 2012
Berichten
1.394
Hoi,
Bij een WordPress website die ook extra velden heeft (Advanced Custom Fields) heb ik een dynamische accordion gemaakt, met behulp van PHP (en stukje JS).
Nu wil ik dat ik elke rij afzonderlijk met CSS kan benaderen, dus bijvoorbeeld #acfaccordeon .rij1 en #acfaccordeon .rij2 etc.
Ik kan het met nth-child(x) doen, is wellicht ook voldoende maar wil wel weten hoe ik het toch voor mekaar krijg.
Denk dat het niet zo heel ingewikkeld is, een tellertje plaatsen maar toch loop ik vast.
Hoe zou ik dit het beste kunnen aanpakken?

Bedankt voor meedenken!

PHP: 
<div id="acfaccordeon">
	<?php if( have_rows('acffieldname-accordeon') ): ?>
		<?php while( have_rows('acffieldname-accordeon') ): the_row(); 

		// vars
		$name = get_sub_field('name');
		$content = get_sub_field('content');
		?>

		<button class="accordion"><?php echo $name; ?></button>
		<div class="panel">
			<?php echo $content; ?>
		</div>	

	   <?php endwhile; ?>
	<?php endif; ?>
</div>
 
De :nth-child is handig. Alternatief is een teller die een unieke class maakt.
Code: 
/* button/panel 1 */
#acfaccordeon .acbutton1 { ... }
#acfaccordeon .acbutton1 + .panel { ... }

/* button/panel 2 */
#acfaccordeon .acbutton2 { ... }
#acfaccordeon .acbutton2 + .panel { ... }

<div id="acfaccordeon">
    <?php if( have_rows('acffieldname-accordeon') ): ?>
        <?php $acButton = 1; ?>
        <?php while( have_rows('acffieldname-accordeon') ):
            the_row();
            $name = get_sub_field('name');
            $content = get_sub_field('content');
            ?>
            <button class="accordion acbutton<?php echo $acButton; ?>"><?php echo $name; ?></button>
            <div class="panel">
                <?php echo $content; ?>
            </div>
            <?php $acButton++ ?>
       <?php endwhile; ?>
    <?php endif; ?>
</div>

Met jQuery kan dit zonder css nth-child of php teller. Hieronder wordt onafhankelijk van het aantal rijen de class "show" aan de panel toegevoegd als je op de bijbehorende button drukt.
Code: 
/* bijvoorbeeld met deze css */
#acfaccordeon .panel { display: none; }
#acfaccordeon .panel.show { display: block; }

$("#acfaccordeon button").on("click", function() {
    $("#acfaccordeon .panel").removeClass("show");
    $(this).next().addClass("show");
});
 
Laatst bewerkt:
top @bron! Die teller in php is gelukkig eenvoudig en snap 'm ook. :thumb::love:
PHP: 
<?php $acButton = 1; ?>
<?php $acButton++ ?>

En ga ook nog die jquery testen.
 
Bij de jQuery oplossing eerst even checken of .panel een display:block (of geen display property) heeft.
Het zou een display:flex of display:inline-block kunnen zijn, in dat geval de volgende regel aanpassen
Code: 
#acfaccordeon .panel.show { display: block; } /* of andere display waarde */

Noot: beide oplossingen heb ik niet getest ;) Wil je een berichtje geven of ze werken?
 
Tuurlijk @bron, de 1e de PHP versie werkt als een speer!
 
De while loop kan ietsje anders :) je begint met $acButton = 0 en zet de $acButton++ direct na de while regel.
Aan het eind van de while loop geeft de waarde $acButton precies het aantal buttons/pnaels die er zijn.
Code: 
<?php $acButton = 0; ?>
<?php while( have_rows('acffieldname-accordeon') ):
    $acButton++;
    the_row();
    ....
    </div>
<?php endwhile; ?>
 
Laatst bewerkt:
Bedankt voor je aanvulling. Waarom de loop anders maken?
 
Beide mogelijkheden geven voor jou hetzelfde resultaat.
De iets andere volgorde bij #6 is alleen voor als je de waarde $acButton ergens anders wilt gebruiken. Na de while loop is bij post #6 de waarde van $acButton precies het aantal rijen. Bij post #2 zal je $acButton - 1 moeten gebruiken om het juiste aantal rijen te krijgen zodra je uit de while loop bent. Het is dus alleen interessant als je heel ergens anders $acButton wilt gebruiken. Een ander dingetje is dat #6 iets prettiger leest maar ook dat is niet zo interessant bij dit kleine stukje code.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan