Thread

Hi all,

I have a field in one of my channels that is a checkbox field, that has several options.

I am looking for how I can output this list into a list where the individual li items have different classes.

Here is an example of the HTML I am looking to achieve…

<ul>
 
 <li class="option1">
  
  <h4>Option 1</h4>
<p>  Description of Option 1<br />
  <br />
 </li><br />
 <br />
 <li class="option2"><br />
  <br />
  </p><h4>Option 2</h4>
<p>  Description of Option 2<br />
  <br />
 </li><br />
 <br />
 <li class="option3"><br />
  <br />
  </p><h4>Option 3</h4>
<p>  Description of Option 3<br />
  <br />
 </li><br />
 <br />
 <li class="option4"><br />
 <br />
  </p><h4>Option 4</h4>
<p>  Description of Option 4<br />
  <br />
 </li><br />
 <br />
 <li class="option5"><br />
  <br />
  </p><h4>Option 5</h4>
<p>  Description of Option 5<br />
  <br />
 </li><br />
 <br />
</ul>

In this example, each option has a different class, as each class shows a little icon for that specific option.

This make sense? Any thought appreciated!

I’d suggest heading over to http://pixelandtonic.com/divebar and install the P&T field pack, which has a checkbox field where you can add a label to.(the docs for these fieldtypes are included in the download).
Your code would look something like this:

<ul>
{myfield}
 <li class="option{count}">
  <h4>{option}</h4>
<p>  {option_name}<br />
 </li><br />
{/myfield}<br />
</ul>

OK, I think I get that. Presumably it’s ok to put a short sentence or two as the

{option_name}

?

Also the other problem, is that I already have the field set up as a checkbox field with 100+ entries, so not sure how I can change from that?

Only one way to find out 😊 , if in doubt check on the PixelandTonic help forum if you can safely switch fieldtypes before you do so. In in any doubt make a backup of your DB so you can roll back just in case.

OK, I shall have a look into it. I’ve got a dev site that I can test on, so no biggy if it goes borked!

I was wondering though, would a possible way of doing it would be by IF statements?

Something like..

<ul>
  {field_name}
    {if {item} =="Option 1"}
    <li class="option1">
      <h4>Option 1</h4>
<p>      Description of Option 1 <br />
    </li><br />
    {/if}<br />
    {if {item} =="Option 2"}<br />
    <li class="option2"><br />
      </p><h4>Option 2</h4>
<p>      Description of Option 2 <br />
    </li><br />
    {/if}<br />
<!-- ond so on… --><br />
  {/field_name}<br />
</ul>

Not sure if this would even be possible let alone a very efficient or good way to do it?