Incremental variable

[Peter Knight]

Im working on an FAQ section for a client. It's using Foundations Accordian JS so you click a Question and it toggles the Answer. You know the deal.

The tricky part for me is when looping through my FAQs, I need to assign each anchor and target div with a unique number.

Been trying to set a variable at one and then incrementally add a number per each FAQ. Wondered if my syntax was wrong or if there are more basic issues with the $x=1 idea. 

<a href='#$x++'>{$faq->title}</a>; 
<div id='$x++' class='content'>

My working code (apart from the $x++)

<?php
$x=1; // Start a fairyball at 1

$faqs = $pages->find("template=faq-detail");
echo "<dl class='accordion' data-accordion>";

foreach ($faqs as $faq) 
echo "
<dd class='accordion-navigation'>
    <a href='#$x++'>{$faq->title}</a>; 
    <div id='$x++' class='content'>
      {$faq->faq_body} 
    </div>
  </dd>
 ";

echo"</dl>"
;?>

[kongondo]

I'd forget about incrementing anything...you already have unique numbers in page->id. Use faq->id and problem sorted, unless for some other reasons you need to start from 1....

[Peter Knight]

Of course! There's me assuming it needs to be complicated :-/

I had tried page->title but that was massive. Hadn't thought of ID as I only use them in MODX

[Joss]

When I have done this before, I have grabbed the page id and used that. $faq->id

Saves a lot of messing with counts (careful how you say that in your dublin accent)

Edit - Damn, Kongondo got there first!

Also, I think there is a thing about using a number for a class or id in css, so you need to do something like: href='#accord{$faq->id}'

And the the corresponding id on the element in the same way

[Peter Knight]

@Joss

They're quick alright. If you look at the "who's reading this topic", they're like seagulls on a hot chip variable in summer.

[Joss]

ha!

Oh, by the way, if you want to set the first one to open, then I think it has to have an "active" class.

Find your first one:

$firstfaq = $faqs->first();

Then compare it after the foreach opening to the $faq iterations

$activeClass = ($faq === $firstfaq ? 'active' : '');

... I think

edit: oh, and then use it! (forgot that bit)

<div id='panel1' class='content {$activeClass}'>

[Peter Knight]

ha!

Oh, by the way, if you want to set the first one to open, then I think it has to have an "active" class.

Find your first one:

$firstfaq = $faqs->first();

Then compare it after the foreach opening to the $faq iterations

$activeClass = ($faq === $firstfaq ? 'active' : '');

... I think

edit: oh, and then use it! (forgot that bit)

<div id='panel1' class='content {$activeClass}'>

I was just wondering the same

My faq->id is working and my echos are er, echo'ing but clicking on an Q doesn't toggle the A right now.

[Joss]

Check that the href and the panel id are identical?

    <a href="#panel2">Accordion 2</a>
    <div id="panel2" class="content">

[Joss]

And....

If you want them to slide open, rather than switch open, I think I borrowed from this at one stage:

http://foundation.zurb.com/forum/posts/492-easing-effects-for-top-bar-accordion-and-tabs

[Peter Knight]

Check that the href and the panel id are identical?

    <a href="#panel2">Accordion 2</a>
    <div id="panel2" class="content">

Yep. Pulling in the ID and applying it to each FAQ.

I also tried some raw code from the Foundation site and can confirm the toggle actually works and the Toggle.JS is working on that page.

[Joss]

Paste the whole code

Edit:

A good debugging trick is to copy the generated code from the page source, shove it back into the template file and work out what is wrong

[LostKobrakai]

If all your faq are under one parent the pagename would also be unique. I find this sometimes more descriptive than the id, if I use some kind of hash navigation.

[Peter Knight]

If all your faq are under one parent the pagename would also be unique. I find this sometimes more descriptive than the id, if I use some kind of hash navigation.

Because my page names are based on FAQs, they resulted in massive URLs so I stuck with the ID method. Nice to have so much flexibility though.

[diogo]

Meanwhile no one cared about correcting your wrong code

Here it goes:

<?php
$x=1; // Start a fairyball at 1 <- this is fine

$faqs = $pages->find("template=faq-detail");
echo "<dl class='accordion' data-accordion>";

foreach ($faqs as $faq) 

// here I changed your $x++ to only $x
// By calling one after the other you were incrementing them between the <a> and the <div>, when what you really want is them to have the same value
// also added the {} for clarity
echo "
<dd class='accordion-navigation'>
    <a href='#{$x}'>{$faq->title}</a>; 
    <div id='{$x}' class='content'>
      {$faq->faq_body} 
    </div>
  </dd>
 ";

echo"</dl>"

$x++; // <- here is where you want the value of $x to be incremented, so it holds a higher number in the next loop

;?>

[Peter Knight]

This is very interesting to me. I got it working.

I'm not sure if its Foundation which doesn't like having an integer as the target or wether it's a PW issue.

In the end, I had to switch to name

<a href=\"#{$faq->name}\">{$faq->title}</a>

instead of id

<a href=\"#{$faq->id}\">{$faq->title}</a>

Here's my full code. I'm not using an active class but that doesn't matter right now.

<?php

echo "<dl class=\"accordion\" data-accordion >";

$faqs = $pages->find("template=faq-detail");

foreach ($faqs as $faq) 

echo "
<dd class=\"accordion-navigation\">
    <a href=\"#{$faq->name}\">{$faq->title}</a>
    <div id=\"{$faq->name}\" class=\"content\">
      {$faq->faq_body} 
    </div>
</dd>
 ";

echo"</dl>"
;?>

Hopefully someone else will have the same issue and find this thread

[kongondo]

You could have just appended a string, e.g. 'panel' to every id then ...Nice and short rather than using names...not that the browser cares anyway . But it works, that's what's important...

[Peter Knight]

You could have just appended a string, e.g. 'panel' to every id then ...Nice and short rather than using names...not that the browser cares anyway . But it works, that's what's important...

That would/should work and it'd mean shorter anchors as some of my names are 20 words long :-/