Question

<?php
   echo("var answersC = answer-table-$qrow->id;");
   echo("var toggleC = toggle-table-$qrow->id;");
?>

   jQuery('toggleC').click(function() {
      jQuery('answersC').slideToggle('fast');
});

Instead of having a static css class name, I have a page that creates unique classes in a loop. I’m hoping to be able to toggle these individual areas, but I don’t know how to use the variable string as the name of the css class.

I also tried it like this with no better luck.

<?php
   echo("var answersC = $qrow->id;");
   echo("var toggleC = $qrow->id;");
?>

   jQuery('.answer-table-'+answerC).click(function() {
      jQuery('answersC'+toggleC).slideToggle('fast');
});

Anyone have any ideas? I don’t know enough to get this working. Thanks!

UPDATE: I should add that this is on a PHP page within script tags.

UPDATE 2:

I’ve been trying the various suggestions to the point that my eyeballs feel like they’re holding back a head full of scrambled eggs. I’m pretty good at googling js solutions, but I don’t have a very wide knowledge of it so it’s hard to understand how to expand on them when they don’t work.

Where I am now is this code: (note I switched from classes to ids)

<script type="text/javascript" language="javascript">
    <!--
    <?php
    echo("var answersC = 'answertable'+$qrow->id;");
    echo("var toggleC = 'toggletable'+$qrow->id;");
    ?>
    jQuery('#'+toggleC).click(function() {
    jQuery('#'+answersC).slideToggle('fast');
    });
    console.log('#'+toggleC); //example #toggletable6
    console.log('#'+answersC); //example #answertable6
    // -->
    </script>

I can see in firebug that the variable content matches the ids in the html and I’m getting no errors, but it still does nothing.

Elsewhere, I am using the following functions to display all answers for all questions:

$('.atoggle').click(function() {
$('.answer-table').slideToggle('fast');
});

This one works perfectly, only I really want to only open answers on a per question basis.

Note: The ‘$’ vs. ‘jQuery’ difference is only because one is in a .js file within a wrapper function to allow the ‘$’ within WordPress, the one that’s not working is simply within the page source at this point. Big thanks to everyone for their input!

UPDATE (final):

For anyone who comes across this in a search, I’ll post the final working code. There was an additional problem getting this to work that required wrapping everything in a document.ready function.

The working version:

<script type="text/javascript" language="javascript">
    jQuery(document).ready(function() {
    <!--
        <?php
        echo("var answersC = 'answertable'+$qrow->id;");
        echo("var newanswersC = 'newanswertable'+$qrow->id;");
        echo("var toggleC = 'toggletable'+$qrow->id;");
        ?>

        jQuery('.'+toggleC).click(function() {
        jQuery('.'+answersC).slideToggle('fast');
        jQuery('.'+newanswersC).slideToggle('fast');
        });
    });
        // -->
</script>

Answer 1

instead of

jQuery('toggleC').click(function() {
      jQuery('answersC').slideToggle('fast');

try

jQuery('.'+toggleC).click(function() {
      jQuery('.'+answersC).slideToggle('fast');

note that if you have several toggles and answers on your page, a toggleC click with tooggle all answers. To toggle only answers belonging to the click answer use:

jQuery('.'+toggleC).click(function() {
      jQuery(this).find('.'+answersC).slideToggle('fast');

finally, note that you don’t need to add the the id in the class (transversability, yada yada), and that you can use something like

jQuery('table').delegate('.'+toggleC, 'click', (function() {
    jQuery(this).find('.'+answersC).slideToggle('fast');

in order to create only one event handler instead of “number of rows”. (but this ain’t very important)