Question

I am trying to create a simple function that can take a parameter and pass it into a .toggle() event. This page contains potentially hundreds of individual toggle events. I want one function to handle all of these events.

 function toggleVehicles(partId) {
$("#"+partId+"vehicles").fadeToggle('fast');
}

The function is called from clicking on a table row:

<tr id="<? echo $id; ?>Control" onClick="showVehiclesbyPart(<? echo $id; ?>); toggleVehicles(<? echo $id; ?>)" class="list">

The function showVehiclesbyPart is the AJAX data collection, followed by the function in question here.

The function works, except that when initially clicked, the toggle doesn’t execute properly. It looks as though it’s toggling out and back in instantly. Any clicks that follow will toggle the div correctly.

I looked into some other posts concerning similar issues, and binding was mentioned. I’m new to jQuery and Javascript, and I can’t seem to find what I feel is probably an easy fix.

The page is located at http://www.partsconsign.com. Expand a category and click on a part number record to see the issue.

Answer 1

Your problem is that your table rows that display your vehicle parts is initially displayed. When you click the first time, it loads the data, then toggles from:

display: table-row; 

to

display: none;

Change these rows to display: none; on page load, so when they’re first clicked, they will toggle to show and not hide.