multiple hyperlink clicks required to fire jquery function

Question

JQuery Code

 $(".riskInformationButton").bind("click", function(e){
         var toggler = $(this).parent().parent().next();
         var className = $(toggler).attr("class");

         while(className.indexOf("space") == -1){
            toggler.addClass("visible");

            if(toggler.hasClass("visible") && toggler.hasClass("hidden"))
            {
                toggler.removeClass("hidden");
            }
            else if (toggler.hasClass("visible"))
            {
                toggler.removeClass("visible");
                toggler.addClass("hidden");
            }

            toggler = toggler.next();
            className = $(toggler).attr("class");

            if(!className)
            {
                break;
            }
         }
    });

HTML Code

<tr class="spacerRow"></tr>
<tr id="point202" class="riskManagementRow">
<td class="rmRisk">
<a id="ctl00_ContentPlaceHolderMain_planRisk202_riskInformationButton202" class="riskInformationButton" name="PlanRisk202">
Student Drug Abuse
<span class="rmRiskCategory">(Schools)</span>
</a>
</td>
<td class="rmFrequency">
<select id="ctl00_ContentPlaceHolderMain_planRisk202_riskFrequencyDropDown202" class="riskFrequencyDropDown" onchange="updateRiskFrequencyOfPointOnMap('riskFrequencyDropDown202');" name="ctl00$ContentPlaceHolderMain$planRisk202$riskFrequencyDropDown202">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7" selected="selected">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td class="multiply">
<span class="multiply">x</span>
</td>
<td class="rmSeverity">
<select id="ctl00_ContentPlaceHolderMain_planRisk202_riskSeverityDropDown202" class="riskSeverityDropDown" onchange="updateRiskSeverityOfPointOnMap('riskSeverityDropDown202');" name="ctl00$ContentPlaceHolderMain$planRisk202$riskSeverityDropDown202">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6" selected="selected">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td class="equals">
</td>
<td class="rmRiskFactor">
</td>
<td class="rmPercentComplete">0%</td>
<td class="rmDeletePlan">
</td>
</tr>
<tr class="rmPlanSolutionRow hiddenOnLoad"></tr>
<tr class="rmPlanSolutionRow hiddenOnLoad"></tr>

<tr class="spacerRow">

...code continues in this pattern.

I'm attemping to show the hidden rows when the riskInformationButton is clicked. The problem that i'm having with this is that it sometimes takes multiple clicks for the hyperlink click to show the hidden rows.

I'm on a strict deadline for this task, and any help would be much appreciated. Thanks in advance, shawn

Answer 1

I would advise you search for tr's that have a certain class, like "toggleable" rather than those that don't have the word "space" in them. That takes a lot of time, and the logic will be easier to follow.

    $(".riskInformationButton").bind("click", function(e){

         $("toggleable").each( function {

            toggler.toggleClass("hidden");
            toggler.toggleClass("visible");

     });
});

Is a rough idea of what you might be able to get. I do understand that you are on a deadline, and this might not be the absolute quickest solution :D

Answer 2

summing up the code and seeing the need to end in the classroom "spacerRow. the code could be so:

$(".riskInformationButton").bind("click", function(e){

  e.stopPropagation();

  var toggler = $(this).parent().parent().next();
  while(!toggler.hasClass("spacerRow")){
  toggler = toggler
     .toggleClass("hidden")
     .toggleClass("visible")
     .next();
  }
});