Problem with Jquery Accordion in Table WordPress
- SOLVED
I have a taxonomy archive page containing multiple tables, each contain info of the posts of a specific custom taxonomy.
I've used the jExpand plug-in to create accordion drop down forms on the tables. This works fine for every odd table, but on the even numbered tables the javascript is accidently adding the "odd" class to the wrong row. It seems to be ignoring the first row.
Can anyone help with the problem please?
The page in question, so you can see the issue, is here:
http://www.flintandtinder-proofing.co.uk/my-car-broker/new-cars/audi/a1/
Here is the js code pulled in by the page-scripts.js:
jQuery(document).ready(function($) {
$(".car-table tr:odd").addClass("odd");
$(".car-table tr:not(.odd)").hide();
$(".car-table tr:first-child").show();
$(".car-table tr.odd").click(function(){
$(this).next("tr").fadeToggle(500);
$(this).find(".accordion").toggleClass("up");
});
});
And here is how the tables are set up in the template:
<table class="car-table" width="700" style="width:785px;">
<?php
$args = array(
'post_status' => 'publish',
'post_type' => 'new_cars',
);
$loop = new WP_Query( $args );
if($loop->have_posts())
{
?><tr>
<th>Model</th>
<th>Fuel</th>
<th>Type</th>
<th>RRP</th>
<th>Saving</th>
<th>CO<sup>2</sup></th>
<th class="price-col">Price</th>
</tr><?php
while ( $loop->have_posts() ) : $loop->the_post();
?>
<tr>
<td><a href="<?php the_permalink(); ?>">
<?php the_title();?>
</a></td>
<td><?php the_field('fuel');?></td>
<td><?php the_field('transmission');?></td>
<td>£<?php the_field('rrp');?></td>
<td>£<?php the_field('save');?></td>
<td><?php the_field('co2');?></td>
<td><?php the_field('discount');?></td>
<td class="accordion"><div class="list-quote-link">Get a quote</div></td>
</tr>
<tr>
<td colspan="8">
<?php echo FrmEntriesController::show_form(7, $key = '', $title=true, $description=true); ?>
</td>
</tr>
<?php
endwhile;
}else
{
?>
<tr><td colspan="8" align="center">Sorry there are no posts in this category. <a href="#">Click here</a> for a quote.</td></tr>
<?php
}
?>
</table>
Answers (2)
Christianto answers:
Hi,
Since the order (even and odd <tr>) is based on each car-table,
Please try this..
jQuery(document).ready(function($) {
jQuery('.car-table').each(function(){
var car_table = $(this);
car_table.find("tr:odd").addClass("odd");
car_table.find("tr:not(.odd)").hide();
car_table.find("tr:first-child").show();
car_table.find("tr.odd").click(function(){
$(this).next("tr").fadeToggle(500);
$(this).find(".accordion").toggleClass("up");
});
});
});
flint_and_tinder comments:
Perfect. Thank you.
Quick question: is there anyway I can set it so that the forms are hidden on page load? When I refresh, they flash up before they hide?
Would a JS FOUT piece of script work?
No worries if you don't want to answer this. I'll pay anyway.
Christianto comments:
<blockquote>Quick question: is there anyway I can set it so that the forms are hidden on page load? When I refresh, they flash up before they hide?</blockquote>
if we using javascript to hide it, it will wait until all dom ready since we use ready(), so we can see it flash up,
it should be done by css, or we can add inline style attribute when we loop.
for example
[[LINK href="http://pastebin.com/xDWQcRMJ"]]http://pastebin.com/xDWQcRMJ[[/LINK]]
flint_and_tinder comments:
Thanks Christiano. At the moment I've just added a visibility:hidden css rule onto the row containing the form and that seems to have worked on Safari at least. Should it fail in other browsers I shall look into your code again.
Thank you again. Have a good day!
Arnav Joy answers:
you can also try this php version of code rather than useing jquery so replace your jquery with
jQuery(document).ready(function($) {
$(".car-table tr:not(.odd)").hide();
$(".car-table tr.odd").click(function(){
$(this).next("tr").fadeToggle(500);
$(this).find(".accordion").toggleClass("up");
});
});
then use following code
<table class="car-table" width="700" style="width:785px;">
<?php
$args = array(
'post_status' => 'publish',
'post_type' => 'new_cars',
);
$loop = new WP_Query( $args );
if($loop->have_posts())
{
?><tr>
<th>Model</th>
<th>Fuel</th>
<th>Type</th>
<th>RRP</th>
<th>Saving</th>
<th>CO<sup>2</sup></th>
<th class="price-col">Price</th>
</tr>
<?php
$i=1;
while ( $loop->have_posts() ) : $loop->the_post();
if( $i%2!=0 )
$class = 'odd';
else
$class = '';
?>
<tr class="<?php echo $class;?>" <?php if($i==1) { ?> style="display: table-row;" <?php } ?> >
<td><a href="<?php the_permalink(); ?>">
<?php the_title();?>
</a></td>
<td><?php the_field('fuel');?></td>
<td><?php the_field('transmission');?></td>
<td>£<?php the_field('rrp');?></td>
<td>£<?php the_field('save');?></td>
<td><?php the_field('co2');?></td>
<td><?php the_field('discount');?></td>
<td class="accordion"><div class="list-quote-link">Get a quote</div></td>
</tr>
<tr>
<td colspan="8">
<?php echo FrmEntriesController::show_form(7, $key = '', $title=true, $description=true); ?>
</td>
</tr>
<?php
$i++;
endwhile;
}else
{
?>
<tr><td colspan="8" align="center">Sorry there are no posts in this category. <a href="#">Click here</a> for a quote.</td></tr>
<?php
}
?>
</table>