Friday, July 2, 2010

jQuery alternating show and hide ...continued

After performing what I thought solve the issue, I came up with another blockage.

The technique from my previous posting worked brilliantly but it wasn't how I wanted it.

This post will further illustrate what I mean.

You see, what I set out to do was to allow the 'jQuery alternating show and hide' individually for each data row.

Let me explain.

I have a list of some data. For the purpose of this example. Lets use HTML unordered-list items.

<ul>
<li>blah1</li>
<li>blah2</li>
<li>blah3</li>
.
.
.
<li>blah-n</li>
</ul>

I had a HTML link (a-href tag) and a HTML paragraph (p tag) in each HTML li tag (see above). The a-href tag was suppose to perform the 'jQuery alternating show and hide' on the p tag.

Within the p tag, there lies the data.

Thus, to solved this, do the following.

1. Create a ASP.Net literal tag to replace the a-href tag.
If you are binding data to a repeater like what I am doing, you can simply access the ASP.Net literal tag in the OnItemDataBound event of the repeater.


2.Use the IF-ELSE statement from Step 5 of the previous post and convert that into a string.

NOTE: open & close swiggly brackets will have to be done twice for each instance.
This caught me out and I was having string issues when building my code.



3. After converting the IF-ELSE statement of Step 5 of the previous post to a string, append the converted string such that it make a distinction on each a-href tag.
The way I did this was to append "_" followed by the ID obtained from the data.

NOTE: Remember to include "return false;" after you've completed the IF-ELSE statement, if not the page will reload to the top of the page!

4. You will also have to append the p tag to used the same method as mentioned in Step 3.

Build your code and

TA-DAH, you're done!

No comments:

Post a Comment