Jump to content

Recommended Posts

Posted

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>"
;?>
Posted

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....

  • Like 3
Posted

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

Posted

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

  • Like 3
Posted

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}'>
Posted

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.

Posted

Check that the href and the panel id are identical?

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

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.

Posted

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

Posted

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.

Posted

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.

Posted

Meanwhile no one cared about correcting your wrong code :P

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

;?>
  • Like 4
Posted

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

Posted

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...

  • Like 1
Posted

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 :-/

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...