odd/even colors

[techker]

Hey guys i have a script that has accordian content but i would like it to have odd and even colors?

 

<div id="va-accordion" class="va-container">
              
<div class="va-wrapper">
               
               <?php while($info = mysql_fetch_array($result)){?>
<div class="va-slice va-slice-1">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td rowspan="2" valign="top"><img src="images/recent3.jpg" width="160" height="140" ></td>
    <td valign="top">  <h3 class="va-title">  <? echo $info['Make'] ?> <? echo $info['Model'] ?> <? echo $info['Year'] ?></h3></td>
  </tr>
  <tr>
    <td valign="top"> </td>
  </tr>
                    </table>
<div class="va-content">
<p><div class="bubble"><? echo $info['Retail_price']?>$</p>
                            <? echo "<span class='echo_short'>".$info['Description_short_FR']."</span>"; ?>
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="16%"><img src="images/recent3.jpg" width="126" height="120" ></td>
    <td width="84%"><img src="images/recent3.jpg" width="126" height="120" ></td>
  </tr>
</table>
</div>          
</div>
</div> 
        <? } ?> 
        
          </div></div>

i tried:

 

 

 
.odd{
 color:red;  
}
 
.even{
 color:blue;   
}
 
 

<script type="text/javascript">
$(function(){
    $(".va-slice div.post:odd").addClass('odd'); 
    $(".va-slice div.post:even").addClass('even'); 
    
});
</script>

Edited January 10, 2014 by techker

[kicken]

CSS3 provides a pseudo-selector for this called :nth-child. If you want something that works on much older browsers then you'll need to have your PHP code generate alternating class names, the most common method of which is using the modulus operator. eg:

 

$class = $rowNum%2?'odd':'even';

While you could apply the effect after the affect with jQuery (as you tried) it is unnecessary to involve Javascript in something such as this.

[techker]

so how would i call the php in the wrapper?

[techker]

bump please?

[Psycho]

so how would i call the php in the wrapper?

 

You don't. You add the logic in the PHP page that is called so those classes are already in the page when it loads. Or, if the wrapper is a PHP page, then you would have to show how the page is built.

Edited January 12, 2014 by Psycho

[techker]

but you see where im confused is that i have no table?it's all css..the only table i have is when i expand the accordion to see the content.but that part don't need any colours..

 

 

its the <div class="va-slice va-slice-1"> that should be on odd change colours..

[kicken]

but you see where im confused is that i have no table?

Nobody said anything about tables. You either generate even/odd class names and apply them like any other class, or you use the :nth-child selector.

[techker]

ok i got it..lol

 

so i added in my css

 

.va-slice-1:nth-child(odd)

{

background:#CCC;

}

.va-slice-1:nth-child(even)

{

background:#999;

}

 

works great!